Get image path and not blob://

Asked

Viewed 301 times

0

So, we developed an app with Cordova, and now I need to upload an image to a third party webservice. I installed the Cordova-plugin-camera and can get an image from the Gallery or Camera, and insert the preview into the DOM. Only the image in src="" comes in a blob type(blob://localhost:4g5713f4g234g5a234).

Here’s a print of it running, for now on the emulator(https://prnt.sc/gl67f3)

There is a method, way, etc for me to get to take her real path 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 send this blog by formdata? Or do I have to transform before? You understand what I need?

  • Here’s a print of the code running in Ripple ( http://prntscr.com/gl67f3 )

  • Sorry, now that I saw that I was at Stackpt (-1 deserved)

  • I voted to reopen the question. ps: when the question was written in a wrong language I do not think it necessary to negative, although it is a reinforcement to say that there is something wrong, just close or help the author of the question translating it :) ... +1 to the question

  • No charitable soul knows how to help me? I already "can" get the file from the gallery/ camera, and I need to do a POST with AJAX passing this image, to update a person’s profile.

  • @romuloinnocencio Did you solve it? If not, I can help you

  • So, using Filetransfer, basically it works if I send Imguri straight... I got it. var ft = new FileTransfer();
 ft.upload(fileURL,serviceURL,function( r ){
 $wp.find('.loading').fadeOut('fast',function(){ $(this).remove(); });


  • So, using Filetransfer, basically it works if I send Imguri straight... I got it. 
var options = new FileUploadOptions();
 options.fileKey = 'fotoperfil';
 options.httpMethod = 'POST';

var ft = new FileTransfer();
 ft.upload(fileURL,serviceURL,function( r ){
 //console.log('deu');
 });
 In fileURL, I went right through Imguri(blob), but limited the ratio in options with targetWidth/Height (otherwise I would give {code:1}, file not found ). I wanted to do with ajax, but the plugin-file-transfer already solves the problem.

Show 2 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.