Search code examples
javascriptimageuploadgoogle-drive-apingcordova

Uploading to Google Drive - how to use a base64-encoded image or an image path

Fairly new to Javascript and still running into this problem after trying a lot of things:

I'm using http://ngcordova.com/docs/plugins/camera/ to capture an image on the phone and can retrieve as either a base64-encoded image or as a path to the image location (file://storage/emulated/...jpg).

Next I'm using this to upload files to google drive: https://github.com/googledrive/cors-upload-sample

I've successfully uploaded a text file with the given example:

* @example
 * var content = new Blob(["Hello world"], {"type": "text/plain"});
 * var uploader = new MediaUploader({
 *   file: content,
 *   token: accessToken,
 *   onComplete: function(data) { ... }
 *   onError: function(data) { ... }
 * });
 * uploader.upload();

But when I upload an image, it cannot be viewed and I assume it is because I have encoded it wrong.

Here's what I've tried so far:

  • using the base64-encoded imagedata directly
  • creating a blob of image/jpeg type and putting the 64encoded imagedata inside
  • appending "data:image/jpeg;base64," in front of the imagedata
  • this person's suggestion: https://stackoverflow.com/a/27197907/5568940

Is it also possible to use a FileReader to read the image path into a File instead? I just can't figure out what exactly should go into the "file: content" part for an image for the above example code.

Any help would be greatly appreciated!

Solution

  • The upload is expecting the raw image bytes.

    Haven't tried this, but easiest approach is likely working with the image URL which you can resolve to a file (which is also a blob :)

    Something like:

    window.resolveLocalFileSystemURL(uri, function(fileEntry) { var errorHandler = ...; fileEntry.file(function(file) { var uploader = new MediaUploader({ file: file, token: accessToken, onComplete: function(data) { ... } onError: function(data) { ... } }); uploader.upload(); }, errorHandler); });