diff --git a/README.md b/README.md index a221020f..07100103 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,9 @@ angular-file-upload =================== -Lightweight Angular JS directive to upload files.

**Here is the DEMO page**.
To help development of this module get me a cup of tea or give it a thumbs up at [ngmodules](http://ngmodules.org/modules/angular-file-upload). +Lightweight Angular JS directive to upload files.

**Here is the DEMO page**.
To help development of this module give it a thumbs up at [ngmodules](http://ngmodules.org/modules/angular-file-upload) or get me a cup of tea . +**Migrate to version 3.x** [Change log](https://github.com/danialfarid/angular-file-upload/releases/tag/3.0.0) Table of Content: * [Features](#features) @@ -21,6 +22,7 @@ Table of Content: * [Bower](#bower) * [Yeoman](#yeoman) * [NuGet](#nuget) + * [npm](#npm) * [Questions, Issues and Contribution](#contrib) ## Features @@ -33,41 +35,51 @@ Table of Content: ## Usage ###Sample: +[jsfiddle link](http://jsfiddle.net/wsoLzeur/) ```html -
- Select File:
Select File
- - Drop File:
- Drop Images or PDFs files here -
-
File Farg/Drop is not supported for this browser
-
+
+ watching model: +
Upload ussing model $watch
+
Upload on file change
+ Drop File: +
Drop Images or PDFs files here
+
File Drag/Drop is not supported for this browser
``` JS: ```js -//inject angular file upload directives and service. -angular.module('myApp', ['angularFileUpload']); - -myApp.controller('MyCtrl') = [ '$scope', '$upload', function($scope, $upload) { - $scope.$watch('files', function() { - $scope.upload = $upload.upload({ - url: 'server/upload/url', - data: {myObj: $scope.myModelObj}, - file: $scope.files - }).progress(function(evt) { - console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :'+ evt.config.file.name); - }).success(function(data, status, headers, config) { - console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data); +//inject angular file upload directives and services. +var app = angular.module('fileUpload', ['angularFileUpload']); + +app.controller('MyCtrl', ['$scope', '$upload', function ($scope, $upload) { + $scope.$watch('files', function () { + $scope.upload($scope.files); }); - } -})]; + + $scope.upload = function (files) { + if (files && files.length) { + for (var i = 0; i < files.length; i++) { + var file = files[i]; + $upload.upload({ + url: 'upload/url', + fields: {'username': $scope.username}, + file: file + }).progress(function (evt) { + var progressPercentage = parseInt(100.0 * evt.loaded / evt.total); + console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name); + }).success(function (data, status, headers, config) { + console.log('file ' + config.file.name + 'uploaded. Response: ' + data); + }); + } + } + }; +}]); ``` ### Full reference @@ -81,10 +93,10 @@ myApp.controller('MyCtrl') = [ '$scope', '$upload', function($scope, $upload) { // you can use $scope.$watch('myFiles') instead ng-multiple="true|false" // default false, allows selecting multiple files ng-capture="'camera'|'other'" // allows mobile devices to capture using camera - accept="image/*,*.pdf,*.xml" // see standard HTML file input accept attribute - input-file-...="..." // if you prefix the attr with (data-)input-file- it would - // propagate that property to underlying - // see #462. Use only if the elememt is not input type="file" already + ng-accept="'image/*'" // see standard HTML file input accept attribute + ng-model-rejected="rejFiles" // bind to dropped files that do not match the accept wildcard + input-file-...="..." // if element is not input file the attributes prefix with (data-)input-file- + // will be added to underlying see #462. >Upload ``` #### File drop @@ -93,8 +105,8 @@ myApp.controller('MyCtrl') = [ '$scope', '$upload', function($scope, $upload) { ng-file-drop ng-model="myFiles" // binds the dropped files to the scope model ng-file-change="fileDropped($files, $event, $rejectedFiles)" //called upon files being dropped ng-multiple="true|false" // default false, allows selecting multiple files. - accept="image/*" // wildcard filter for file types allowed for drop (comma separated) - ng-rejected-file-model="rejFiles" // bind to dropped files that do not match the accept wildcard + ng-accept="'.pdf,.jpg'" // wildcard filter for file types allowed for drop (comma separated) + ng-mode-rejected="rejFiles" // bind to dropped files that do not match the accept wildcard allow-dir="true|false" // default true, allow dropping files only for Chrome webkit browser drag-over-class="{accept:'acceptClass', reject:'rejectClass', delay:100}|myDragOverClass| calcDragOverClass($event)" @@ -123,20 +135,19 @@ $upload.upload({ an array of names for multiple files (html5). Default is 'file' */ fileFormDataName: 'myFile' or ['file[0]', 'file[1]', ...], /* - data map. each field will be sent as a form field unless sendDataAsJson is true. - The values are converted to json string unless sendObjectAsJson or transformRequest is specified. */ - data: {myObj: $scope.myModelObj}, - /* - send the whole data object as a json blob with the key "data". Server will recieve a "data" - form field binary of type 'application/json'. default false html5 only */ - sendDataAsJson: true|false, + map of extra form data fields to send along with file. each field will be sent as a form field. + The values are converted to json string or jsob blob depending on 'sendObjectsAsJsonBlob' option. */ + fields: {key: $scope.myValue, ...}, /* - if the value of a form field is an object it will send it as an 'application/json' blob type - rather than json string. default false. */ - sendObjectAsJson: true|false, + if the value of a form field is an object it will be sent as 'application/json' blob + rather than json string, default false. */ + sendObjectsAsJsonBlob: true|false, /* customize how data is added to the formData. See #40#issuecomment-28612000 for sample code. */ formDataAppender: function(formData, key, val){}, - transforRequest: muTransformRequestFn, //called on each field or whole "data" depending on sendDataAsJson + /* + data will be sent as a separate form data field called "data". It will be converted to json string + or jsob blob depending on 'sendObjectsAsJsonBlob' option*/ + data: {}. withCredentials: true|false, ... and all other angular $http() options could be used here. }).progress(function(evt) { @@ -158,6 +169,7 @@ $upload.upload({ */ $upload.http({...}) // See 88#issuecomment-31366487 for sample code. ``` +``` **Upload multiple files**: Only for HTML5 FormData browsers (not IE8-9) if you pass an array of files to `file` option it will upload all of them together in one request. In this case the `fileFormDataName` could be an array of names or a single string. For Rails or depending on your server append square brackets to the end (i.e. `file[]`). Non-html5 browsers due to flash limitation will still upload array of files one by one in a separate request. You should iterate over files and send them one by one if you want cross browser solution. @@ -191,6 +203,7 @@ You can place these two files beside `angular-file-upload-shim(.min).js` on your flashUrl: 'yourcdn.com/js/FileAPI.flash.swf', //forceLoad: true, html5: false //to debug flash in HTML5 browsers + //noContentTimeout: 10000 (see #528) } ... @@ -215,7 +228,7 @@ You can find the sample server code in Java/GAE [here](https://github.com/danial **Rails progress event**: If your server is Rails and Apache you may need to modify server configurations for the server to support upload progress. See [#207](https://github.com/danialfarid/angular-file-upload/issues/207) #### PHP -[Wiki Sample] (https://github.com/danialfarid/angular-file-upload/wiki/PHP-Example) +[Wiki Sample] (https://github.com/danialfarid/angular-file-upload/wiki/PHP-Example) and related issue [only one file in $_FILES when uploading multiple files] (https://github.com/danialfarid/angular-file-upload/issues/475) #### .Net Sample client and server code [demo/C#] (https://github.com/danialfarid/angular-file-upload/tree/master/demo/C%23) provided by [AtomStar](https://github.com/AtomStar) @@ -350,6 +363,11 @@ bower.json #### NuGet Package is also available on NuGet: http://www.nuget.org/packages/angular-file-upload with the help of [Georgios Diamantopoulos](https://github.com/georgiosd) +#### NPM +``` +npm install ng-file-upload +``` + ## Issues & Contribution For questions, bug reports, and feature request please search through existing [issue](https://github.com/danialfarid/angular-file-upload/issues) and if you don't find and answer open a new one [here](https://github.com/danialfarid/angular-file-upload/issues/new). If you need support send me an [email](danial.farid@gmail.com) to set up a session through [HackHands](https://hackhands.com/). You can also contact [me](https://github.com/danialfarid) for any non public concerns.