/*! Image Uploader - v1.0.0 - 15/07/2019
* Copyright (c) 2019 Christian Bayer; Licensed MIT */
(function ($) {
$.fn.imageUploader = function (options) {
// Default settings
let defaults = {
preloaded: [],
imagesInputName: 'images',
preloadedInputName: 'preloaded',
label: 'Drag & Drop files here or click to browse'
};
// Get instance
let plugin = this;
// Set empty settings
plugin.settings = {};
// Plugin constructor
plugin.init = function () {
// Define settings
plugin.settings = $.extend(plugin.settings, defaults, options);
// Run through the elements
plugin.each(function (i, wrapper) {
// Create the container
let $container = createContainer();
// Append the container to the wrapper
$(wrapper).append($container);
// Set some bindings
$container.on("dragover", fileDragHover.bind($container));
$container.on("dragleave", fileDragHover.bind($container));
$container.on("drop", fileSelectHandler.bind($container));
// If there are preloaded images
if (plugin.settings.preloaded.length) {
// Change style
$container.addClass('has-files');
// Get the upload images container
let $uploadedContainer = $container.find('.uploaded');
// Set preloaded images preview
for (let i = 0; i < plugin.settings.preloaded.length; i++) {
$uploadedContainer.append(createImg(plugin.settings.preloaded[i].src, plugin.settings.preloaded[i].id, true));
}
}
});
};
let dataTransfer = new DataTransfer();
let createContainer = function () {
// Create the image uploader container
let $container = $('
', {class: 'image-uploader'}),
// Create the input type file and append it to the container
$input = $('', {
type: 'file',
id: plugin.settings.imagesInputName + '-' + random(),
name: plugin.settings.imagesInputName + '[]',
multiple: ''
}).appendTo($container),
// Create the uploaded images container and append it to the container
$uploadedContainer = $('
', {class: 'uploaded'}).appendTo($container),
// Create the text container and append it to the container
$textContainer = $('
', {
class: 'upload-text'
}).appendTo($container),
// Create the icon and append it to the text container
$i = $('', {class: 'fas fa-file-upload', text: ''}).appendTo($textContainer),
// Create the text and append it to the text container
$span = $('', {text: plugin.settings.label}).appendTo($textContainer);
// Listen to container click and trigger input file click
$container.on('click', function (e) {
// Prevent browser default event and stop propagation
prevent(e);
// Trigger input click
$input.trigger('click');
});
// Stop propagation on input click
$input.on("click", function (e) {
e.stopPropagation();
});
// Listen to input files changed
$input.on('change', fileSelectHandler.bind($container));
return $container;
};
let prevent = function (e) {
// Prevent browser default event and stop propagation
e.preventDefault();
e.stopPropagation();
};
let createImg = function (src, id) {
// Create the upladed image container
let $container = $('
', {class: 'uploaded-image'}),
// Create the img tag
$img = $('', {src: src}).appendTo($container),
// Create the delete button
$button = $('