yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving fileUploader.js with jsLint suggestions

Browse Source
This commit is contained in:
sebastiaan
2012-09-04 07:44:23 -02:00
parent 73c6aaa995
commit f486ff6441
1 changed files with 114 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files

264
src/Umbraco.Web.UI/umbraco_client/FileUploader/js/jquery.fileUploader.js
View File

@@ -5,7 +5,7 @@
* Version: 1.0
*/
; (function ($, window, document, undefined) {
(function ($, window, document, undefined) {
$.event.props.push('dataTransfer');
@@ -28,15 +28,14 @@
var isHtml5 = (window.FormData) ? true : false;
function FileUploader(el, options)
{
function FileUploader(el, options) {
var self = this;
var $el = $(el);
// Setup instance
self.input = el;
self.form = $el.parents("form");
self.uploaderId = ++$.fileUploader.count;
self.uploaderId = $.fileUploader.count + 1;
self.opts = $.extend({}, defaultOptions, options);
@@ -45,15 +44,14 @@
// Return configures component
return self;
};
}
FileUploader.prototype = {
// Private methods
_init: function ()
{
_init: function () {
var self = this;
// Init vars
self.wrapperId = 'fu-fileUploader-' + self.uploaderId;
self.wrapper = ' \
@@ -79,25 +77,22 @@
$(":file", self.form).each(function () {
$(this).val('');
});
// Hide the form (we'll just use it as a template)
self.form.hide();
// Create the actual form users will interact with
self._createNewForm();
// Hookup drag and drop support
$(self.opts.dropTarget !== null ? self.opts.dropTarget : self.wrapperSelector)
.bind('dragenter dragover', false)
.bind('drop', function (e) {
$(self.opts.dropTarget !== null ? self.opts.dropTarget : self.wrapperSelector).bind('dragenter dragover', false).bind('drop', function (e) {
e.stopPropagation();
e.preventDefault();
self._addFileHtml5(e.dataTransfer);
});
},
_getFileName: function (filePath)
{
_getFileName: function (filePath) {
var fileName = filePath;
if (fileName.indexOf('/') > -1) {
fileName = fileName.substring(fileName.lastIndexOf('/') + 1);
@@ -106,9 +101,8 @@
}
return fileName;
},
_validateFileName: function (fileName)
{
_validateFileName: function (fileName) {
var self = this;
var extensions = new RegExp(self.opts.allowedExtension + '$', 'i');
if (extensions.test(fileName)) {
@@ -117,9 +111,8 @@
return -1;
}
},
_getFileSize: function (file)
{
_getFileSize: function (file) {
var fileSize = 0;
if (file.size > 1024 * 1024) {
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
@@ -128,12 +121,11 @@
}
return fileSize;
},
_createNewForm: function ()
{
_createNewForm: function () {
var self = this;
var id = ++self.itemCount;
var id = self.itemCount + 1;
var itemId = 'fu-item-' + self.uploaderId + '-' + id;
var iframeId = 'fu-frame-' + self.uploaderId + '-' + id;
var formId = 'fu-form-' + self.uploaderId + '-' + id;
@@ -155,14 +147,14 @@
}).prependTo(item).show();
// Remove any id's / css classes from file inputs
$(":file", newForm).each(function(idx, itm) {
$(":file", newForm).each(function (idx, itm) {
$(itm).removeAttr("id").removeAttr("class");
});
// Hide everything in the form, other than file inputs
newForm.children().each(function () {
var isFile = $(this).is(':file');
if (!isFile && $(this).find(':file').length == 0) {
if (!isFile && $(this).find(':file').length === 0) {
$(this).hide();
}
});
@@ -179,18 +171,16 @@
}
});
},
_addFileHtml5: function (input)
{
_addFileHtml5: function (input) {
var self = this;
$.each(input.files, function (index, file) {
self._addFile(file);
});
self._afterAddFile();
},
_addFile: function(input)
{
_addFile: function (input) {
var self = this;
var id = self.itemCount;
var $item = $('#fu-item-' + self.uploaderId + '-' + id);
@@ -247,29 +237,26 @@
self._afterAddFile();
}
},
_afterAddFile: function ()
{
_afterAddFile: function () {
var self = this;
if (self.opts.autoUpload)
{
if (self.opts.autoUpload) {
self._processNextItemInQueue(true);
}
},
_processNextItemInQueue: function(autoProceed)
{
_processNextItemInQueue: function (autoProceed) {
var self = this;
var totalItems = $(self.itemContainerSelector + " .fu-item");
if (totalItems.length > 0)
{
if (totalItems.length > 0) {
var $pendingUpload = $(totalItems.get(0));
var data = $pendingUpload.data('data');
//before upload
var response = self.opts.onUpload(data);
if (response === false)
if (response === false) {
return false; //TODO: Raise onDone event?
}
self.inProgressItemId = data.itemId;
@@ -285,18 +272,16 @@
}
}
},
_uploadHtml5: function($item, autoProceed)
{
_uploadHtml5: function ($item, autoProceed) {
var self = this;
var $form = $item.find("form");
var data = $item.data('data');
var file = data.input;
if (file)
{
if (file) {
var fd = new FormData();
fd.append($(":file", $form).first().attr('name'), file);
//get other form input and append to formData
$form.find(':input').each(function () {
if (!$(this).is(':file')) {
@@ -312,7 +297,7 @@
contentType: false,
processData: false,
type: 'POST',
xhr: function() {
xhr: function () {
var req = $.ajaxSettings.xhr();
if (req) {
req.upload.addEventListener('progress', function (ev) {
@@ -322,28 +307,21 @@
}
return req;
}
})
.success(function (d)
{
}).success(function (d) {
data.status = 'success';
self.opts.onDone(data);
})
.error(function (jqXhr, textStatus, errorThrown)
{
}).error(function (jqXhr, textStatus, errorThrown) {
data.status = 'error';
data.message = errorThrown;
self.opts.onDone(data);
})
.complete(function (jqXhr, textStatus)
{
}).complete(function (jqXhr, textStatus) {
self._afterUpload($item, autoProceed);
});
}
},
_uploadIFrame: function ($item, autoProceed)
{
_uploadIFrame: function ($item, autoProceed) {
var self = this;
var $form = $item.find("form");
var $iframe = $item.find("iframe");
@@ -353,10 +331,9 @@
$form.submit();
$iframe.load(function ()
{
$iframe.load(function () {
self._stopDummyProgress(data, true);
// Read content returned
var rawResponse;
@@ -368,7 +345,7 @@
var response = $.parseJSON(rawResponse);
if(response.success) {
if (response.success) {
data.status = 'success';
} else {
data.status = 'error';
@@ -380,13 +357,13 @@
self._afterUpload($item, autoProceed);
});
},
_startDummyProgress: function (data, count)
{
_startDummyProgress: function (data, count) {
var self = this;
if (count === undefined)
if (count === undefined) {
count = 0;
}
if ($.fileUploader.percentageInterval[count]) {
data.progress = $.fileUploader.percentageInterval[count] + Math.floor(Math.random() * 5 + 1);
@@ -395,69 +372,63 @@
if ($.fileUploader.timeInterval[count]) {
self.progressTimeout = setTimeout(function () {
self._startDummyProgress(data, ++count);
self._startDummyProgress(data, count + 1);
}, $.fileUploader.timeInterval[count] * 1000);
}
},
_stopDummyProgress: function (data, success)
{
_stopDummyProgress: function (data, success) {
var self = this;
clearTimeout(self.progressTimeout);
if (success)
{
if (success) {
// Force a 100% onProgress event
data.progress = 100;
self.opts.onProgress(data);
}
},
_afterUpload: function ($item, autoProceed)
{
_afterUpload: function ($item, autoProceed) {
var self = this;
var data = $item.data('data');
if (data.itemId == self.inProgressItemId)
{
if (data.itemId == self.inProgressItemId) {
self.inProgressItemId = 0;
self.inProgressJqXhr = null;
}
$item.remove();
if ($(self.itemContainerSelector + " .fu-item").length > 0)
{
if (autoProceed)
if ($(self.itemContainerSelector + " .fu-item").length > 0) {
if (autoProceed) {
self._processNextItemInQueue(autoProceed);
}
}
else
{
else {
self.opts.onDoneAll();
}
},
// Public methods
uploadAll: function ()
{
uploadAll: function () {
var self = this;
var result = self.opts.onUploadAll(self);
if (result === false)
if (result === false) {
return false;
}
self._processNextItemInQueue(true);
},
cancelAll: function ()
{
cancelAll: function () {
var self = this;
// Remove current form
$(self.formContainerSelector).empty();
var queuedItems = $(self.itemContainerSelector + " .fu-item");
for (var i = 0; i < queuedItems.length; i++) {
for (var i = 0; i < queuedItems.length; i + 1) {
var data = $(queuedItems.get(i)).data('data');
self.cancelItem(data.itemId);
}
@@ -467,21 +438,18 @@
// Recreate the form
self._createNewForm();
},
cancelItem: function(itemId)
{
cancelItem: function (itemId) {
var self = this;
var $item = $("#fu-item-" + self.uploaderId + "-" + itemId);
var data = $item.data('data');
// If the item to cancel is in progress, abort the upload
if (self.inProgressItemId == itemId && self.inProgressJqXhr)
{
if (self.inProgressItemId == itemId && self.inProgressJqXhr) {
//NB: The abort event handler will cleanup the aborted item from the queue
self.inProgressJqXhr.abort();
}
else
{
else {
// Update the status
data.status = 'canceled';
@@ -492,46 +460,42 @@
}
};
$.fileUploader = {
version: '1.0',
count: 0,
timeInterval: [1, 2, 4, 2, 1, 5, 5, 5, 5],
$.fileUploader = {
version: '1.0',
count: 0,
timeInterval: [1, 2, 4, 2, 1, 5, 5, 5, 5],
percentageInterval: [10, 20, 30, 40, 60, 80, 85, 90, 95]
};
};
$.fn.fileUploader = function (o)
{
var args = arguments;
if (typeof o === 'string')
{
var api = this.fileUploaderApi();
if (api[o])
return api[o].apply(api, Array.prototype.slice.call(args, 1));
else
$.error('Method ' + o + ' does not exist on jQuery.fileUploader');
}
else if (typeof o === 'object' || !o)
{
return this.each(function () {
var fileUploader = new FileUploader(this, o);
$(this).data("fileuploader_api", fileUploader);
});
}
};
$.fn.fileUploaderApi = function ()
{
//ensure there's only 1
if (this.length != 1) {
throw "Requesting the API can only match one element";
}
$.fn.fileUploader = function (o) {
var args = arguments;
if (typeof o === 'string') {
var api = this.fileUploaderApi();
if (api[o]) {
return api[o].apply(api, Array.prototype.slice.call(args, 1));
} else {
$.error('Method ' + o + ' does not exist on jQuery.fileUploader');
}
} else if (typeof o === 'object' || !o) {
return this.each(function () {
var fileUploader = new FileUploader(this, o);
$(this).data("fileuploader_api", fileUploader);
});
}
};
//ensure thsi is a collapse panel
if (this.data("fileuploader_api") == null) {
throw "The matching element had not been bound to a fileUploader";
}
$.fn.fileUploaderApi = function () {
//ensure there's only 1
if (this.length != 1) {
throw "Requesting the API can only match one element";
}
//ensure thsi is a collapse panel
if (this.data("fileuploader_api") === null) {
throw "The matching element had not been bound to a fileUploader";
}
return this.data("fileuploader_api");
};
return this.data("fileuploader_api");
};
})(jQuery, window, document);