choosing .jpg,.pdf,.docs etc files from galley and uploading it to server via your API using IONIC 2. (DOESN'T WORK ON IOS)

uploadingresume.txt

 // Install file chooser and file transfer API from ionic 2 and import them into your page.ts. and don't forget to add providers in 
app.component.ts

 
 
 import { Component } from '@angular/core';
import { NavController, NavParams} from 'ionic-angular';
import { Home } from '../../homemodule/home';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserProfileService } from '../../services/login.service';
import { ConfirmidentityPage } from '../confirmidentity/confirmidentity';
import { ProgressDialog } from '../../utility/progress-dialog';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Transfer, FileUploadOptions, TransferObject } from '@ionic-native/transfer';
import { FileChooser } from '@ionic-native/file-chooser';
 
 
 
  constructor(public navCtrl: NavController, 
          public navParams: NavParams, 
          private builder: FormBuilder, 
          private userProfileService: UserProfileService,
          private progressDialog: ProgressDialog,
          private transfer: Transfer,
          private camera: Camera,
          private fileChooser: FileChooser
   ) {}
 
 
 uploadresume()
  {
      this.fileChooser.open()
      .then(uri => 
      {
        console.log(uri)
         const fileTransfer: TransferObject = this.transfer.create();


    // regarding detailed description of this you cn just refere ionic 2 transfer plugin in official website
      let options1: FileUploadOptions = {
         fileKey: 'image_upload_file',
         fileName: 'name.pdf',
         headers: {},
         params: {"app_key":"Testappkey"},
         chunkedMode : false
      
      }

      fileTransfer.upload(uri, 'your API that can take the required type of file that you want to upload.', options1)
       .then((data) => {
       // success
       alert("success"+JSON.stringify(data));
       }, (err) => {
       // error
       alert("error"+JSON.stringify(err));
           });

      })
      .catch(e => console.log(e));
  }

Why don't you try this ? https://github.com/coolvasanth/upload-multiple-image-files-in-Ionic-3-4. You will be able to upload all types of files with this. Let me know, still if you face any problem.

Thanks for your help @coolvasanth. I just used your code but this piece of code "
this.base64.encodeFile(filePath).then(
(base64File) => {
console.log("BASE 64 IS", filePath.split(".").pop());
console.log(base64File);
if (isImage == false) {
this.fileArray.push({
displayFile: filePath.split("/").pop(),
base64File: base64File.split(",").pop() //split(",").pop() depends on the requirement, if back end API is able to extract
//the file mime type then you can do this, if back end expects UI update the Mime type
// then don't use split(",").pop()
});
} else {
this.imageArr.push({
displayImg: filePath,
base64Img: base64File.split(",").pop() //same comment for image follows here.
});
}
console.log("LENGTH OF BASE64ARR", this.fileArray.length);
},
err => {
console.log(err);
}
);
" does not convert the file to base64 .

this massage is captured => console.log("BASE 64 IS", filePath.split(".").pop());
but console.log(base64File); don't display anything

hi @coolvasanth, i realize that the base64 plugin of ionic 3 is still in beta version. I tried to use filetransfer to upload a pdf file but without success. if you once use the ionic 3 filetransfer plugin, your help will be welcome

Hi Alabiboo, sorry for the delayed response. As you might aware cordova-file-transfer is a old plugin, it doesn't have any support now, so I would suggest you, avoid using that. Base 64 plugin should work, if it not working, then can you kindly give explanation about the device, Ionic and NodeJS version ?

Hi @coolvasanth,
Android version 8.1
Ionic version 3.20.1
NodeJS version v10.0.0

Hi @alabiboo, all the things look fine, have you tried the execution on multiple devices ? you have said that console.log(base64File); don't display anything. Can you check in the chrome inspector during the API call, does it contains the base64 parameter ? As Bae64 string is very long, sometimes inspector fail to render it.

Okay! yes, it is chrome inspector that I use. if I select an image file, console.log(base64File); displays a too long string, but if I select a pdf file, nothing is displayed. I try to display the content of base64File before calling the API.

Okay, you don't have a problem with Base 64 then, all you have is problem with choosing the PDF. Can you please add the code for choosing the PDF ? And sample output after choosing PDF ?

Okay,

chooseFileForAndroid() {
this.filechooser
.open()
.then(uri => {
this.filePath
.resolveNativePath(uri)
.then(filePath => {
console.log(filePath);
this.convertToBase64(filePath,false);
})
.catch(() => {
console.log('Error reading path');
});
})
.catch(e => {
console.log(e);
});
}

after choosing the pdf,
console.log(filePath); displayed file:///storage/emulated/0/Download/CSC73010-Assignment-2-S3-2019 (1).pdf

Hi @alabiboo the same code is working for me. Anyways I tried a alternative for you, kindly have a look at below.

1. Install File plugin from here > https://ionicframework.com/docs/native/file/
2. let base64PDF = await this.file.readAsDataURL(pdfFilePath, pdfFilename);

This also worked for me. Let me know your feedback.