Append image file to form data - Cordova/Angular

Question

I am using Anuglar, Ionic and Cordova in my current project, and I'm trying to POST FormData containing an image file to my server. Right now I'm using the cordova camera plugin to return a file path to the image on the device (ex: file://path/to/img). Once I have the file path I want to append the image file to a FormData object using the images file path. Here is my code right now.

var fd = new FormData();

fd.append('attachment', file);
fd.append('uuid', uuid);
fd.append('userRoleId', userRole);

The code above works when appending a file that is taken from an <input type='file'> but doesn't work when just given the file path on the device.

Basically the FormData is showing like this right now:

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; 

file://path/to/img

and I want it to look like this

------WebKitFormBoundaryasdf
Content-Disposition: form-data; name="attachment"; filename="jesus-quintana.jpg"
Content-Type: image/jpeg

I found many different ways to upload the image using cordova FileTransfer and by converting the image to a base64 and then uploading it. But I couldn't find any simple ways of just grabbing the file by using the path and posting it within a form. I'm not very familiar with the File Api so any help would be appreciated

Joe Komputer · Accepted Answer · 2015-03-18 21:55:51Z

41

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.

answered Mar 18, 2015 at 21:55

Joe Komputer

1,3453 gold badges12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Dave Rael Over a year ago

Beautiful. Nicely done, @Joe Komputer. This is exactly what I sought.

Eric Hodonsky Over a year ago

I'd been avoiding doing this because I was unsure how my server would handle the blob... but apparently it was no issue. Thanks!!

Amr.Ayoub Over a year ago

Hello , can you share the html code along with js. Thanks :)

Joe Komputer Over a year ago

It's been awhile since I wrote this code but I believe attachment.img was a string with the value of the local images path. So something like "file://your/images/path". This link may help here @KiranReddy

tonejac Over a year ago

This answer rocked! Nice work. In my case I didn't even need the FormData(), only needed the FileReader() and used the Blob() to upload the image to my server. stackoverflow.com/questions/47003749/…

|

Exos · Accepted Answer · 2015-03-04 06:01:28Z

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.

user11794 · Accepted Answer · 2019-07-30 14:56:51Z

0

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

Hope it helps someone out there as it did for me.

answered Jul 30, 2019 at 14:56

user11794

11 bronze badge

Collectives™ on Stack Overflow

Append image file to form data - Cordova/Angular

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related