Page 1 of 1

Uploading camera image to a REST service

Posted: Wed Oct 22, 2014 8:43 am
by Giorgio

I need to upload images to an Alfresco based server repository.
This is the HTML code that is working properly on a browser:

It is not so clear for me what type of data is storing the Appery previewImage object and how to post it.
Could you help me to write the correct JS code to upload the camera image?
This is the lastly try that i have done, but it is not working:

// scannedImage is the appery previewImage object
// where i saved the smartphone camera image
var data = new FormData();
var content = localStorage.getItem('scannedImage'); // the image
alert(content);
data.append("image", content);

$.ajax({
url: 'https://myserver.it/myapp/upload?uplo...,
data: data,
cache: false,
contentType: false,
processData: false,
type: 'POST',

}).done(function( msg ) {
alert( "File caricato: " + msg );
}).fail(function(failure){
alert("Errore nel caricamento:" + failure);
});

return false;


Uploading camera image to a REST service

Posted: Wed Oct 22, 2014 9:32 am
by Evgene Karachevtsev

Hello Giorgio,

[quote:]This is the HTML code that is working properly on a browser[/quote]
Could you please repeat your code with tag code, it seems to be corrupted by this site.


Uploading camera image to a REST service

Posted: Wed Oct 22, 2014 10:02 am
by Giorgio

Hops... sorry...
code
<form action="https:&#47;&#47;myserver&#46;it/myapp/upload?uploadFolder=TEMP1" method="post" enctype="multipart/form-data" accept-charset="utf-8">
<input id="File1" type="file" name="file" />
<input id="Submit1" type="submit" value="submit" />
</form>
/code


Uploading camera image to a REST service

Posted: Thu Oct 23, 2014 9:31 am
by Evgene Karachevtsev

Hello Giorgio,

If you get a file from the camera and do not choose the input with file type? You will need to send a file via FileTransfer
http://plugins.cordova.io/#/package/o...


Uploading camera image to a REST service

Posted: Thu Oct 23, 2014 10:43 am
by Giorgio

I'm sorry, i wasn't clear but i was (?!) really confused by image representation on Base64 encoding. In the mean time i read something about Base64 encoding/decoding.

-----------

The situation:
I have set up an appery camera service
I mapped the "imageDataBase64" service response to an image component (previewImage.Asset) and to a storage item (scannedImage). I also mapped "imageURI" service response to a label component (imageURI.Text).
When i shoot:

  • imageURI seems to be forever null

  • scannedImage seems to be a dataURI (base64 encoded image)

    So, it seems i can't have from appery component a "file" to transmit but only that base64 encoded string. Am i correct?

    If so, i only see 2 solutions:
    1 - decoding Base64 string to a binary "file" on the device so we can receive as usual on our Alfresco server (it means js coding on appery app)
    2 - sending the Base64 encoded string to Alfresco server and decoding there to a binary file (means new java or JavaScript code on Alfresco)

    Questions:
    Why the camera service response "imageURI" is forever null?
    Is there a way to locally save the camera image to a local file?
    Really there is not a way to transmit the image as a file without decoding from Base64 to binary?


Uploading camera image to a REST service

Posted: Thu Oct 23, 2014 12:56 pm
by Evgene Karachevtsev

Giorgio,

Of course camera can save the file, not only basse64encoded line. For this in the service settings of the camera in the mapping Before send in the destinationType property please set FILE URI
When there is property FILE URI, the service returns the image file URI
As for filetransfer - please see example here https://getsatisfaction.com/apperyio/...


Uploading camera image to a REST service

Posted: Fri Oct 24, 2014 9:21 am
by Giorgio

Great. It works now.
But some changes where necessary one the code and it MUST be into succesfull event of the camera mapping or you get "file not found error".

Here is the working code for my solution:

code
function win(r) {
alert("Code = " + r&#46;responseCode);
alert("Response = " + r&#46;response);
alert("Sent = " + r&#46;bytesSent);
}

function fail(error) {
var msg = "Errore codice "+ error&#46;code + ": &quot
switch (error&#46;code) {
case FileTransferError&#46;FILE_NOT_FOUND_ERR: msg += "file non trovato&quot break;
case FileTransferError&#46;INVALID_URL_ERR: msg += "URL non valido&quot break;
case FileTransferError&#46;CONNECTION_ERR: msg += "Errore di connessione&quot break;
default: msg += "errore sconosciuto&quot break;
}
msg += "\nSOURCE: "+error&#46;source;
msg += "\nTARGET: "+error&#46;target;
alert ( msg );
}

var fileURI = localStorage&#46;getItem('scannedImageURI');
var options = new FileUploadOptions();
options&#46;fileKey = "file&quot
options&#46;fileName = fileURI&#46;substr(fileURI&#46;lastIndexOf('/') + 1);
options&#46;mimeType = 'image/jpeg';
options&#46;chunkedMode = false;
options&#46;headers = {
Connection: "close"
};

&#47;&#47; setup parameters
var params = {};
params&#46;fullpath =fileURI;
params&#46;name = options&#46;fileName;
options&#46;params = params;

var uri = encodeURI('https:&#47;&#47;myalfrescoserver&#46;it/alfresco/service/mdt/appery/upload?alf_ticket='+localStorage&#46;getItem('ticket'));

var ft = new FileTransfer();
ft&#46;upload(fileURI, uri, win, fail, options,true);

/code

Thank you a lot.


Uploading camera image to a REST service

Posted: Fri Oct 24, 2014 9:28 am
by Evgene Karachevtsev

Giorgio,

Thank you for the update, glad it works!