How to upload a file with Uploadcare and Cordova?

Q: I’m building a hybrid app using HTML5 and Cordova. I need the ability to choose between taking a photo using the camera or choose an existing one from the camera roll.
Also after selection, I need to crop the image Is it possible with upload care?

A: Cordova has two ways of files handling. First is usual HTML 5 file handling. You may embed the Uploadcare widget in your app like any other web page. If you don’t need widget, you can use regular <input type="file"> element and upload files to Uploadcare using filesFrom('object', input.files) method of JS API of the widget. Regular input allows choosing files from camera roll and taking new photos.

The second way is to use the Cordova API. Cordova allows you to customize things, but Cordova files not compatible with browser files and our library can’t handle Cordova files. So you will need to implement uploading Cordova files to our server (using Upload API and then construct Uploadcare file using fileFrom('ready', {..fileInfo..})

window.resolveLocalFileSystemURL(audioData[0].localURL,function(fileEntry){
fileEntry.file(function(file) {
    uploadcare.fileFrom('object', file);
    ...
    });
});

In both cases, you’ll be able to open the crop interface of the widget as soon as you get an Uploadcare file instance.

If you are using AngularJS in your app, you might also want to try using ngCordova’s cordovaFileTransfer plugin:

var fileName = filePath.split('/').pop();
var uploadcareOptions = {
    fileKey: "file",
    fileName: fileName,
    chunkedMode: false,
    mimeType: 'audio/mp4',
    params: {
        "UPLOADCARE_PUB_KEY": "upload-care-public-key",
        "UPLOADCARE_STORE": 'auto',
        fileName: fileName
    }
};
return $cordovaFileTransfer.upload('https://upload.uploadcare.com/base/', filePath, 
uploadcareOptions)