How to convert the pdf file to base64?

Ionic Framework ionic-v3
1

Hi, i’m using the the file chooser plugin and i want to get pdf file and convert it to base64 ? any help please

2

On the first position why do you even want to convert the pdf to base64??

3

To upload it to my server in a chat application

4

I want to let a user to send à file between them

5

You can do that without converting them to base64.
Did you try the base64 plugin??

6

yes but it doesn’t work

this.fileChooser.open().then((data)=>{
      alert("chooser "+data);
      this.filePath.resolveNativePath(data).then(filePath => {
        alert("filepath "+filePath)
        this.base64.encodeFile(filePath).then(base64File => {
          alert("base64 " + base64File);
        }).catch(err => {
          alert("erreur base64 => " + err);
        });
      }).catch(err => {
        alert("erreur filepath => " +err)
      });
   }).catch((error)=>{
     alert("erreur chooser => " +error);
   })
7

In that case you have the option to send a pdf file without converting it to base64.

8

Got it. Thanks, but another question, what about a media file ? E.g: MP3 or mp4

9

https://stackoverflow.com/questions/39596757/encode-mp3-file-to-base64-string-in-ionic
Have a look here.

1 Like
10

this doesn’t work and this one too

  this.fileChooser.open().then((filePath)=>{
     this.filePath.resolveNativePath(filePath).then((filePathResult)=>{
      this.file.resolveLocalFilesystemUrl(filePath).then((result) => {
        this.file.readAsDataURL(filePathResult, result.name).then((fileBase64)=>{
            alert("fileBase64 succeed " + JSON.stringify(fileBase64));
          }).catch((error)=>{
            alert("fileBase64 error " + JSON.stringify(error));
          });
        }).catch((error) => {
           alert(JSON.stringify("error =>  " + error));
        })
     }).catch((error)=>{

     }) 
   })
 }
1 Like
11

Hey. Did you manage to convert the pdf file to base64?

12

For people who still needs to do this i found the alternate workaround by using javascript input type file method
Below are the steps :
in html:

    <input accept="application/pdf"  #fileInput type="file" (change)="onFileChange($event)" />

in TS file :
triggering the input type file click event on a button do this:

@ViewChild(‘fileInput’) fileInputClick: ElementRef;

buttonClick() {

this.fileInputClick.nativeElement.click();
// this will open file chooser

}

// here the event gets triggered after selecting the pdf file

onFileChange(event) {


  console.log(event.target.files)
  var filename = event.target.files[0].name
  console.log("File Name")
  console.log(filename)
  var fileReader = new FileReader();
  fileReader.readAsDataURL(event.target.files[0])
  fileReader.onload = () => {
    console.log(fileReader.result)
   // here this method will return base64 string :D 
}
2 Likes
13

Wonderfull,
The only way that works on ionic 5. Thank you very much