I tried to write my first jQuery plugin. It's a very simple Ajax file uploader.
I would appreciate a review of this code.
HTML
<input type="file" id="upload" multiple="multiple" />
Plugin
;(function ($, window, document, undefined) {
// Function-level strict mode syntax
'use strict';
$.fn.ajaxUpload = function(options) {
var defaults = {
curr_files : 0,
max_files : 18,
max_concurrent : 10,
max_filesize : 200000,
allowed_types : ['jpeg','jpg'],
ajax_url : 'action.php',
extra_fields : {}
};
var options = $.extend(defaults, options);
return this.each(function() {
var $this = $(this);
$this.on('change', function() {
var files = $this[0].files;
var len = files.length;
var items = 0;
var diff_files = parseInt(defaults.max_files - defaults.curr_files - len);
if(diff_files < 0) {
alert("Error!");
return false;
}
if(!maxUploadFiles(len, defaults.max_concurrent)) {
alert("Error!");
return false;
}
var formdata = new FormData();
jQuery.each(files, function(i, file) {
if(!isOverSized(file, defaults.max_filesize)) {
alert("Error!");
return false;
}
if(!isAllowedTypes(file, defaults.allowed_types)) {
alert("Error!");
return false;
}
formdata.append('file['+i+']', file);
items++;
});
// Append extra data to formdata
$.each(defaults.extra_fields, function(name, value) {
formdata.append(name, value);
});
// Check that files have passed all test
if (len != items) { return false; }
$.ajax({
url: defaults.ajax_url,
data: formdata,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function(data){
alert(data);
location.reload(true);
}
});
});
});
};
function maxUploadFiles(len, max_concurrent) {
if(len > max_concurrent) {
return false;
}
return true;
}
function isAllowedTypes(file, allowed_types) {
var ext = file.name.split('.').pop().toLowerCase();
if(jQuery.inArray(ext, allowed_types) < 0) {
return false;
}
return true;
}
function isOverSized(file, max_filesize) {
if(file.size > max_filesize) {
return false;
}
return true;
}
})(jQuery, window, document);
ajax_url
, and possiblyeallowed_types
as well. Having a default in place means that supplying them is optional, which is almost certainly not going to be the case; it would make more sense to me for the function to throw an error ifajax_url
was not specified when calling it. \$\endgroup\$ – Hydrothermal Apr 10 '15 at 2:24