Upload file to RESTful service in angularjs

Question

I am trying to make an angular CRUD application a bit like a dropbox. Thus, it must have a file and folder hosting with sharing and access functions. I am stuck on the question of how to upload image and video files? I used the File API (FileReader, Blob) to preview files on the client side, but I have no idea how to send this data type to the server.

Answer 1

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

 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:

Formats API Document

Using FormData Objects (MDN)

multipart-formdata file upload using AngularJS

Answer 2

You can upload a file using the ngFileUpload or angularFileUpload directives.

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

Alternatively, you can also use the content type application / x-www-form-urlencoded instead of multipart if your file is small. In the case of the / x -www-form-urlencoded application, you can simply get the value in the rest web service as a normal InputStream, thereby not requiring sorting of multi-page data.

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

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