I have a base64 encoded jpeg string that i would like to send to google cloud storage inside the BL.

I am able using the REST API to upload the content but when i try to view the uploaded file the content is not readable. I have tried to decode the string using modules.utils.base64.decode when putting it to GCS.... Do you have any idea of how to do this?

Hello

Anyone could help? this is kind of urgent and i cant seem to find anyway to do it..

Hi @ipelia‌,



The reason that the file content is not readable is because an image file should be a blob, whereas the content of the file you are creating is actually the image data encoded as a string.



If you have access to the image before the encoding takes place then the best way to go about this would be to upload the blob directly, without encoding it, using the [File API](http://devcenter.kinvey.com/rest/guides/files#Uploading "files api").



If you don't have access to the unencoded file, and only the base64 string, but you still want to store the image in GCS then you can decode the base64 string into a blob using the code in [this StackOverflow answer](http://stackoverflow.com/a/16245768/946337). once you have the blob you can upload it using the [File API](http://devcenter.kinvey.com/rest/guides/files#Uploading "files api").

Hello

Thanks for your answer but i am trying to do that inside the BL and i dont think i have access to atob there....

Hi @ipelia,



Could you give a little background on your use case? It would be helpful to understand why you chose to use BL for file uploading rather than the File API?

Sure. Basically we re developing a mobile app with Angular and Cordova.

In our app, a user needs to go to a remote site and fill in a form and take some pictures.

I m using cordova to access the camera and for now, cordova returns the base64 string (i could choose a file instead so). Then the user needs to save this info to Kinvey.

Since the user could be offline when on site, i cant upload directly the files from the mobile app, so i am doing a kinvey save with the form values and the base64 photos which works offline and then inside the PreSave hook i am trying to upload the files to GCS....



Do you see a better way of doing that?

Thanks for you help :)

Hello

I am still struggling with this, even using the File API.

Could you post a valid snippet that shows how to upload a photo using cordova and kinvey in javascript?

Cheers

Hello

Any update on this? Still havent found the proper way of uploading a picture taken from Cordova to Kinvey...

The guide for uploading a file using the phonegap library is here http://devcenter.kinvey.com/phonegap/guides/files#Uploading



You need to follow that process if you want save pictures from a Cordova app.

But my app is based on angular, so i am using the kinvey angular library, not the kinvey cordova one... and with that one i cant make it work...

I m sorry to insist but i really think there is a **bug in kinvey** . Here is what i do:



Basically, the cordova camera plugin is returning the image uri of the picture, then i am using this method to get the file object:



var getFileFromURL = function (url) {

var deferred = $q.defer();

window.resolveLocalFileSystemURL(url, function (entry) {

entry.file(function (s) {

deferred.resolve(s);

});

});

return deferred.promise;

};





and once the file object has been retrieved i am calling this method, to upload the file:





getFileFromURL(vm.imageUrl).then(function (file) {

$kinvey.File.upload(file, {

_filename : 'testangular upload',

mimeType : 'image/jpeg',

size : file.size,

}, { 'public' : true }).then(function (response) {

debugger;

}, function (rejection) {

debugger;

});

});





The upload is successful but :

**the file saved on GCS is invalid and contains a json object instead of the file content** :



> {"name":"cdv_photo_002.jpg","localURL":"cdvfile://localhost/temporary/cdv_photo_002.jpg","type":null,"lastModifiedDate":1400190032000,"size":71755,"start":0,"end":71755}

>



Can you please advise on how to do this properly? it s very urgent

Hi Ipelia,



Can you check the contents of the `file` before you try to upload it and confirm that it is actually the file, and not the json object that seems to be making it's way to GCS?



Thanks

I did check.

I posted the code above, you can run a local sample, you ll encounter the same issue

Cheers

Hi @ipelia‌,



It looks to me like the file object is actually a [`FileEnty`](http://docs.phonegap.com/en/2.1.0/cordova_file_file.md.html#FileEntry) instance, and not the actual data of the file - this is why the contents of the file on GCS are just JSON. I'm no Cordova expert but I haven't been able to find a way to read a filestream of a local file using their API, so you might be constrained to working only with Base64 encoded strings.



If this is correct, then the simplest workaround is going to be to store the base64 string in a collection in your Kinvey backend, then when you want to display the image you can fetch the encoded string, build a data URL from it and use that as the `src` attribute of your `img` tag.



Unless you can find a way to read a filestream from the FileEntry object then I can't think of another way around this problem.

Hello

I agree with you assessment. I was wondering why it seems i am the first one to run into this issue...



Anyway, i may have a workaround, using the file transfer plugin from cordova (https://github.com/apache/cordova-plugin-file-transfer)



The only issue is that it will trigger a HTTP multi-part POST request.

Do you know if there is a way to make it work with the GCS url kinvey returns after the first post to http://baas.kinvey.com/blob/xxxx ?

For now, it seems i can only do a simple http put with the file value in the body....



I dont want to work with base64 as my application is image intensive and having the base64 value stored directly in kinvey slows down the retrieval of images....