Append image file to form data - Cordova/Angular

After some fiddling around I manage to figure out a pretty simple solution.First I added the cordova file plugin then I use the code below

var fd = new FormData();     window.resolveLocalFileSystemURL(attachment.img, function(fileEntry) {         fileEntry.file(function(file) {             var reader = new FileReader();                 reader.onloadend = function(e) {                      var imgBlob = new Blob([ this.result ], { type: "image/jpeg" } );                      fd.append('attachment', imgBlob);                      fd.append('uuid', attachment.uuid);                      fd.append('userRoleId', 12345);                      console.log(fd);                      //post form call here                 };                 reader.readAsArrayBuffer(file);         }, function(e){$scope.errorHandler(e)});    }, function(e){$scope.errorHandler(e)});

So I'm just creating a form and using FileReader to insert an ArrayBuffer to the Blob object and then append that to the form data. Hopefully this helps someone else looking for an easy way to do this.

You do need to send file content. With the HTML5 FileAPI you need to create a FileReader object.

Some time ago, I developed an application with cordova and I had to read some files, and I made a library called CoFS (first, by Cordova FileSystem, but it's working in some browsers).

It's on beta state, but I use it and works well. You can try to do some like this:

var errHandler = function (err) {   console.log("Error getting picture.", err);};var sendPicture = function (file) {    var fs = new CoFS();    fs.readFile(file, function (err, data) {        if (err) {            return errHandler(err);        }        var fd = new FormData();        fd.append('attachment', new Blob(data));        fd.append('uuid', uuid);        fd.append('userRoleId', userRole);        console.log("Data of file:" + data.toString('base64'));        // Send fd...    });};navigator.camera.getPicture(sendPicture, errHandler);

Sorry my poor english.

Your post was extremly helpful to fix my problem. I'm using Ionic 4 and trying to upload an image using standard http and file client. The key code for reference is here:

return this.file.readAsArrayBuffer(path, file).  then(blob => {    const imgBlob = new Blob([blob], { type: 'image/jpeg' } );    formData.append('image[file]', imgBlob);    return this.http.post(url, formData, headers).subscribe();});