Base64 image upload in Web but not upload in a device via Ionic

I’m developing an app and trying to upload an image in base64 to my server. Testing the code via web it works perfectly! And when I convert the image in base64 to File, it returns me the following object:

But when I try to make the same thing in my mobile app running on an Android device, the same code creates to me the following File object:

What is happening? I call the function to convert my base64 image to File as this:

var blob = new Blob([photoBase64], {type: 'image/png'});
var filePhoto = new File([blob], "employeePhoto.png");

It is very strange that the same code gets different results when running via Web Browser and running via Android.

In first image (which worked) I was running on web browser.
In second image (not worked) I was running on Android app.
It is the same code…

It appears that File constructor have different behavior in web browser and Android app. I am not understanding this. Passing the parameters to File constructor in the same order create different File objects (as the described on images).

Nobody have ever upload base64 image to own server?

i implemented base64 upload but without forms. only json-data.

implemented in nodejs and in combination with ionic/angularjs.

Maybe cordova/native devices are blocking Form-Files because you should use crodova-file-transfer plugin for this.

Thanks @bengtler,

I’ve also tried to use cordova-file-transfer but I can not upload base64 images through cordova-file-transfer.

I’m trying to upload base64 but until now unsuccesful :frowning:

Has anyone already uploaded base64 image using cordova-file-transfer?

Has anyone already uploaded base64 image using cordova-file-transfer? Nobody?

you can use this plugin. i use it to get the base64 string.

Hello @harith5757

I already have the image in base64. Now the problem is only to upload this image in base64 to my server through cordova-file-transfer or any other way different of Blob/File way as described in my post.

you are using what language as your backend?

Did u get it work?
If yes, can u please share what did u do?
I am facing same problem.


Until now I didn’t find any solution :frowning:

and now I am facing same problem, i just can take image base 64encode

Any Luck with this ??? Facing the same issue …

I have a solved this

Please can you give examples and code samples…

The many other posters here would probably be very appreciative if you were to provide some insight

//import this
import { OnInit } from '@angular/core';
import { CameraOptions, Camera } from '@ionic-native/camera';
import{ AuthService } from '../../providers/auth-service/auth-service';

export class UpdateImagePage implements OnInit {

  responseData: {};
  imgData = {"imageB64":""}
  public photos: any;
  public getImage: any;
  public base64Image: string;

  constructor(private camera : Camera, public authService : AuthService) {

  ngOnInit() { = [];

//function to take picture from camera
  takePhoto() {
    const options: CameraOptions = {
      quality: 100,
      targetWidth: 450,
      targetHeight: 450,
      saveToPhotoAlbum: false,
      correctOrientation: true

//get data picture and psuh to base64image
      imageData => {
        this.base64Image = "data:image/jpeg;base64," + imageData;;;
        this.getPhoto = photoData;
      err => {

//this function for upload and back

//this function to send data imagebase64
  sendData(imageData) {
    this.imgData.imageB64 = imageData;

//my service for send data to server, use your service provider in here 
    this.authService.postData(this.imgData, "uploadPhoto").then(
      result => {
        this.responseData = result;
      err => {
        // Error log

and my html like this

<ion-content padding>
            <ion-col col-12 *ngFor="let photo of photos; let id = index">
                <img [src]="photo" *ngIf="photo" #imageToView (click)="zoom(imageToView)">
        <button ion-button icon-right block (click)="takePhoto()">Take Picture
          <ion-icon name="camera"></ion-icon>
  <button ion-button icon-right block (click)="uploadPhoto">Upload Photo
    <ion-icon name="add-circle"></ion-icon>

this my reference for take and upload

I hope it will work, if any issue you can show to me and I will help as I can. my angular version 5 and ionic version 3.9.2

oh I think this question for ionic 2/3, I’m sorry I didnt see in post if the question for ionic v1

I know this was solved but there is the .btoa() and .atob() that encodes and decodes into base64. Which does which is unknown to me as I always have to do a web search to find the answer :slight_smile:

Hello, @vinimendes3 there is another way other than the Base64. I use this Tutorial and I believe its gonna help you as it did help me few days ago with my image upload to the server using Php on my backend.

I have uploaded images successfully.