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

Question

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:

• cordova-plugin-camera
• cordova-plugin-file
• cordova-plugin-crop

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?

Answer 1

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();
                 }
                }
            });