Upload photo using Cordova FileTransfer

[vijay6640949]

Hi,

I am trying to upload photo to the Files database, but I get a failure in ft.upload() in the code below. The error code is 3. I can't seem to find any issue with the code below. Any ideas?

It will be good to have a tutorial that shows how to upload a picture taken with the device camera to the Files database.

function takePhoto() {
// Retrieve image file location from specified source
navigator.camera.getPicture(uploadPhoto,

Code: Select all

                             function(message) { 
                                 alert('get picture failed'); 
                             }, { 
                                 quality: 50, 
                                 destinationType: navigator.camera.DestinationType.FILE_URI, 
                                 sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY 
                             }); 

}

function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";

Code: Select all

 var params = {}; 
 params.value1 = "X-Appery-Database-Id=..."; 
 params.value2 = "X-Appery-Session-Token=" + localStorage.getItem("userSessionToken"); 
 params.value3 = "Content-Type=application/jpeg"; 

 options.params = params; 

 alert("Uploading photo...."); 

 var ft = new FileTransfer(); 
 var url = "[url=https://api.appery.io/rest/1/db/files/test.jpeg]https://api.appery.io/rest/1/db/files...[/url]" 

 ft.upload(imageURI, encodeURI(url), win, fail, options); // this fails with error code 3. 

}

function win(r) {
console.log("Code = " + r.responseCode);
console.log("Response = " + r.response);
alert("Sent = " + r.bytesSent);
}

function fail(error) {
alert("An error has occurred: Code = " + error.code);
alert("upload error source " + error.source);
alert("upload error target " + error.target);
}

Thanks!
Vijay

[vijay6640949]

I tried not to use params and instead updated the url to...

function uploadPhoto(imageURI) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
options.mimeType = "image/jpeg";

Code: Select all

 var params = {}; 

 options.params = params; 

 alert("Uploading photo...."); 

 var ft = new FileTransfer(); 
 var url = "[url=https://api.appery.io/rest/1/db/files/test.jpeg?X-Appery-Database-Id=validid]https://api.appery.io/rest/1/db/files...[/url]..." 
 url += "&X-Appery-Session-Token=" + localStorage.getItem("userSessionToken"); 
 url += "&Content-Type=image/jpeg"; 

 ft.upload(imageURI, encodeURI(url), win, fail, options); 

}

Now I get
error code 1,
error source like "conent://media/external/images/media/12342
error target is the url i used above.

[Maryna Brodina]

Hello! Send X-Appery-Database-Id and X-Appery-Session-Token as header parameters, see example here http://cordova.apache.org/docs/en/3.0...

[vijay6640949]

Hi,

In my code, I am sending the parameters as part of header.

var url = "https://api.appery.io/rest/1/db/files......"
url += "&X-Appery-Session-Token=" + localStorage.getItem("userSessionToken");
url += "&Content-Type=image/jpeg";

[vijay6640949]

ok, I tried what you suggested...still no luck.

var headers = {
"X-Appery-Database-Id": '...',
"X-Appery-Session-Token": "'" + localStorage.getItem("userSessionToken") + "'",
"Content-Type": "image/jpeg"
};
options.headers = headers;

Is it possible for Appery to provide a tutorial for best way to upload a photo to the files database.

[Maryna Brodina]

Hello! Sorry for delay, working on it.

[Maryna Brodina]

1) Add Camera service to project
2) Add Camera Service on screen
3) In Camera service settings specify destinationType = File URI
4) Invoke service on some event
5) On Camera service success event run the following codeprefunction win(r) {
alert("Code = " + r.responseCode);
alert("Response = " + r.response);
alert("Sent = " + r.bytesSent);
}

function fail(error) {
alert("An error has occurred: Code = " + error.code);
alert("upload error source " + error.source);
alert("upload error target " + error.target);
}

var fileURI = data.imageURI;
var headers = {
'X-Appery-Database-Id': 'XXXXXXXXXXXXXXXX',
'X-Appery-Session-Token': localStorage.getItem("userSessionToken")
};
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = 'image/jpeg';
options.headers = headers;
var uri = encodeURI("https://api.appery.io/rest/1/db/files/" + options.fileName);
var ft = new FileTransfer();
ft.upload(fileURI, uri, win, fail, options);/prePlease note to save file to DB you need session token. In code we suppose you have session token saved in localStorage userSessionToken

[rodzeus]

Hi Maryna, I am also wondering how to take a video with the camera component and then save it to the DB collection. While responding to another Appery user, above, you said "3) In Camera service settings specify destinationType = File URI "

However, it is grayed out...I cannot change the destination Type. And currently it says String. How do I change this?

Basically, I want to take a 30 second video and upload it to the DB in a logged-in-user's session.

[Maryna Brodina]

Hello!

First you need to add service on screen, after that you'll be able to modify service settings.

[rodzeus]

Hi Maryna, How do I do this? Is there a step-by-step tutorial or video that explains the process? The camera component response has 3 parameters that I can map - and on the right hand side, several. So how do I map it?

Please see image attached. Thanks.