Can't upload base64 image using cordova-plugin-file-transfer

Question

I'm trying to upload my image in base64 to my server using cordova-plugin-file-transfer and until now it's not working. My code is like this:

photoBase64 = photoBase64.replace('data:image/png;base64,', '');

var url = "http://MYURL.com/path";

var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = "photoName.png";
options.mimeType = "image/png";

var ft = new FileTransfer();

ft.upload(photoBase64, 
          encodeURI(url), 

          function(result) {

                console.log("Code = " + result.responseCode);
                console.log("Response = " + result.response);
                console.log("Sent = " + result.bytesSent);
                resolve("OK");
          }, 

          function(error) {

                alert("An error has occurred: Code = " + error.code);
                console.error("ERROR", error);
                console.log("upload error source " + error.source);
                console.log("upload error target " + error.target);
                reject("ERROR");
          }, 

          options);

And I'm getting the following error with this code:

How can I upload image base64 using cordova-plugin-file-transfer?

Thanks in advance!

score 7 · Answer 1 · answered May 11 '17 at 22:41

7

I'm a year late to the party but I just came upon the answer through trial and error:

You must leave "data:image/png;base64," in the string. I assume without that format it's not a valid url.

specifically in your case, delete this line:

photoBase64 = photoBase64.replace('data:image/png;base64,', '');

It was really that simple for me to get my upload working.

answered May 11 '17 at 22:41

CodeCabin

166
1
11

thanks for sharing! try using a regex instead like photoBase64.replace(/^data:\w+\/\w+;base64,/, '') – jdnichollsc Dec 23 '19 at 04:33

score 0 · Answer 2 · answered May 06 '16 at 11:36

0

The file transfer plugin doesn't take Base64 strings. You have to use the location of the file (file:://android/etc). More info about the File plugin to get the file (this plugin is automatically installed with the filetransfer plugin) is here:

https://github.com/apache/cordova-plugin-file

If you would really want to just use the base64 string, you would have to use $http.post and write a api on the receiving side to recreate the file

answered May 06 '16 at 11:36

Jur Clerkx

698
4
14

Hi Jur. Reading [this question](http://stackoverflow.com/questions/27894534/phonegap-cordova-file-transfer-upload-image-as-base64-string-not-working-in-io) on stackoverflow it appears that there is any way to upload base64 image using this plugin, but until now I've not discovered how to do it. – Vinícius Mendes de Souza May 06 '16 at 12:48
Is your photoBase64 field correct? Maybe your base64 url formatting is wrong? Try to log it. – Jur Clerkx May 06 '16 at 12:57
My base64 string is without initialize, I'm replacing "data:image/png;base64," for "" to have just the data itself, such as: "iVBORw0KGgoAAAANSUhEUgAAAlgAAAMgCAYAAAD/YBzEAAAg... (and so on...)" – Vinícius Mendes de Souza May 06 '16 at 13:06
@ViníciusMendesdeSouza Just cross check this link - http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript to ensure that your base64 image manipulation is right – Gandhi May 09 '16 at 10:12

Can't upload base64 image using cordova-plugin-file-transfer

2 Answers2

Linked