@param {Array} options
*/
function Dropify(element, options) {
if (!(window.File && window.FileReader && window.FileList && window.Blob)) {
return;
}
var defaults = {
defaultFile: '',
maxFileSize: 0,
minWidth: 0,
maxWidth: 0,
minHeight: 0,
maxHeight: 0,
showRemove: true,
showLoader: true,
showErrors: true,
errorTimeout: 3000,
errorsPosition: 'overlay',
imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'],
maxFileSizePreview: "5M",
allowedFormats: ['portrait', 'square', 'landscape'],
allowedFileExtensions: ['*'],
messages: {
'default': 'Drag and drop a file here or click',
'replace': 'Drag and drop or click to replace',
'remove': 'Remove',
'error': 'Ooops, something wrong appended.'
},
error: {
'fileSize': 'The file size is too big ({{ value }} max).',
'minWidth': 'The image width is too small ({{ value }}}px min).',
'maxWidth': 'The image width is too big ({{ value }}}px max).',
'minHeight': 'The image height is too small ({{ value }}}px min).',
'maxHeight': 'The image height is too big ({{ value }}px max).',
'imageFormat': 'The image format is not allowed ({{ value }} only).',
'fileExtension': 'The file is not allowed ({{ value }} only).'
},
tpl: {
wrap: '
@param {Object} input
*/
Dropify.prototype.readFile = function(input)
{
if (input.files && input.files[0]) {
var reader = new FileReader();
var image = new Image();
var file = input.files[0];
var srcBase64 = null;
var _this = this;
var eventFileReady = $.Event("dropify.fileReady");
Clear the element, events are available
*/
Dropify.prototype.clearElement = function()
{
if (this.errorsEvent.errors.length === 0) {
var eventBefore = $.Event("dropify.beforeClear");
this.input.trigger(eventBefore, [this]);
Set the container height
*/
Dropify.prototype.setContainerSize = function()
{
if (this.settings.height) {
this.wrapper.height(this.settings.height);
}
};
@return {String} message
*/
Dropify.prototype.getError = function(errorKey)
{
var error = this.settings.error[errorKey],
value = '';
switch (errorKey) {
case 'fileSize':
value = this.settings.maxFileSize;
break;
case 'minWidth':
value = this.settings.minWidth;
break;
case 'maxWidth':
value = this.settings.maxWidth;
break;
case 'minHeight':
value = this.settings.minHeight;
break;
case 'maxHeight':
value = this.settings.maxHeight;
break;
case 'imageFormat':
value = this.settings.allowedFormats.join(', ');
break;
case 'fileExtension':
value = this.settings.allowedFileExtensions.join(', ');
break;
}
if (value !== '') {
return error.replace('{{ value }}', value);
}
return error;
};
/**
Show the loader
*/
Dropify.prototype.showLoader = function()
{
if (typeof this.loader !== "undefined") {
this.loader.show();
}
};
/**
Hide the loader
*/
Dropify.prototype.hideLoader = function()
{
if (typeof this.loader !== "undefined") {
this.loader.hide();
}
};
var pluginName = "dropify";
/**
@param {Array} options */ function Dropify(element, options) { if (!(window.File && window.FileReader && window.FileList && window.Blob)) { return; }
var defaults = { defaultFile: '', maxFileSize: 0, minWidth: 0, maxWidth: 0, minHeight: 0, maxHeight: 0, showRemove: true, showLoader: true, showErrors: true, errorTimeout: 3000, errorsPosition: 'overlay', imgFileExtensions: ['png', 'jpg', 'jpeg', 'gif', 'bmp'], maxFileSizePreview: "5M", allowedFormats: ['portrait', 'square', 'landscape'], allowedFileExtensions: ['*'], messages: { 'default': 'Drag and drop a file here or click', 'replace': 'Drag and drop or click to replace', 'remove': 'Remove', 'error': 'Ooops, something wrong appended.' }, error: { 'fileSize': 'The file size is too big ({{ value }} max).', 'minWidth': 'The image width is too small ({{ value }}}px min).', 'maxWidth': 'The image width is too big ({{ value }}}px max).', 'minHeight': 'The image height is too small ({{ value }}}px min).', 'maxHeight': 'The image height is too big ({{ value }}px max).', 'imageFormat': 'The image format is not allowed ({{ value }} only).', 'fileExtension': 'The file is not allowed ({{ value }} only).' }, tpl: { wrap: '
', loader: '', message: ' ', preview: '{{ error }}
', errorsContainer: 'this.element = element; this.input = $(this.element); this.wrapper = null; this.preview = null; this.filenameWrapper = null; this.settings = $.extend(true, defaults, options, this.input.data()); this.errorsEvent = $.Event('dropify.errors'); this.isDisabled = false; this.isInit = false; this.file = { object: null, name: null, size: null, width: null, height: null, type: null };
if (!Array.isArray(this.settings.allowedFormats)) { this.settings.allowedFormats = this.settings.allowedFormats.split(' '); }
if (!Array.isArray(this.settings.allowedFileExtensions)) { this.settings.allowedFileExtensions = this.settings.allowedFileExtensions.split(' '); }
this.onChange = this.onChange.bind(this); this.clearElement = this.clearElement.bind(this); this.onFileReady = this.onFileReady.bind(this);
this.translateMessages(); this.createElements(); this.setContainerSize();
this.errorsEvent.errors = [];
this.input.on('change', this.onChange); }
/**
/**
Create dom elements */ Dropify.prototype.createElements = function() { this.isInit = true; this.input.wrap($(this.settings.tpl.wrap)); this.wrapper = this.input.parent();
var messageWrapper = $(this.settings.tpl.message).insertBefore(this.input); $(this.settings.tpl.errorLine).appendTo(messageWrapper);
if (this.isTouchDevice() === true) { this.wrapper.addClass('touch-fallback'); }
if (this.input.attr('disabled')) { this.isDisabled = true; this.wrapper.addClass('disabled'); }
if (this.settings.showLoader === true) { this.loader = $(this.settings.tpl.loader); this.loader.insertBefore(this.input); }
this.preview = $(this.settings.tpl.preview); this.preview.insertAfter(this.input);
if (this.isDisabled === false && this.settings.showRemove === true) { this.clearButton = $(this.settings.tpl.clearButton); this.clearButton.insertAfter(this.input); this.clearButton.on('click', this.clearElement); }
this.filenameWrapper = $(this.settings.tpl.filename); this.filenameWrapper.prependTo(this.preview.find('.dropify-infos-inner'));
if (this.settings.showErrors === true) { this.errorsContainer = $(this.settings.tpl.errorsContainer);
}
var defaultFile = this.settings.defaultFile || '';
if (defaultFile.trim() !== '') { this.file.name = this.cleanFilename(defaultFile); this.setPreview(this.isImage(), defaultFile); } };
/**
@param {Object} input */ Dropify.prototype.readFile = function(input) { if (input.files && input.files[0]) { var reader = new FileReader(); var image = new Image(); var file = input.files[0]; var srcBase64 = null; var _this = this; var eventFileReady = $.Event("dropify.fileReady");
} };
/**
@param {String} src */ Dropify.prototype.onFileReady = function(event, previewable, src) { this.input.off('dropify.fileReady', this.onFileReady);
if (this.errorsEvent.errors.length === 0) { this.setPreview(previewable, src); } else { this.input.trigger(this.errorsEvent, [this]); for (var i = this.errorsEvent.errors.length - 1; i >= 0; i--) { var errorNamespace = this.errorsEvent.errors[i].namespace; var errorKey = errorNamespace.split('.').pop(); this.showError(errorKey); }
} };
/**
/**
/**
@param {String} src */ Dropify.prototype.setPreview = function(previewable, src) { this.wrapper.removeClass('has-error').addClass('has-preview'); this.filenameWrapper.children('.dropify-filename-inner').html(this.file.name); var render = this.preview.children('.dropify-render');
this.hideLoader();
if (previewable === true) { var imgTag = $('').attr('src', src);
} else { $('').attr('class', 'dropify-font-file').appendTo(render); $('').html(this.getFileType()).appendTo(render); } this.preview.fadeIn(); };
/**
/**
@return {String} filename */ Dropify.prototype.cleanFilename = function(src) { var filename = src.split('\').pop(); if (filename == src) { filename = src.split('/').pop(); }
return src !== "" ? filename : ''; };
/**
Clear the element, events are available */ Dropify.prototype.clearElement = function() { if (this.errorsEvent.errors.length === 0) { var eventBefore = $.Event("dropify.beforeClear"); this.input.trigger(eventBefore, [this]);
} else { this.resetFile(); this.input.val(''); this.resetPreview(); } };
/**
/**
/**
/**
/**
@return {Boolean} */ Dropify.prototype.isImage = function() { if (this.settings.imgFileExtensions.indexOf(this.getFileType()) != "-1") { return true; }
return false; };
/**
@return {Boolean} */ Dropify.prototype.isFileExtensionAllowed = function () {
if (this.settings.allowedFileExtensions.indexOf('*') != "-1" || this.settings.allowedFileExtensions.indexOf(this.getFileType()) != "-1") { return true; } this.pushError("fileExtension");
return false; };
/**
/**
/**
if (size !== 0) { var unit = size.slice(-1).toUpperCase();
value = 1024;
switch(unit) { case 'T': value = value; case 'G': value = value; case 'M': value *= value; case 'K': value; } }
return value; };
/**
Validate image dimensions and format */ Dropify.prototype.validateImage = function() { if (this.settings.minWidth !== 0 && this.settings.minWidth >= this.file.width) { this.pushError("minWidth"); }
if (this.settings.maxWidth !== 0 && this.settings.maxWidth <= this.file.width) { this.pushError("maxWidth"); }
if (this.settings.minHeight !== 0 && this.settings.minHeight >= this.file.height) { this.pushError("minHeight"); }
if (this.settings.maxHeight !== 0 && this.settings.maxHeight <= this.file.height) { this.pushError("maxHeight"); }
if (this.settings.allowedFormats.indexOf(this.getImageFormat()) == "-1") { this.pushError("imageFormat"); } };
/**
@return {String} */ Dropify.prototype.getImageFormat = function() { if (this.file.width == this.file.height) { return "square"; }
if (this.file.width < this.file.height) { return "portrait"; }
if (this.file.width > this.file.height) { return "landscape"; } };
/**
/**
/**
/**
@return {String} message */ Dropify.prototype.getError = function(errorKey) { var error = this.settings.error[errorKey], value = '';
switch (errorKey) { case 'fileSize': value = this.settings.maxFileSize; break; case 'minWidth': value = this.settings.minWidth; break; case 'maxWidth': value = this.settings.maxWidth; break; case 'minHeight': value = this.settings.minHeight; break; case 'maxHeight': value = this.settings.maxHeight; break; case 'imageFormat': value = this.settings.allowedFormats.join(', '); break; case 'fileExtension': value = this.settings.allowedFileExtensions.join(', '); break; }
if (value !== '') { return error.replace('{{ value }}', value); }
return error; };
/**
/**
/**
/**
/**
$.fn[pluginName] = function(options) { this.each(function() { if (!$.data(this, pluginName)) { $.data(this, pluginName, new Dropify(this, options)); } });
};