Upload files to AngularJS

I have been writing a module for downloading files for a long time and everything was not perfect. And then I thought, if I do not publish it now, I will never publish it, the ideal is not attainable!

In drawing up the IPA was guided by the principle - as simple as possible. Therefore, first a few thoughts about uploading files:

Download only by POST method. As practice has shown, the file itself is almost never a separate entity and is always tied to some other data in the database, so creating a record along with the file download is a bad idea. That's right: first create a record, then add a file there with a separate request. This approach removes a bunch of issues related to the cancellation of the download, parallel editing of the file description and so on. Also, by creating a record in advance, we can receive in response data on the amount of free space on the server and use them for validation on the client.
')
Download each file as a separate request. On any hosting there is a limit on the maximum size of the POST request (eg, 10 MB). If we load 10 files at the same time, then their total weight should not exceed 10MB. In 99% of cases it is easier to sacrifice performance and not have problems with such restrictions.

No pending downloads. The file should be loaded immediately after the addition (not in 2000, tea, we live), so there are no methods for working with the queue - I chose the file, chose 5 more, deleted one, clicked "send" - it will not. But there will be a cancellation of the download.

It is not necessary to separate the download files by button and dragging. In my case, any area marked with a directive allows you to drag files onto it, and if it is an input with the file type, you can also select it in the explorer. It is very convenient to know that the button can be dragged when 10 files are pulled into the browser, and the designer forgot to highlight the drag box and wondering if they will drag or open in a new window.

Also, the ideal would be to download via the resource's $ save method or the like, but such an extension can be expected from developers for a long time (a crutch on this topic ). While not so deeply climbed, therefore, made a little more clumsy.

Module features

• Download files via xhr and iframe (for older browsers)
• Reading images before uploading to the server (if the browser supports FileReader)
• One directive for the button and dragging area, as mentioned above.
• Built-in validator, which, if desired, you can replace your own.
• Built-in error handling, which can also be replaced with its own.
• General progress for simultaneously downloaded files.

Plans for the future (with your help ;-)

• Limit the number of simultaneously downloaded files
• Reducing pictures on the client
• Webcam
• Finishing downloaders for older browsers
• Refactoring

Connection

Module connection:

angular.module('myApp', ['oi.file']); 

Using directives in an HTML template:

 <!--      --> <input type="file" oi-file="options"> <!--     --> <ul oi-file="options"> <li ng-repeat="item in items"> <img ng-src="{{item.thumb}}"> </li> </ul> 

Configuration in the controller:

 $scope.file = {} // $scope.options = { //     change: function (file) { // file     //   file.$upload('uploader.php', $scope.file) }) } } 

Creating a model element for each file:

 $scope.items = model; $scope.options = { change: function (file) { //      $scope.add(function (i, id) { //   FileReader     file.$preview($scope.items[i]); //   file.$upload('uploader.php' + id, $scope.items[i], {allowedType: ["jpeg", "jpg", "png"]}) .catch(function (data) { //     $scope.del(data.item.id); }) }) } } 

The catch method is available starting from Angulyar 1.2. In older versions, use then(null, function (data) {...}) instead. $preview and $upload return promises. See $ q .

An example of reducing the image on the client:

 file.$preview({}) .then(function (data) { // .     canvas minimize(file._file); // file.$upload('uploader.php', $scope.avatar) }, function (data) { //  .    file.$upload('uploader.php', $scope.avatar) }); 

Sources, demo

Gitkhab , demonstration , sandbox

Analogs

At the same time, nervgh wrote an angular-file-upload with a much richer API, where an event is formed for each one. Pay attention, who will not accept my poverty.