How to download images on mobile to upload to my server?

Question

I'm writing an application in phonegap/cordova. In the application, users have a profile and they can select facebook images to include with their profile.

When they select the images for their profile, I want to upload those specific images to my own server.

I did some research and was able to write some code that download the images but I didn't test it on mobile until after I wrote the code.

I used an XML HTTP Request to download the image as a blob. However, upon testing in mobile, I got errors that the blob.size parameter was not set.

I checked in the browser and indeed the blob.size parameter exists. In mobile, the blob.size parameter is undefined. This led me to believe that the webkit that is on my phone does not support blobs and therefore cannot download the images as blobs.

I have 2 questions really:

1) Is my assessment correct that the blob is not being downloaded because the webkit does not support blob?

2) If 1 is true what is the proper way to download an image in cordova and then upload it to my own server? Alternatively, is there any way I can just tweak my code so that it works on mobile? Also I should note that since the files are already downloaded to my phone, is there a way to simply access them in the local storage instead of downloading them again and then upload that file to my server?

My current code to download as a blob is below:

function xhrPromise(url){
    var xhr = new XMLHttpRequest();
      xhr.open('GET', url, true);
      xhr.responseType = 'blob';
      xhr.onload = function(e) {
        if (this.status == 200) {
        var myBlob = this.response;
        return myBlob;
        }
      };
    xhr.send(); 
  }

Based on further research I'm wondering if the solution is to use the cordova file-transfer plugin?

Any suggestions would be greatly appreciated.

score 0 · Answer 1 · edited May 23 '17 at 11:49

1) Webkit supports blob through HTML File API. Read: Exploring the FileSystem APIs

2) I will try to point you into the right direction. What I would do, if I wanted to download an image then re-upload it to another server.

Use Cordova's FileTransfer Plugin to download the picture and write it to a temp location in the SD Card (Android) or the App's Document folder (iOS).
If the image is under 2MB, use a simple HTML tag to link to the downloaded picture, using CDVFILE protocol, <img src="cdvfile://localhost/persistent/temp/image.jpg" /> (for Android) then use AJAX to post it to your server, by encoding the image into base64. Read: How to convert image into base64 string using javascript.
If the image is over 2MB, use Cordova's FileTransfer Plugin to upload.

When using Cordova's FileTransfer Plugin, you will come across HTML File API, I strongly suggest you keep this link as a reference. Read: Exploring the FileSystem APIs

The reason why I would prefer using base64 encoding is because 1) I don't like to rely on Cordova plugins, they used to be super buggy. 2) You can save base64 strings into MySQL (but anything over 2MB will impact your server and the device encoding it).

How to download images on mobile to upload to my server?

1 Answers1