Convert File URL to Path and send to file reader in javascript

Question

I am using cordova camera plugin for capture the picture from gallery has below my code its working,Now i need to pass the URl to file reader,when i pass it to file reader it give me error Error in success callback: Camera1358190195 = TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob' even for 'readAsBinarystring' not working need help below is my code.

 //Cordova Camera Plugin 

function PicfromGallery() {
var pictureSource = navigator.camera.PictureSourceType;
var destinationType = navigator.camera.DestinationType;
navigator.camera.getPicture(onSuccessEdituserProfileGallery, onFailEditProfileGallery, {
    quality: 50,
    sourceType: pictureSource.PHOTOLIBRARY,
    destinationType: destinationType.FILE_URI,
    targetWidth: 100,
    targetHeight: 100

});
}

function onSuccessEdituserProfileGallery(imageData) {
var smallImage
smallImage = document.getElementById('userProfileImage');
//EditUserProfileImageFilename(imageData);
smallImage.src = imageData;
var userPic = document.getElementById('EdituserProfileImage');
var file = new File(imageData);
OnFileImageEntry(file)
}

//File API
function OnFileImageEntry(file) {
var reader = new FileReader();
reader.onload = function (event) {
    var image = event.target.result;
    image.onload = function () {
       // need to get result
  }
  };
reader.readAsBinaryString(file);
 }

@MahmoudFarahat I got the same problem and post my answer below. Give it a try. :P — JavaNoScript, Apr 02 '17 at 13:35

score 0 · Answer 1 · edited May 23 '17 at 12:17

I found a solution in cordova-plugin-camera document.

Instead of creating a File object by new File(imageData), you may resolve the FileURI with window.resolveLocalFileSystemURL().

//Cordova Camera Plugin

function PicfromGallery() {
    var pictureSource = navigator.camera.PictureSourceType;
    var destinationType = navigator.camera.DestinationType;
    navigator.camera.getPicture(onSuccessEdituserProfileGallery, onFailEditProfileGallery, {
        quality: 50,
        sourceType: pictureSource.PHOTOLIBRARY,
        destinationType: destinationType.FILE_URI,
        targetWidth: 100,
        targetHeight: 100

    });
}

function onSuccessEdituserProfileGallery(imageData) {
    var smallImage;
    smallImage = document.getElementById('userProfileImage');
    smallImage.src = imageData;
    var userPic = document.getElementById('EdituserProfileImage');
    // var file = new File(imageData);
    OnFileImageEntry(imageData);  // Use the fileURI directly.
}

//File API
function OnFileImageEntry(file) {
    window.resolveLocalFileSystemURL(i, function (fileEntry) {
        fileEntry.file(function (file) {
            console.log('Now I have a file obj.');
            var reader = new FileReader();
            reader.onloadend = function (event) {
                var image = event.target.result;
                // Do something with the image
            };
            reader.readAsArrayBuffer(file);

        }, function (e) {
            console.log('Error getting file', e);
        });
    }, function (e) {
        console.log('Error resolving fs url', e);
    });
}

BTW, FileReader.readAsBinaryString() is deprecated. Don't use it! It's no longer in the W3C File API working draft.

And Mozilla still implements readAsBinaryString() and describes it in MDN FileApi documentation.

More info please read this: An answer of fileReader.readAsBinaryString to upload files.

Convert File URL to Path and send to file reader in javascript

1 Answers1