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