uploading the captured image using camera component

Tue Apr 28, 2015 11:40 am

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?

Wed Apr 29, 2015 12:01 am

Hi Kiran,

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

import DB files upload service.
Details: http://prntscr.com/5f51tq/direct
add upload service to the page. And call datasource "uploadService2".
Details: http://prntscr.com/5f52b3/direct
click on "before send" mapping and link your session token to "X-Appery-Session-Token" header.

Details: http://prntscr.com/5f52oc/direct
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.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
Code: Select all
```
 var byteNumbers = new Array(slice&#46;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); 
```

}

Code: Select all

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

}

/code/pre

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

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

precode

//Here you can set file name.
var fileName = "myFile.png&quot

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

var data = new FormData();

data.append(fileName, fileBlob);

var onSuccess = function(data){
alert(JSON.stringify(data));
};

//Where "uploadService2" is your updload service datasource name.
uploadService2.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.

Thu Apr 30, 2015 12:06 pm

Thanks a lot
it's working like a charm

Fri May 08, 2015 7:51 am

The above code was unable to convert jpeg image

Sun May 10, 2015 4:29 pm

Hello Kiran,

Could you please clarify do you get any errors?

Mon May 11, 2015 5:50 am

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.

Tue May 12, 2015 2:56 am

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.

Tue May 12, 2015 5:21 am

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

Fri May 15, 2015 1:45 am

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.