Skip to content

init delay for uploader #37

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

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

init delay for uploader #37

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
200ade6
init delay for uploader
tairezzzz Jul 11, 2015
a25898e
adding resize model
tairezzzz Jul 11, 2015
61cc4b2
builded with resize and delay
tairezzzz Jul 11, 2015
acd5080
fix undefined pl-init delay
tairezzzz Jul 12, 2015
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
245 changes: 144 additions & 101 deletions dist/plupload-angular-directive.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,15 +29,16 @@ angular.module('plupload.directive', [])
}];

})
.directive('plUpload', ['$parse', 'plUploadService', function ($parse, plUploadService) {
.directive('plUpload', ['$parse', '$log', 'plUploadService', '$timeout', function ($parse, $log, plUploadService, $timeout) {
return {
restrict: 'A',
scope: {
'plProgressModel': '=',
'plFilesModel': '=',
'plFiltersModel': '=',
'plMultiParamsModel':'=',
'plInstance': '='
'plInstance': '=',
'plResizeModel':'='
},
link: function (scope, iElement, iAttrs) {

Expand All @@ -49,7 +50,7 @@ angular.module('plupload.directive', [])
randomString += charSet.substring(randomPoz,randomPoz+1);
}
return randomString;
}
};

if(!iAttrs.id){
var randomValue = scope.randomString(5);
Expand All @@ -58,6 +59,12 @@ angular.module('plupload.directive', [])
if(!iAttrs.plAutoUpload){
iAttrs.$set('plAutoUpload','true');
}
if(!iAttrs.plMultiSelection){
iAttrs.$set('plMultiSelection','true');
}
if(!iAttrs.plInitDelay){
iAttrs.$set('plInitDelay','false');
}
if(!iAttrs.plMaxFileSize){
iAttrs.$set('plMaxFileSize','10mb');
}
Expand All @@ -81,115 +88,151 @@ angular.module('plupload.directive', [])
var options = {
runtimes : 'html5,flash,silverlight',
browse_button : iAttrs.id,
multi_selection: true,
multi_selection: iAttrs.plMultiSelection.toLowerCase() == 'true',
// container : 'abc',
max_file_size : iAttrs.plMaxFileSize,
url : iAttrs.plUrl,
flash_swf_url : iAttrs.plFlashSwfUrl,
silverlight_xap_url : iAttrs.plSilverlightXapUrl,
filters : scope.filters
}
filters : scope.filters,
drop_element: iAttrs.plDropElement
};


if(scope.plMultiParamsModel){
options.multipart_params = scope.plMultiParamsModel;
}


var uploader = new plupload.Uploader(options);

uploader.settings.headers = plUploadService.getConfig('headers');

uploader.init();

uploader.bind('Error', function(up, err) {
if(iAttrs.onFileError){
scope.$parent.$apply(onFileError);
}

alert("Cannot upload, error: " + err.message + (err.file ? ", File: " + err.file.name : "") + "");
up.refresh(); // Reposition Flash/Silverlight
});

uploader.bind('FilesAdded', function(up,files) {
//uploader.start();
scope.$apply(function() {
if(iAttrs.plFilesModel) {
angular.forEach(files, function(file,key) {
scope.plFilesModel.push(file);
});
}

if(iAttrs.onFileAdded){
scope.$parent.$eval(iAttrs.onFileAdded);
}
});

if(iAttrs.plAutoUpload=="true"){
uploader.start();
}
});

uploader.bind('FileUploaded', function(up, file, res) {
if(iAttrs.onFileUploaded) {
if(iAttrs.plFilesModel) {
scope.$apply(function() {
angular.forEach(scope.plFilesModel, function(file,key) {
scope.allUploaded = false;
if(file.percent==100)
scope.allUploaded = true;
});

if(scope.allUploaded) {
var fn = $parse(iAttrs.onFileUploaded);
fn(scope.$parent, {$response:res});
}

});
} else {
var fn = $parse(iAttrs.onFileUploaded);
scope.$apply(function(){
fn(scope.$parent, {$response:res});
});
}
//scope.$parent.$apply(iAttrs.onFileUploaded);
}
});

uploader.bind('UploadProgress',function(up,file){
if(!iAttrs.plProgressModel){
return;
}

if(iAttrs.plFilesModel){
scope.$apply(function() {
scope.sum = 0;

angular.forEach(scope.plFilesModel, function(file,key) {
scope.sum = scope.sum + file.percent;
});

scope.plProgressModel = scope.sum/scope.plFilesModel.length;
});
} else {
scope.$apply(function() {
scope.plProgressModel = file.percent;
});
}


if(iAttrs.onFileProgress){
scope.$parent.$eval(iAttrs.onFileProgress);
}
});

if(iAttrs.plInstance){
scope.plInstance = uploader;
}

// scope.upload = function(){
// uploader.start();
// };
if (scope.plResizeModel) {
options.resize = scope.plResizeModel;
}

var initDelay = iAttrs.plInitDelay.toLowerCase() == 'true'?300:0;

$timeout(function(){
var uploader = new plupload.Uploader(options);

uploader.settings.headers = plUploadService.getConfig('headers');

uploader.init();

uploader.bind('Error', function(up, err) {
if(iAttrs.onFileError){
scope.$parent.$apply(iAttrs.onFileError);
}

$log.error("Cannot upload, error: " + err.message + (err.file ? ", File: " + err.file.name : "") + "");

up.refresh(); // Reposition Flash/Silverlight
});

uploader.bind('FilesAdded', function(up,files) {
//uploader.start();
scope.$apply(function() {
if(iAttrs.plFilesModel) {
angular.forEach(files, function(file,key) {
if (!scope.plFilesModel) scope.plFilesModel=[];
scope.plFilesModel.push(file);
});
}

if(iAttrs.onFileAdded){
var fn = $parse(iAttrs.onFileAdded);
fn(scope.$parent, {$files:files});
}
});

if(iAttrs.plAutoUpload=="true"){
uploader.start();
}
});

uploader.bind('BeforeUpload', function(up, file) {
if(iAttrs.onBeforeUpload){
var fn = $parse(iAttrs.onBeforeUpload);
fn(scope.$parent, {$file:file});
}
});

uploader.bind('FileUploaded', function(up, file, res) {
//We are going to make some refactor here.
//The idea behind is always update files with the server response value
//And also launch the eventi if neeed

//If we have the model...
if(iAttrs.plFilesModel) {
//Apply on scope...
scope.$apply(function() {

//All files are uploaded?
scope.allUploaded = false;

angular.forEach(scope.plFilesModel, function($file, key) {

//Bug FIX, this logic will set allUploaded right
if(file.percent != 100) {
scope.allUploaded = false;
} else if(file.id == $file.id) { //If the file is the same that we are reciving...
//Set response on the file
$file.response = JSON.parse(res.response);

//Need throw event? throw it
if(iAttrs.onFileUploaded) {
var fn = $parse(iAttrs.onFileUploaded);
fn(scope.$parent, {$response:res, $file:file});
}
}

});
});
}
//We doesn't have model but we have the event
else if(!iAttrs.plFilesModel && iAttrs.onFileUploaded) {
var fn = $parse(iAttrs.onFileUploaded);
scope.$apply(function(){
fn(scope.$parent, {$response:res, $file:file});
});
}
});

uploader.bind('UploadProgress',function(up,file){
if(!iAttrs.plProgressModel){
return;
}

if(iAttrs.plFilesModel){
scope.$apply(function() {
scope.sum = 0;

angular.forEach(scope.plFilesModel, function(file,key) {
scope.sum = scope.sum + file.percent;
});

scope.plProgressModel = scope.sum/scope.plFilesModel.length;
});
} else {
scope.$apply(function() {
scope.plProgressModel = file.percent;
});
}


if(iAttrs.onFileProgress){
var fn = $parse(iAttrs.onFileProgress);
scope.$apply(function(){
fn(scope.$parent, {$file:file});
});
}
});

if(iAttrs.plInstance){
scope.plInstance = uploader;
}

scope.$on("$destroy", function(){
uploader.destroy();
});
}, initDelay);
}
};
}])
4 changes: 2 additions & 2 deletions dist/plupload-angular-directive.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading