I accomplished this by looking at the jquery.fileupload-validation.js file, and this is what I came up with:
<script type="text/javascript">
(function (factory) {
'use strict';
if (typeof define === 'function' && define.amd) {
define([
'jquery',
'./jquery.fileupload-process'
], factory);
} else if (typeof exports === 'object') {
factory(require('jquery'));
} else {
factory(
window.jQuery
);
}
}(function ($) {
'use strict';
$.blueimp.fileupload.prototype.options.processQueue.push(
{
action: 'validateTotalSize',
always: true,
maxSizeOfFiles: '@',
}
);
$.widget('blueimp.fileupload', $.blueimp.fileupload, {
options: {
getSizeOfFiles: $.noop,
messages: {
maxSizeOfFiles: 'Maximum size of all files exceeded',
}
},
processActions: {
validateTotalSize: function (data, options) {
var $this = $(this),
that = $this.data('blueimp-fileupload') ||
$this.data('fileupload');
if (options.disabled) {
return data;
}
var dfd = $.Deferred(),
settings = this.options,
file = data.files[data.index];
console.log(settings.getSizeOfFiles());
if (settings.getSizeOfFiles() > options.maxSizeOfFiles) {
file.error = settings.i18n('maxSizeOfFiles');
}
if (file.error || data.files.error) {
data.files.error = true;
dfd.rejectWith(this, [data]);
} else {
dfd.resolveWith(this, [data]);
}
return dfd.promise();
}
}
});
$(document).ready(function () {
var totalSize = 0;
$('#fileupload').fileupload({
autoUpload: false,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
dataType: 'json',
maxFileSize: 2000000,
maxSizeOfFiles: 10000000,
getSizeOfFiles: function () {
return totalSize;
},
});
$('#fileupload').bind('fileuploadadd', function (e, data) {
$.each(data.files, function (index, file) {
console.log('Adding file: ' + file.name + ', ' + file.size);
totalSize = totalSize + file.size;
console.log('Total size: ' + totalSize);
});
});
$('#fileupload').bind('fileuploadfailed', function (e, data) {
$.each(data.files, function (index, file) {
console.log('Removed file: ' + file.name + ', ' + file.size);
totalSize = totalSize - file.size;
console.log('Total size: ' + totalSize);
});
});
});
}));
</script>
source
share