Skip to content

Instantly share code, notes, and snippets.

@coolvasanth
Last active April 3, 2020 05:40
choosing .jpg,.pdf,.docs etc files from galley and uploading it to server via your API using IONIC 2. (DOESN'T WORK ON IOS)
// 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));
}
@alabiboo
Copy link

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

@coolvasanth
Copy link
Author

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 ?

@alabiboo
Copy link

alabiboo commented Apr 1, 2020

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

@coolvasanth
Copy link
Author

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.

@alabiboo
Copy link

alabiboo commented Apr 1, 2020

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.

@coolvasanth
Copy link
Author

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 ?

@alabiboo
Copy link

alabiboo commented Apr 2, 2020

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

@coolvasanth
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment