Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/drop target as element #104

Closed
wants to merge 3 commits into from
Closed

Feature/drop target as element #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47515a6
The Events afteraddingfile, whenaddingfilefailed and afteraddingall n…
Fuzzyma Apr 7, 2014
6060391
New Check makes sure that the drag is a filedrag. If not, the file-up…
Fuzzyma Apr 7, 2014
83cd734
Make last commit working in all Browsers not only FF (Firefox is usin…
Fuzzyma Apr 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,9 +128,9 @@ function( item ) {

### Supported events

- **afteraddingfile** `function( event, item ) {`: Fires after adding a single file to the queue
- **whenaddingfilefailed** `function( event, item ) {`: When adding a file failed
- **afteraddingall** `function( event, items ) {`: Fires after adding all the dragged or selected files to the queue
- **afteraddingfile** `function( event, item element ) {`: Fires after adding a single file to the queue. `element`<sup>1</sup> holds the html-element on which the file was dropped.
- **whenaddingfilefailed** `function( event, item, element ) {`: When adding a file failed. `element`<sup>1</sup> holds the html-element on which the file was dropped.
- **afteraddingall** `function( event, items, element) {`: Fires after adding all the dragged or selected files to the queue. `element`<sup>1</sup> holds the html-element on which the file was dropped.
- **beforeupload** `function( event, item ) {`: Fires before uploading an item
- **progress** `function( event, item, progress ) {`: On file upload progress
- **success** `function( event, xhr, item, response ) {`: On file successfully uploaded
Expand All @@ -140,6 +140,8 @@ function( item ) {
- **progressall** `function( event, progress ) {`: On upload queue progress
- **completeall** `function( event, items ) {`: On all loaded when uploading an entire queue, or on file loaded when uploading a single independent file

<sup>1</sup> The `$scope` of an element can be entered with `angular.element(element).scope()`

### Registering event handlers

```javascript
Expand Down
36 changes: 24 additions & 12 deletions angular-file-upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Angular File Upload v0.4.0
Angular File Upload v0.4.1
https://github.com/nervgh/angular-file-upload
*/
(function(angular, factory) {
Expand All @@ -20,28 +20,39 @@ app.directive('ngFileDrop', [ '$fileUploader', function ($fileUploader) {
return {
// don't use drag-n-drop files in IE9, because not File API support
link: !$fileUploader.isHTML5 ? angular.noop : function (scope, element, attributes) {
var filesCheck = function(types){
var ret;
if('contains' in types)ret = types.contains('Files')
if('indexOf' in types)ret = types.indexOf('Files') != -1
return ret;
}

element
.bind('drop', function (event) {
var dataTransfer = event.dataTransfer ?
event.dataTransfer :
event.originalEvent.dataTransfer; // jQuery fix;
if (!dataTransfer) return;
if (!dataTransfer || !filesCheck(dataTransfer.types)) return;
event.preventDefault();
event.stopPropagation();
scope.$broadcast('file:removeoverclass');
scope.$emit('file:add', dataTransfer.files, scope.$eval(attributes.ngFileDrop));
scope.$emit('file:add', dataTransfer.files, scope.$eval(attributes.ngFileDrop), this);
})
.bind('dragover', function (event) {
var dataTransfer = event.dataTransfer ?
event.dataTransfer :
event.originalEvent.dataTransfer; // jQuery fix;

if(!filesCheck(dataTransfer.types)) return false;
event.preventDefault();
event.stopPropagation();
dataTransfer.dropEffect = 'copy';
scope.$broadcast('file:addoverclass');
})
.bind('dragleave', function () {
.bind('dragleave', function (event) {
var dataTransfer = event.dataTransfer ?
event.dataTransfer :
event.originalEvent.dataTransfer; // jQuery fix;
if(!filesCheck(dataTransfer.types)) return false;
scope.$broadcast('file:removeoverclass');
});
}
Expand Down Expand Up @@ -71,7 +82,7 @@ app.directive('ngFileSelect', [ '$fileUploader', function ($fileUploader) {
$fileUploader.isHTML5 || element.removeAttr('multiple');

element.bind('change', function () {
scope.$emit('file:add', $fileUploader.isHTML5 ? this.files : this, scope.$eval(attributes.ngFileSelect));
scope.$emit('file:add', $fileUploader.isHTML5 ? this.files : this, scope.$eval(attributes.ngFileSelect), this);
($fileUploader.isHTML5 && element.attr('multiple')) && element.prop('value', null);
});

Expand Down Expand Up @@ -110,9 +121,9 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
this.filters.unshift(this._emptyFileFilter);
this.filters.unshift(this._queueLimitFilter);

this.scope.$on('file:add', function (event, items, options) {
this.scope.$on('file:add', function (event, items, options, element) {
event.stopPropagation();
this.addToQueue(items, options);
this.addToQueue(items, options, element);
}.bind(this));

this.bind('beforeupload', Item.prototype._beforeupload);
Expand Down Expand Up @@ -181,8 +192,9 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
* Adds items to the queue
* @param {FileList|File|HTMLInputElement} items
* @param {Object} [options]
* @param {HTMLNode} element
*/
addToQueue: function (items, options) {
addToQueue: function (items, options, element) {
var length = this.queue.length;
var list = 'length' in items ? items : [items];

Expand All @@ -206,14 +218,14 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun

if (isValid) {
this.queue.push(item);
this.trigger('afteraddingfile', item);
this.trigger('afteraddingfile', item, element);
} else {
this.trigger('whenaddingfilefailed', item);
this.trigger('whenaddingfilefailed', item, element);
}
}, this);

if (this.queue.length !== length) {
this.trigger('afteraddingall', this.queue);
this.trigger('afteraddingall', this.queue, element);
this.progress = this._getTotalProgress();
}

Expand Down
5 changes: 3 additions & 2 deletions angular-file-upload.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion angular-file-upload.min.map
View file
Open in desktop

Large diffs are not rendered by default.

19 changes: 15 additions & 4 deletions src/scripts/directives/ngFileDrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,28 +11,39 @@ app.directive('ngFileDrop', [ '$fileUploader', function ($fileUploader) {
return {
// don't use drag-n-drop files in IE9, because not File API support
link: !$fileUploader.isHTML5 ? angular.noop : function (scope, element, attributes) {
var filesCheck = function(types){
var ret;
if('contains' in types)ret = types.contains('Files')
if('indexOf' in types)ret = types.indexOf('Files') != -1
return ret;
}

element
.bind('drop', function (event) {
var dataTransfer = event.dataTransfer ?
event.dataTransfer :
event.originalEvent.dataTransfer; // jQuery fix;
if (!dataTransfer) return;
if (!dataTransfer || !filesCheck(dataTransfer.types)) return;
event.preventDefault();
event.stopPropagation();
scope.$broadcast('file:removeoverclass');
scope.$emit('file:add', dataTransfer.files, scope.$eval(attributes.ngFileDrop));
scope.$emit('file:add', dataTransfer.files, scope.$eval(attributes.ngFileDrop), this);
})
.bind('dragover', function (event) {
var dataTransfer = event.dataTransfer ?
event.dataTransfer :
event.originalEvent.dataTransfer; // jQuery fix;

if(!filesCheck(dataTransfer.types)) return false;
event.preventDefault();
event.stopPropagation();
dataTransfer.dropEffect = 'copy';
scope.$broadcast('file:addoverclass');
})
.bind('dragleave', function () {
.bind('dragleave', function (event) {
var dataTransfer = event.dataTransfer ?
event.dataTransfer :
event.originalEvent.dataTransfer; // jQuery fix;
if(!filesCheck(dataTransfer.types)) return false;
scope.$broadcast('file:removeoverclass');
});
}
Expand Down
2 changes: 1 addition & 1 deletion src/scripts/directives/ngFileSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ app.directive('ngFileSelect', [ '$fileUploader', function ($fileUploader) {
$fileUploader.isHTML5 || element.removeAttr('multiple');

element.bind('change', function () {
scope.$emit('file:add', $fileUploader.isHTML5 ? this.files : this, scope.$eval(attributes.ngFileSelect));
scope.$emit('file:add', $fileUploader.isHTML5 ? this.files : this, scope.$eval(attributes.ngFileSelect), this);
($fileUploader.isHTML5 && element.attr('multiple')) && element.prop('value', null);
});

Expand Down
13 changes: 7 additions & 6 deletions src/scripts/services/$fileUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,9 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
this.filters.unshift(this._emptyFileFilter);
this.filters.unshift(this._queueLimitFilter);

this.scope.$on('file:add', function (event, items, options) {
this.scope.$on('file:add', function (event, items, options, element) {
event.stopPropagation();
this.addToQueue(items, options);
this.addToQueue(items, options, element);
}.bind(this));

this.bind('beforeupload', Item.prototype._beforeupload);
Expand Down Expand Up @@ -105,8 +105,9 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun
* Adds items to the queue
* @param {FileList|File|HTMLInputElement} items
* @param {Object} [options]
* @param {HTMLNode} element
*/
addToQueue: function (items, options) {
addToQueue: function (items, options, element) {
var length = this.queue.length;
var list = 'length' in items ? items : [items];

Expand All @@ -130,14 +131,14 @@ app.factory('$fileUploader', [ '$compile', '$rootScope', '$http', '$window', fun

if (isValid) {
this.queue.push(item);
this.trigger('afteraddingfile', item);
this.trigger('afteraddingfile', item, element);
} else {
this.trigger('whenaddingfilefailed', item);
this.trigger('whenaddingfilefailed', item, element);
}
}, this);

if (this.queue.length !== length) {
this.trigger('afteraddingall', this.queue);
this.trigger('afteraddingall', this.queue, element);
this.progress = this._getTotalProgress();
}

Expand Down