Why sending a file is so difficult using angular? [closed]

Question

I have to send a file (very large file) to a server. I'm studying what options I have and how to do it. I'm using angular + express + nodejs.

If I use a simple form, I could catch the file on the server using multer with no problem. Is very simple. The html is just a form, in which I specify the target etc. and everything works. The nodejs code is also very simple and straight forward.

As soon as I try to use angular, everything becomes incredible complicated. Meaning, I have to use a directive, and still have trouble with the server. As I said I'm using multer, which requires the data to be "multipart/form-data", and I get from the server "Error: Multipart: Boundary not found"

There are many modules to load files in angular. Which shows that is a recurrent problem with more than one solution. Now, I don't want to post code because for that I asked at Stack Overflow. My question is more subtle:

Why what can be done with a simple form, get's so complicated in angular? I don't mean it in a bad way. I mean it in a 'I want to understand' way.

Answer 1

Angular is for Single Page Applications, forms are sent using AJAX to avoid the page to be reloaded. For sending multipart forms with AJAX, your browser need to support FormData(IE10+): http://caniuse.com/#search=FormData

https://developer.mozilla.org/en-US/docs/Web/API/FormData

ngModel doesn't work with input[type="file"], so you have to create your own directive. Your own directive should be simple: on change, update a File object on your scope.

When sending your form, create a FormData object and add your file(s) to it using FormData.set or FormData.append. You can send your FormData with $http or $resource, and you are relying on the browser for setting the content-type and boundary.

var formData = new FormData();
formData.append('file', $scope.file);
$http.post('yourUrl', formData, {
   transformRequest: angular.identity,
   headers: {'Content-Type': undefined}
}).then(function () {
   // ...
});

angular.identity prevents Angular to do anything on our data (like serializing it).

I recommend this article: https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs