Skip to content

Commit

Permalink
Fixed #710 #759
Browse files Browse the repository at this point in the history
  • Loading branch information
Danial Farid authored and Danial Farid committed May 25, 2015
2 parents 032bc8f + d35dae9 commit b3a3905
Show file tree
Hide file tree
Showing 13 changed files with 89 additions and 58 deletions.
38 changes: 20 additions & 18 deletions README.md
View file
Expand Up @@ -40,12 +40,12 @@ Table of Content:
Drop File:
<div ngf-drop ng-model="files" class="drop-box"
ngf-drag-over-class="dragover" ngf-multiple="true" ngf-allow-dir="true"
ngf-accept="'.jpg,.png,.pdf'">Drop Images or PDFs files here</div>
ngf-accept="'image/*,application/pdf'">Drop Images or PDFs files here</div>
<div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>

Image thumbnail: <img ngf-src="files[0]" ngf-default-src="/thumb.jpg" ngf-accept="image/*">
Audio preview: <audio controls ngf-src="files[0]" ngf-accept="audio/*"></audio>
Video preview: <video controls ngf-src="files[0]" ngf-accept="video/*"></video>
Image thumbnail: <img ngf-src="files[0]" ngf-default-src="'/thumb.jpg'" ngf-accept="'image/*'">
Audio preview: <audio controls ngf-src="files[0]" ngf-accept="'audio/*'"></audio>
Video preview: <video controls ngf-src="files[0]" ngf-accept="'video/*'"></video>
</div>
```
JS:
Expand Down Expand Up @@ -88,10 +88,10 @@ app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
ng-model-rejected="rejFiles" // bind to dropped files that do not match the accept wildcard
ngf-change="fileSelected($files, $event)" // will be called upon files being selected
// you can use $scope.$watch('myFiles') instead
ngf-multiple="true|false" // default false, allows selecting multiple files
ngf-capture="'camera'|'other'" // allows mobile devices to capture using camera
ngf-multiple="true" or "false" // default false, allows selecting multiple files
ngf-capture="'camera'" or "'other'" // allows mobile devices to capture using camera
accept="image/*" // see standard HTML file input accept attribute
ngf-accept="'image/*'|validate($file)" // function or comma separated wildcard to filter files allowed
ngf-accept="'image/*'" or "validate($file)" // function or comma separated wildcard to filter files allowed
ngf-min-size='10' // minimum acceptable file size in bytes
ngf-max-size='10' // maximum acceptable file size in bytes
>Upload</button>
Expand All @@ -102,18 +102,19 @@ app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
ngf-drop ng-model="myFiles" // binds the dropped files to the scope model
ng-model-rejected="rejFiles" // bind to dropped files that do not match the accept wildcard
ngf-change="fileDropped($files, $event, $rejectedFiles)" //called upon files being dropped
ngf-multiple="true|false" // default false, allows selecting multiple files.
ngf-accept="'.pdf,.jpg'|validate($file)" // function or comma separated wildcard to filter files allowed
ngf-allow-dir="true|false" // default true, allow dropping files only for Chrome webkit browser
ngf-drag-over-class="{accept:'acceptClass', reject:'rejectClass', delay:100}|myDragOverClass|
calcDragOverClass($event)"
ngf-multiple="true" or "false" // default false, allows selecting multiple files.
ngf-accept="'.pdf,.jpg'" or "validate($file)" // function or comma separated wildcard to filter files allowed
ngf-allow-dir="true" or "false" // default true, allow dropping files only for Chrome webkit browser
ngf-drag-over-class="{accept:'acceptClass', reject:'rejectClass', delay:100}" or "myDragOverClass" or
"calcDragOverClass($event)"
// drag over css class behaviour. could be a string, a function returning class name
// or a json object {accept: 'c1', reject: 'c2', delay:10}. default "dragover"
// reject class only works in Chrome. Validation only on file type.
// or a json object {accept: 'c1', reject: 'c2', delay:10}. default "dragover".
// accept/reject class only works in Chrome and on the file mime type so ngf-accept
// needs to check the file mime type for it to work.
ngf-drop-available="dropSupported" // set the value of scope model to true or false based on file
// drag&drop support for this browser
ngf-stop-propagation="true|false" // default false, whether to propagate drag/drop events.
ngf-hide-on-drop-not-available="true|false" // default false, hides element if file drag&drop is not supported
ngf-stop-propagation="true" or "false" // default false, whether to propagate drag/drop events.
ngf-hide-on-drop-not-available="true" or "false" // default false, hides element if file drag&drop is not supported
ngf-min-size='10' // minimum acceptable file size in bytes
ngf-max-size='10' // maximum acceptable file size in bytes
>
Expand All @@ -126,7 +127,8 @@ Drop files here
#### File preview
```html
<img|audio|video ngf-src="file" //To preview the selected file, sets src attribute to the file's data url.
ngf-accept="'.pdf,.jpg'|validate($file)" // function or comma separated wildcard to filter files allowed
ngf-default-src="'placeholder.jpg'" // default src in case no file is available
ngf-accept="'.pdf,.jpg'" or "validate($file)" // function or comma separated wildcard to filter files allowed
ngf-min-size='10' // minimum acceptable file size in bytes
ngf-max-size='10' // maximum acceptable file size in bytes
>
Expand Down Expand Up @@ -198,7 +200,7 @@ This is equivalent to angular $http() but allow you to listen to the progress ev
**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/ng-file-upload/issues/207)
**drag and drop styling**: For file drag and drop, `ngf-drag-over-class` could be used to style the drop zone. It can be a function that returns a class name based on the $event. Default is "dragover" string.
Only in chrome It could be a json object `{accept: 'a', 'reject': 'r', delay: 10}` that specify the class name for the accepted or rejected drag overs. The validation `ng-accept` could only check the file type since that is the only property of the file that is reported by the browser on drag. So you cannot validate the file size or name on drag. There is also some limitation on some file types which are not reported by Chrome.
Only in chrome It could be a json object `{accept: 'a', 'reject': 'r', delay: 10}` that specify the class name for the accepted or rejected drag overs. The validation `ngf-accept` could only check the file type since that is the only property of the file that is reported by the browser on drag. So you cannot validate the file size or name on drag. There is also some limitation on some file types which are not reported by Chrome.
`delay` param is there to fix css3 transition issues from dragging over/out/over [#277](https://github.com/danialfarid/angular-file-upload/issues/277).
##<a name="old_browsers"></a> Old browsers
Expand Down
2 changes: 1 addition & 1 deletion demo/war/js/FileAPI.min.js
View file

Large diffs are not rendered by default.

29 changes: 19 additions & 10 deletions demo/war/js/ng-file-upload-all.js
View file
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload/drop directive and service with progress and abort
* @author Danial <danial.farid@gmail.com>
* @version 4.2.1
* @version 4.2.2
*/
(function () {

Expand All @@ -28,7 +28,7 @@ if (window.XMLHttpRequest && !window.XMLHttpRequest.__isFileAPIShim) {

var ngFileUpload = angular.module('ngFileUpload', []);

ngFileUpload.version = '4.2.1';
ngFileUpload.version = '4.2.2';
ngFileUpload.service('Upload', ['$http', '$q', '$timeout', function ($http, $q, $timeout) {
function sendHttp(config) {
config.method = config.method || 'POST';
Expand Down Expand Up @@ -274,34 +274,43 @@ function linkFileSelect(scope, elem, attr, ngModel, $parse, $timeout, $compile)
}

function clickHandler(evt) {
evt.preventDefault();
if (evt != null) {
evt.preventDefault();
evt.stopPropagation();
}
var fileElem = createFileInput(evt);
if (fileElem) {
fileElem.bind('change', changeFn);
resetModel(evt);

function clickAndAssign() {
fileElem[0].click();
function clickAndAssign(evt) {
if (evt != null) {
fileElem[0].click();
}
if (isInputTypeFile()) {
elem.bind('click touchend', clickHandler);
evt.preventDefault()
}
}

// fix for android native browser
if (navigator.userAgent.toLowerCase().match(/android/)) {
setTimeout(function() {
clickAndAssign();
clickAndAssign(evt);
}, 0);
} else {
clickAndAssign();
clickAndAssign(evt);
}
}
return false;
}

if (window.FileAPI && window.FileAPI.ngfFixIE) {
window.FileAPI.ngfFixIE(elem, createFileInput, bindAttrToFileInput, changeFn, resetModel);
} else {
elem.bind('click touchend', clickHandler);
clickHandler();
if (!isInputTypeFile()) {
elem.bind('click touchend', clickHandler);
}
}
}

Expand Down Expand Up @@ -616,7 +625,7 @@ function globStringToRegex(str) {
* AngularJS file upload/drop directive and service with progress and abort
* FileAPI Flash shim for old browsers not supporting FormData
* @author Danial <danial.farid@gmail.com>
* @version 4.2.1
* @version 4.2.2
*/

(function() {
Expand Down
4 changes: 3 additions & 1 deletion demo/war/js/ng-file-upload.js
View file
Expand Up @@ -308,7 +308,9 @@ function linkFileSelect(scope, elem, attr, ngModel, $parse, $timeout, $compile)
window.FileAPI.ngfFixIE(elem, createFileInput, bindAttrToFileInput, changeFn, resetModel);
} else {
clickHandler();
elem.bind('click touchend', clickHandler);
if (!isInputTypeFile()) {
elem.bind('click touchend', clickHandler);
}
}
}

Expand Down
2 changes: 1 addition & 1 deletion dist/FileAPI.min.js
View file

Large diffs are not rendered by default.

29 changes: 19 additions & 10 deletions dist/ng-file-upload-all.js
View file
@@ -1,7 +1,7 @@
/**!
* AngularJS file upload/drop directive and service with progress and abort
* @author Danial <danial.farid@gmail.com>
* @version 4.2.1
* @version 4.2.2
*/
(function () {

Expand All @@ -28,7 +28,7 @@ if (window.XMLHttpRequest && !window.XMLHttpRequest.__isFileAPIShim) {

var ngFileUpload = angular.module('ngFileUpload', []);

ngFileUpload.version = '4.2.1';
ngFileUpload.version = '4.2.2';
ngFileUpload.service('Upload', ['$http', '$q', '$timeout', function ($http, $q, $timeout) {
function sendHttp(config) {
config.method = config.method || 'POST';
Expand Down Expand Up @@ -274,34 +274,43 @@ function linkFileSelect(scope, elem, attr, ngModel, $parse, $timeout, $compile)
}

function clickHandler(evt) {
evt.preventDefault();
if (evt != null) {
evt.preventDefault();
evt.stopPropagation();
}
var fileElem = createFileInput(evt);
if (fileElem) {
fileElem.bind('change', changeFn);
resetModel(evt);

function clickAndAssign() {
fileElem[0].click();
function clickAndAssign(evt) {
if (evt != null) {
fileElem[0].click();
}
if (isInputTypeFile()) {
elem.bind('click touchend', clickHandler);
evt.preventDefault()
}
}

// fix for android native browser
if (navigator.userAgent.toLowerCase().match(/android/)) {
setTimeout(function() {
clickAndAssign();
clickAndAssign(evt);
}, 0);
} else {
clickAndAssign();
clickAndAssign(evt);
}
}
return false;
}

if (window.FileAPI && window.FileAPI.ngfFixIE) {
window.FileAPI.ngfFixIE(elem, createFileInput, bindAttrToFileInput, changeFn, resetModel);
} else {
elem.bind('click touchend', clickHandler);
clickHandler();
if (!isInputTypeFile()) {
elem.bind('click touchend', clickHandler);
}
}
}

Expand Down Expand Up @@ -616,7 +625,7 @@ function globStringToRegex(str) {
* AngularJS file upload/drop directive and service with progress and abort
* FileAPI Flash shim for old browsers not supporting FormData
* @author Danial <danial.farid@gmail.com>
* @version 4.2.1
* @version 4.2.2
*/

(function() {
Expand Down

0 comments on commit b3a3905

Please sign in to comment.