0

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:

enter image description here

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:

enter image description here

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");

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).

Vinícius Mendes de Souza
  • 845
  • 2
  • 8
  • 21
  • You can post blob to server. Don't need convert it to File object. (Blob is file). – Hanh Le Apr 29 '16 at 02:12
  • It doesn't work beause I have to define an image name to file to upload to my server. Even if I try "formData.append('file', blob, "employeePhoto.png");" it uploads my photo but when I download the foto it gives me "Invalid Photo" when I try to open. – Vinícius Mendes de Souza Apr 29 '16 at 13:53
  • Blob file created invalid (base64 data or you create blob incorrect). So that you can't open). I current use blob to upload on Cordova app, it working. Please try convert base64 to blob object. http://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript – Hanh Le May 04 '16 at 01:54

1 Answers1

0

If you are trying to convert base64 to File, you can utilize part of canvas.toBlob() polyfill

var base64 = "data:image/png,base64,"; // data URI

var binStr = atob(base64.split(",")[1]),
  len = binStr.length,
  arr = new Uint8Array(len);

for (var i = 0; i < len; i++) {
  arr[i] = binStr.charCodeAt(i);
}

var file = new File([arr], "image");

var img = new Image;
img.onload = function() {
  document.body.appendChild(this);
  URL.revokeObjectURL(url);
}

var url = URL.createObjectURL(file);
img.src = url;
guest271314
  • 1
  • 15
  • 104
  • 177
  • I'm trying to upload my image that is already in base64 to my server. But to do this, I'm trying to convert base64 to File and send as MultiPart and it is not working via Cordova. – Vinícius Mendes de Souza Apr 29 '16 at 01:14
  • You are trying to convert `base64` to `File` ? – guest271314 Apr 29 '16 at 01:16
  • Yes. As my description, it works perfectly in Web, but not work running via Cordova in my Android device – Vinícius Mendes de Souza Apr 29 '16 at 01:23
  • It happens the same thing. In web browser it works! But running in an Android device via Cordova it not works. The result is the same as the images in my description =( – Vinícius Mendes de Souza Apr 29 '16 at 01:52
  • @ViníciusMendesdeSouza Have no experience with `Cordova`. Can you link to documentation? – guest271314 Apr 29 '16 at 01:55
  • @ViníciusMendesdeSouza What is the `Array` at `File.name` ? `File.name` should be a string. See also https://github.com/MobileChromeApps/cordova-plugin-blob-constructor-polyfill – guest271314 Apr 29 '16 at 02:07
  • 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). – Vinícius Mendes de Souza Apr 29 '16 at 02:39
  • Try using `Blob` instead of `File` constructor. – guest271314 Apr 29 '16 at 03:08
  • It doesn't work beause I have to define an image name to file to upload to my server. Even if I try "formData.append('file', blob, "employeePhoto.png");" it uploads my photo but when I download the foto it gives me "Invalid Photo" when I try to open. – Vinícius Mendes de Souza Apr 29 '16 at 13:53
  • How is `base64` generated? If image is uploaded then converted to `Blob` before being converted to `base64`, the file should have a `name` at `Blob` interface – guest271314 Apr 29 '16 at 14:13