cordovacordova-pluginscordova-plugin-file

cordova-plugin-file not uploading cdvfile:// path to the server


It is for sure that cordova-plugin-file-transfer is not required any more for transferring files from a local path to a remote server.

I am able to get the cdvfile:// path and even display the same on a DOM but I don't know how to upload it using just the file plugin and not the file transfer.

Here is my code so far. I have used the plugins:

Code:

function clickFirstProfilePhoto(){

    navigator.camera.getPicture(onPhotoDataSuccess, onFail, {
    correctOrientation:true, 
    targetWidth:1024, 
    targetHeight: 1024, 
    destinationType: 
    destinationType.FILE_URI});
}  

Now the success function:

function onPhotoDataSuccess(imageData) {
           
plugins.crop.promise(imageData).then(function success (imageFinal) {
          // Success.
          //alert(imageFinal);
          var fileURI = imageFinal.substr(imageFinal.lastIndexOf('?') + 1);
          //alert(fileURI);
          resolveLocalFileSystemURL(imageFinal, function(entry) {
          $("#picPreviewBox").html('<img src="'+entry.toInternalURL()+'" width="100%" />');

            var t=""
            t=t+'<div class="btn btn-dark btn-sm">Save</div> <div class="btn btn-dark btn-sm">discard</div>';
            $("#buttons_save_discard").html(t);

            
          });


}).catch(function fail (err) {
          // fail
 $.alert("Seems your phone resources are too low to proceed further");
        });

 }

Using entry.toInternalURL() in the DOM is displaying the picture captured and then cropped but then how to upload it to a url on the server along with some parameters?


Solution

  • Alright so I now have the solution. After getting the file path, I am converting the same to base64 and then uploading it to my PHP file on the server to save it as an image, here is the code:

        function onPhotoDataSuccess(imageData) {
                   
        plugins.crop.promise(imageData).then(function success (imageFinal) {
                  // Success.
                  //alert(imageFinal);
                  var fileURI = imageFinal.substr(imageFinal.lastIndexOf('?') + 1);
                  //alert(fileURI);
                  resolveLocalFileSystemURL(imageFinal, function(entry) {
                    
                    $("#loadSignup3Data").html('<img src="'+entry.toInternalURL()+'" id="imagePreviewBox" width="200p" height="200" style="border-radius:50%;" />');
                   // $("#picPreview").modal('show');
                    $("#picOptions").modal('hide');
                    $("#picPreviewBox").html('<img src="'+entry.toInternalURL()+'" id="imagePreviewBox" width="200p" height="200"/>');
                    //$("#picPreview").modal('show');
                   $.confirm({
                    title: 'Please confirm!',
                    content: 'Do you wish to save it as your profile picture?',
                    buttons: {
                        confirm: function () {
                            
                            $("#ultraLoader").show();
                            html2canvas(document.querySelector("#imagePreviewBox")).then(canvas => {
                                var renderedImg = canvas.toDataURL();
                                var id = $("#pictureUploadID").val();
                                var deviceid = device.uuid;
                              
              $.ajax({
              type: "POST",
              url: "https://my_url_which_i_must_not_show/saveFirstProfilePic.php",
              dataType:'json',
              data: {base64Img: renderedImg, id:id, deviceid:deviceid},
              success: function(response){
                 $("#ultraLoader").hide();
                 $.alert("Your profile picture has been saved");
                 location.href = "Dashboard.html?id="+id;
                 }
                });
    
              });
                 
       },cancel: function () {
        navigator.notification.alert('You chose not to save the picture. Please take another picture or select one from your phone gallery');
           $("#ultraLoader").hide();
                     }
                    }
                });