So we've developed an app with Cordova, and now I need to upload an image to a web service from a third party. I installed the cordova-plugin-camera and can get an image from the Gallery or Camera, and insert the preview into the DOM. But the image in src="" comes in a blob type (blob: // localhost: 4g5713f4g234g5a234).
Here is a print of it running, for now in the emulator ( link )
Is there a method, way, etc. so I can get to get the real path of it and do so I can upload?
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
/*
@cordova-plugin-camera
//cordova.apache.org/docs/en/latest/reference/cordova-plugin-camera/index.html
*/
function setOptions( srcType ) {
var options = {
// Some common settings are 20, 50, and 100
quality: 70,
destinationType: Camera.DestinationType.FILE_URI,
// In this app, dynamically set the picture source, Camera or photo gallery
sourceType: srcType,
encodingType: Camera.EncodingType.JPEG,
mediaType: Camera.MediaType.PICTURE,
allowEdit: true,
correctOrientation: true //Corrects Android orientation quirks
}
return options;
}
function createNewFileEntry( imgUri ){
window.resolveLocalFileSystemURL(cordova.file.cacheDirectory, function success( dirEntry ){
// JPEG file
dirEntry.getFile("tempFile.jpeg", { create: true, exclusive: false },function( fileEntry ){
// Do something with it, like write to it, upload it, etc.
}, onErrorCreateFile);
}, onErrorResolveUrl);
}
function openFilePicker( selection ) {
var srcType = Camera.PictureSourceType.SAVEDPHOTOALBUM;
var options = setOptions(srcType);
var func = createNewFileEntry;
navigator.camera.getPicture(function cameraSuccess( imageUri ){
func(imageUri);
displayImage(imageUri);
},function cameraError( error ){
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
function openCamera( selection ){
var srcType = Camera.PictureSourceType.CAMERA;
var options = setOptions(srcType);
var func = createNewFileEntry;
navigator.camera.getPicture(function cameraSuccess( imageUri ){
func(imageUri);
displayImage(imageUri);
}, function cameraError(error) {
console.debug("Unable to obtain picture: " + error, "app");
}, options);
}
//mostra o preview
function displayImage( imgUri ) {
$('#js-previewFile').attr('src',imgUri).parent().addClass('is-visible');
}
/*
actions
*/
$('#js-openFilePicker').on('click',function(){
openFilePicker();
});
$('#js-openCamera').on('click',function(){
openCamera();
});
/*
REQUEST
esse é o código que me passaram, pra mim mandar o arquivo por ajax
*/
var form = new FormData();
form.append('file', file, 'file');
$.ajax({
async : true,
crossDomain : true,
url : '...',
method : 'POST',
headers :{
'authorization': '....',
'cache-control': 'no-cache',
'postman-token': '...'
},
processData : false,
contentType : false,
mimeType : 'multipart/form-data',
data: form
}).done(function(r){
console.log(r);
}).fail(function(r){
console.log(r);
});
}
Can I get this Blog via Formdata? Or do I have to change before? Can you understand what I need?