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

Adding onDragEnter and onDragLeave callbacks #617

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Adding onDragEnter and onDragLeave callbacks #617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
486b501
Added onDragEnter and onDragLeave callbacks to ngFileDrop directive
micobg Apr 12, 2016
28ea3f2
onDragEnter and onDragLeave callbacks examples
micobg Apr 12, 2016
39eb65f
Parallel file uploading
micobg May 3, 2016
6bfda93
Merge branch 'parallel_file_uploading'
micobg May 3, 2016
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
79 changes: 58 additions & 21 deletions dist/angular-file-upload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ return /******/ (function(modules) { // webpackBootstrap
var transport = this.isHTML5 ? "_xhrTransport" : "_iframeTransport";

item._prepareToUploading();
if (this.isUploading) {
if (item.isUploading) {
return;
}this.isUploading = true;
this[transport](item);
Expand Down Expand Up @@ -290,9 +290,8 @@ return /******/ (function(modules) { // webpackBootstrap
if (!items.length) {
return;
}forEach(items, function (item) {
return item._prepareToUploading();
return item.upload();
});
items[0].upload();
}
},
cancelAll: {
Expand Down Expand Up @@ -365,17 +364,15 @@ return /******/ (function(modules) { // webpackBootstrap
});
}
},
getReadyItems: {
getUploadingItems: {
/**
* Returns items ready for upload
* Return currently uploading items
* @returns {Array}
*/

value: function getReadyItems() {
value: function getUploadingItems() {
return this.queue.filter(function (item) {
return item.isReady && !item.isUploading;
}).sort(function (item1, item2) {
return item1.index - item2.index;
return item.isUploading;
});
}
},
Expand Down Expand Up @@ -942,14 +939,13 @@ return /******/ (function(modules) { // webpackBootstrap
item._onComplete(response, status, headers);
this.onCompleteItem(item, response, status, headers);

var nextItem = this.getReadyItems()[0];
this.isUploading = false;

if (isDefined(nextItem)) {
nextItem.upload();
var currentlyUploadingItems = this.getUploadingItems();
if (currentlyUploadingItems.length > 0) {
return;
}

this.isUploading = false;

this.onCompleteAll();
this.progress = this._getTotalProgress();
this._render();
Expand Down Expand Up @@ -1665,6 +1661,7 @@ return /******/ (function(modules) { // webpackBootstrap
$destroy: "destroy",
drop: "onDrop",
dragover: "onDragOver",
dragenter: "onDragEnter",
dragleave: "onDragLeave"
},
// Name of property inside uploader._directive object
Expand Down Expand Up @@ -1723,12 +1720,22 @@ return /******/ (function(modules) { // webpackBootstrap
forEach(this.uploader._directives.over, this._addOverClass, this);
}
},
onDragEnter: {
/**
* Event handler
*/

value: function onDragEnter(event) {
this._onDragEnterCallback();
}
},
onDragLeave: {
/**
* Event handler
*/

value: function onDragLeave(event) {
this._onDragLeaveCallback();
if (event.currentTarget === this.element[0]) {
return;
}this._preventAndStop(event);
Expand Down Expand Up @@ -1789,6 +1796,20 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _removeOverClass(item) {
item.removeOverClass();
}
},
_onDragEnterCallback: {
/**
* onDragEnter default callback
*/

value: function _onDragEnterCallback() {}
},
_onDragLeaveCallback: {
/**
* onDragEnter default callback
*/

value: function _onDragLeaveCallback() {}
}
});

Expand Down Expand Up @@ -1935,18 +1956,35 @@ return /******/ (function(modules) { // webpackBootstrap

return {
link: function (scope, element, attributes) {
var uploader = scope.$eval(attributes.uploader);
var uploader = scope.$eval(attributes.uploader),
fileDropOptions = {
uploader: uploader,
element: element
},
onDragEnterCallback = scope.$eval(attributes.onDragEnter),
onDragLeaveCallback = scope.$eval(attributes.onDragLeave);

if (!(uploader instanceof FileUploader)) {
throw new TypeError("\"Uploader\" must be an instance of FileUploader");
}

if (!uploader.isHTML5) return;

var object = new FileDrop({
uploader: uploader,
element: element
});
if (onDragEnterCallback) {
if (typeof onDragEnterCallback !== "function") {
throw new TypeError("\"onDragEnter\" callback must be a functions");
}
fileDropOptions._onDragEnterCallback = onDragEnterCallback;
}

if (onDragLeaveCallback) {
if (typeof onDragLeaveCallback !== "function") {
throw new TypeError("\"onDragLeave\" callback must be a functions");
}
fileDropOptions._onDragLeaveCallback = onDragLeaveCallback;
}

var object = new FileDrop(fileDropOptions);

object.getOptions = $parse(attributes.options).bind(object, scope);
object.getFilters = function () {
Expand Down Expand Up @@ -1995,5 +2033,4 @@ return /******/ (function(modules) { // webpackBootstrap
/***/ }
/******/ ])
});
;
//# sourceMappingURL=angular-file-upload.js.map
;
3 changes: 1 addition & 2 deletions dist/angular-file-upload.min.js
View file
Open in desktop

Large diffs are not rendered by default.

8 changes: 8 additions & 0 deletions examples/simple/controllers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,13 @@ angular
console.info('onCompleteAll');
};

$scope.onDragEnter = function () {
console.info('onDragEnter');
};

$scope.onDragLeave = function () {
console.info('onDragLeave');
};

console.info('uploader', uploader);
}]);
2 changes: 1 addition & 1 deletion examples/simple/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ <h3>Select files</h3>
</div>

<!-- Example: nv-file-drop="" uploader="{Object}" options="{Object}" filters="{String}" -->
<div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }">
<div nv-file-drop="" uploader="uploader" options="{ url: '/foo' }" on-drag-enter="onDragEnter" on-drag-leave="onDragLeave">
<div nv-file-over="" uploader="uploader" over-class="another-file-over-class" class="well my-drop-zone">
Another drop zone with its own settings
</div>
Expand Down
27 changes: 22 additions & 5 deletions src/directives/FileDrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,35 @@ export default ($parse, FileUploader, FileDrop) => {

return {
link: (scope, element, attributes) => {
var uploader = scope.$eval(attributes.uploader);
var uploader = scope.$eval(attributes.uploader),
fileDropOptions = {
uploader: uploader,
element: element
},
onDragEnterCallback = scope.$eval(attributes.onDragEnter),
onDragLeaveCallback = scope.$eval(attributes.onDragLeave);

if (!(uploader instanceof FileUploader)) {
throw new TypeError('"Uploader" must be an instance of FileUploader');
}

if (!uploader.isHTML5) return;

var object = new FileDrop({
uploader: uploader,
element: element
});
if (onDragEnterCallback) {
if (typeof onDragEnterCallback !== 'function') {
throw new TypeError('"onDragEnter" callback must be a functions');
}
fileDropOptions._onDragEnterCallback = onDragEnterCallback;
}

if (onDragLeaveCallback) {
if (typeof onDragLeaveCallback !== 'function') {
throw new TypeError('"onDragLeave" callback must be a functions');
}
fileDropOptions._onDragLeaveCallback = onDragLeaveCallback;
}

var object = new FileDrop(fileDropOptions);

object.getOptions = $parse(attributes.options).bind(object, scope);
object.getFilters = () => attributes.filters;
Expand Down
16 changes: 16 additions & 0 deletions src/services/FileDrop.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default (FileDirective) => {
$destroy: 'destroy',
drop: 'onDrop',
dragover: 'onDragOver',
dragenter: 'onDragEnter',
dragleave: 'onDragLeave'
},
// Name of property inside uploader._directive object
Expand Down Expand Up @@ -68,10 +69,17 @@ export default (FileDirective) => {
this._preventAndStop(event);
forEach(this.uploader._directives.over, this._addOverClass, this);
}
/**
* Event handler
*/
onDragEnter(event) {
this._onDragEnterCallback();
}
/**
* Event handler
*/
onDragLeave(event) {
this._onDragLeaveCallback();
if(event.currentTarget === this.element[0]) return;
this._preventAndStop(event);
forEach(this.uploader._directives.over, this._removeOverClass, this);
Expand Down Expand Up @@ -115,6 +123,14 @@ export default (FileDirective) => {
_removeOverClass(item) {
item.removeOverClass();
}
/**
* onDragEnter default callback
*/
_onDragEnterCallback() { }
/**
* onDragEnter default callback
*/
_onDragLeaveCallback() { }
}


Expand Down
22 changes: 9 additions & 13 deletions src/services/FileUploader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ export default (fileUploaderOptions, $rootScope, $http, $window, FileLikeObject,
var transport = this.isHTML5 ? '_xhrTransport' : '_iframeTransport';

item._prepareToUploading();
if(this.isUploading) return;
if(item.isUploading) return;

this.isUploading = true;
this[transport](item);
Expand All @@ -135,8 +135,7 @@ export default (fileUploaderOptions, $rootScope, $http, $window, FileLikeObject,
var items = this.getNotUploadedItems().filter(item => !item.isUploading);
if(!items.length) return;

forEach(items, item => item._prepareToUploading());
items[0].upload();
forEach(items, item => item.upload());
}
/**
* Cancels all uploads
Expand Down Expand Up @@ -187,13 +186,11 @@ export default (fileUploaderOptions, $rootScope, $http, $window, FileLikeObject,
return this.queue.filter(item => !item.isUploaded);
}
/**
* Returns items ready for upload
* Return currently uploading items
* @returns {Array}
*/
getReadyItems() {
return this.queue
.filter(item => (item.isReady && !item.isUploading))
.sort((item1, item2) => item1.index - item2.index);
getUploadingItems() {
return this.queue.filter(item => item.isUploading);
}
/**
* Destroys instance of FileUploader
Expand Down Expand Up @@ -657,14 +654,13 @@ export default (fileUploaderOptions, $rootScope, $http, $window, FileLikeObject,
item._onComplete(response, status, headers);
this.onCompleteItem(item, response, status, headers);

var nextItem = this.getReadyItems()[0];
this.isUploading = false;

if(isDefined(nextItem)) {
nextItem.upload();
var currentlyUploadingItems = this.getUploadingItems();
if(currentlyUploadingItems.length > 0) {
return;
}

this.isUploading = false;

this.onCompleteAll();
this.progress = this._getTotalProgress();
this._render();
Expand Down