upload file to RESTful service in angularjs

Question

i try to make angular CRUD app that is a bit like "dropbox". So, it must have file and folder hosting with sharing and access functionality. I'm stuck on a question how to upload image and video files? I used File API (FileReader, Blob) to make preview of files on the client side but i dont have idea how to POST this type of data to server.

Use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) — aarosil, Nov 08 '14 at 20:22
So, I have to create FormData object and then insert data in it and send the FormData object to my API? — Oleh Kuchuk, Nov 11 '14 at 11:29
Exactly, I can post a more detail answer with sample code if you'd like. — aarosil, Nov 11 '14 at 21:50

score 7 · Accepted Answer · answered Nov 14 '14 at 07:55

Something like this should work well to send as multipart/form-data request to backend API:

var file = ... // get from file input;
var backendUrl = ...
var fd = new FormData();

fd.append('myFile', file, 'filename.ext');

$http.post(backendUrl, fd, {
    // this cancels AngularJS normal serialization of request
    transformRequest: angular.identity,
    // this lets browser set `Content-Type: multipart/form-data` 
    // header and proper data boundary
    headers: {'Content-Type': undefined}
})

.success(function(){
    //file was uploaded
})

.error(function(){
    //something went wrong 
});

See here for reference:

FormData API Doc

Using FormData Objects (MDN)

multipart-formdata file upload with AngularJS

How do you fill the "file" varialble? I mena, how to bind it to the input control? — Nemus, Jul 20 '16 at 12:30

score 0 · Answer 2 · answered Aug 05 '15 at 08:30

You can upload file using ngFileUpload or angularFileUpload directives.

In case of angularFileUpload, you use .upload in controller and in case of ngFileUpload, you use .http

Also, you can also use application/x-www-form-urlencoded content type instead of multipart provided your file is not huge. In case of application/x-www-form-urlencoded, you can just receive the value in rest webservice as normal InputStream thereby requiring no need of marshalling of multipart data.

You may refer the below for the possible ways to upload file using angular js and rest web service:

http://technoguider.com/2015/08/file-upload-using-angular-js-and-rest-web-service/

upload file to RESTful service in angularjs

2 Answers2