Forum | Appery.io

I'm getting a base64 formatted image after capturing an image using camera component. How should I store this image in the database?

No external links please.

Tell me how to do mapping
how to convert that image to normal format and store it in files collection?

should I go with rest api to upload it?

Hi Kiran,

Here is solution to upload file to Appery.io DB files collection with base64 content.

1. import DB files upload service.
   Details: http://prntscr.com/5f51tq/direct

2. add upload service to the page. And call datasource "uploadService2".
   Details: http://prntscr.com/5f52b3/direct

3. click on "before send" mapping and link your session token to "X-Appery-Session-Token" header.

   Details: http://prntscr.com/5f52oc/direct

4. Add new JS asset and populate it with following JS code:

   precode

   function b64toBlob(b64Data, contentType, sliceSize) {
   contentType = contentType '';
   sliceSize = sliceSize 512;

   var byteCharacters = atob(b64Data);
   var byteArrays = [];

   for (var offset = 0; offset < byteCharacters&#46;length; offset += sliceSize) {
   var slice = byteCharacters&#46;slice(offset, offset + sliceSize);

   Code: Select all

    var byteNumbers = new Array(slice.length); 
    for (var i = 0; i < slice&#46;length; i++) { 
        byteNumbers[i] = slice&#46;charCodeAt(i); 
    } 
   
    var byteArray = new Uint8Array(byteNumbers); 
   
    byteArrays&#46;push(byteArray); 

}

 var blob = new Blob(byteArrays, {type: contentType}); 
 return blob; 

}

/code/pre

Details: http://prntscr.com/5f530x/direct

1. Add button to the page and add JS "click" event handler with following JS code:

   precode

   &#47;&#47;Here you can set file name&#46;
   var fileName = "myFile&#46;png&quot

   &#47;&#47;Here you can use your base64 content&#46; Note: there is no "data:image/jpeg;base64," part&#46;
   var base64Content = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4&#47;&#47;8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
   var fileBlob = b64toBlob(base64Content, "image/png");

   var data = new FormData();

   data&#46;append(fileName, fileBlob);

   var onSuccess = function(data){
   alert(JSON&#46;stringify(data));
   };

   &#47;&#47;Where "uploadService2" is your updload service datasource name&#46;
   uploadService2&#46;execute({
   'allowDataModification': false,
   'processData': false,
   'body': {data: data},
   'cache': false,
   'success': onSuccess
   });

   /code/pre

   Now on click this button you will upload file and alert with result will appear.
   You can get file url from result and download this file.

   Regards.

Thanks a lot
it's working like a charm

The above code was unable to convert jpeg image

Hello Kiran,

Could you please clarify do you get any errors?

Yes,
I'm trying to send the base64 content to the base64toblob function through onsuccess event of the camera intent. I'm splitting the base64 value into two parts and sending the second half to the base64toblob function. But still the image is not uploaded. no errors no storage. nothing happening.

Hi Kiran,

Please use "console.log(base64Content)" to log your base64 content.

Also note: your base64 string should have mime type like "image/png" so if you have it in this string - you should remove it.

Regards.

"data:image/jpeg;base64," I removed this part but that function base64toBlob is still can't convert the image to blob

Hi Kiran,

as i can see you removed this part:

pre

"data:image/jpeg;base64,"

/pre

But you need to remove following:

pre

"data:image/jpeg;base64,/"

/pre

Regards.