225 lines
9.3 KiB
JavaScript
Executable File
225 lines
9.3 KiB
JavaScript
Executable File
;
|
||
(function($, window, document, undefined) {
|
||
window.addEventListener("dragover", function(e) {
|
||
e = e || event;
|
||
e.preventDefault();
|
||
}, false);
|
||
window.addEventListener("drop", function(e) {
|
||
e = e || event;
|
||
e.preventDefault();
|
||
}, false);
|
||
const compareMimeType = (mimeTypes, fileType, formatFile) => {
|
||
if (mimeTypes.length < 2 && mimeTypes[0] === "*") {
|
||
return true;
|
||
}
|
||
for (let index = 1; index < mimeTypes.length; index += 3) {
|
||
if (mimeTypes[index + 1] === "*" && fileType.search(new RegExp(mimeTypes[index])) != -1) {
|
||
return true;
|
||
} else if (mimeTypes[index + 1] && mimeTypes[index + 1] != "*" && fileType.search(new RegExp("\\*" + mimeTypes[index + 1] + "\\*")) != -1) {
|
||
return true;
|
||
} else if (mimeTypes[index + 1] && mimeTypes[index + 1] != "*" && fileType.search(new RegExp(mimeTypes[index + 1])) != -1) {
|
||
return true;
|
||
} else if (mimeTypes[index + 1] === "" && (fileType.search(new RegExp(mimeTypes[index])) != -1 || formatFile.search(new RegExp(mimeTypes[index])) != -1)) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
$.fn.imageuploadify = function(opts) {
|
||
const settings = $.extend({}, $.fn.imageuploadify.defaults, opts);
|
||
this.each(function() {
|
||
const self = this;
|
||
if (!$(self).attr("multiple")) {
|
||
return;
|
||
}
|
||
let accept = $(self).attr("accept") ? $(self).attr("accept").replace(/\s/g, "").split(",") : null;
|
||
let result = [];
|
||
accept.forEach((item) => {
|
||
let regexp;
|
||
if (item.search(/\//) != -1) {
|
||
regexp = new RegExp("([A-Za-z-.]*)\/([A-Za-z-*.]*)", "g");
|
||
} else {
|
||
regexp = new RegExp("\.([A-Za-z-]*)()", "g");
|
||
}
|
||
const r = regexp.exec(item);
|
||
result = result.concat(r);
|
||
});
|
||
let totalFiles = [];
|
||
let counter = 0;
|
||
let dragbox = $(`<div class="imageuploadify well"><div class="imageuploadify-overlay"><i class="fa fa-picture-o"></i></div><div class="imageuploadify-images-list text-center"><i class="bx bxs-cloud-upload"></i><span class='imageuploadify-message'>Drag&Drop Your File(s)Here To Upload</span><button type="button"class="btn btn-default">or select file to upload</button></div></div>`);
|
||
let overlay = dragbox.find(".imageuploadify-overlay");
|
||
let uploadIcon = dragbox.find(".imageuploadify-overlay i");
|
||
let imagesList = dragbox.find(".imageuploadify-images-list");
|
||
let addIcon = dragbox.find(".imageuploadify-images-list i");
|
||
let addMsg = dragbox.find(".imageuploadify-images-list span");
|
||
let button = dragbox.find(".imageuploadify-images-list button");
|
||
const retrieveFiles = (files) => {
|
||
for (let index = 0; index < files.length; ++index) {
|
||
if (!accept || compareMimeType(result, files[index].type, /(?:\.([^.]+))?$/.exec(files[index].name)[1])) {
|
||
const id = Math.random().toString(36).substr(2, 9);
|
||
readingFile(id, files[index]);
|
||
totalFiles.push({
|
||
id: id,
|
||
file: files[index]
|
||
});
|
||
}
|
||
}
|
||
}
|
||
const readingFile = (id, file) => {
|
||
const fReader = new FileReader();
|
||
const width = dragbox.width();
|
||
const boxesNb = Math.floor(width / 100);
|
||
const marginSize = Math.floor((width - (boxesNb * 100)) / (boxesNb + 1));
|
||
let container = $(`<div class='imageuploadify-container'><button type='button'class='btn btn-danger bx bx-x'></button><div class='imageuploadify-details'><span>${file.name}</span><span>${file.type}</span><span>${file.size}</span></div></div>`);
|
||
let details = container.find(".imageuploadify-details");
|
||
let deleteBtn = container.find("button");
|
||
container.css("margin-left", marginSize + "px");
|
||
details.hover(function() {
|
||
$(this).css("opacity", "1");
|
||
}).mouseleave(function() {
|
||
$(this).css("opacity", "0");
|
||
});
|
||
if (file.type && file.type.search(/image/) != -1) {
|
||
fReader.onloadend = function(e) {
|
||
let image = $("<img>");
|
||
image.attr("src", e.target.result);
|
||
container.append(image);
|
||
imagesList.append(container);
|
||
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+4)").css("margin-left", marginSize + "px");
|
||
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+3)").css("margin-right", marginSize + "px");
|
||
};
|
||
} else if (file.type) {
|
||
let type = "<i class='fa fa-file'></i>";
|
||
if (file.type.search(/audio/) != -1) {
|
||
type = "<i class='fa fa-file-audio-o'></i>";
|
||
} else if (file.type.search(/video/) != -1) {
|
||
type = "<i class='fa fa-file-video-o'></i>";
|
||
}
|
||
fReader.onloadend = function(e) {
|
||
let span = $("<span>" + type + "</span>");
|
||
span.css("font-size", "5em");
|
||
container.append(span);
|
||
imagesList.append(container);
|
||
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+4)").css("margin-left", marginSize + "px");
|
||
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+3)").css("margin-right", marginSize + "px");
|
||
};
|
||
}
|
||
deleteBtn.on("click", function() {
|
||
$(this.parentElement).remove();
|
||
for (let index = 0; totalFiles.length > index; ++index) {
|
||
if (totalFiles[index].id === id) {
|
||
totalFiles.splice(index, 1);
|
||
break;
|
||
}
|
||
}
|
||
});
|
||
fReader.readAsDataURL(file);
|
||
};
|
||
const disableMouseEvents = () => {
|
||
overlay.css("display", "flex");
|
||
dragbox.css("border-color", "#3AA0FF");
|
||
button.css("pointer-events", "none");
|
||
addMsg.css("pointer-events", "none");
|
||
addIcon.css("pointer-events", "none");
|
||
imagesList.css("pointer-events", "none");
|
||
}
|
||
const enableMouseEvents = () => {
|
||
overlay.css("display", "none");
|
||
dragbox.css("border-color", "rgb(210, 210, 210)");
|
||
button.css("pointer-events", "initial");
|
||
addMsg.css("pointer-events", "initial");
|
||
addIcon.css("pointer-events", "initial");
|
||
imagesList.css("pointer-events", "initial");
|
||
}
|
||
button.mouseenter(function onMouseEnter(event) {
|
||
button.css("background", "#3AA0FF").css("color", "white");
|
||
}).mouseleave(function onMouseLeave() {
|
||
button.css("background", "white").css("color", "#3AA0FF");
|
||
});
|
||
button.on("click", function onClick(event) {
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
$(self).click();
|
||
});
|
||
dragbox.on("dragenter", function onDragenter(event) {
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
counter++;
|
||
disableMouseEvents();
|
||
});
|
||
dragbox.on("dragleave", function onDragLeave(event) {
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
counter--;
|
||
if (counter === 0) {
|
||
enableMouseEvents();
|
||
}
|
||
});
|
||
dragbox.on("drop", function onDrop(event) {
|
||
event.stopPropagation();
|
||
event.preventDefault();
|
||
enableMouseEvents();
|
||
const files = event.originalEvent.dataTransfer.files;
|
||
retrieveFiles(files);
|
||
});
|
||
$(window).bind("resize", function(e) {
|
||
window.resizeEvt;
|
||
$(window).resize(function() {
|
||
clearTimeout(window.resizeEvt);
|
||
window.resizeEvt = setTimeout(function() {
|
||
const width = dragbox.width();
|
||
const boxesNb = Math.floor(width / 100);
|
||
const marginSize = Math.floor((width - (boxesNb * 100)) / (boxesNb + 1));
|
||
let containers = imagesList.find(".imageuploadify-container");
|
||
for (let index = 0; index < containers.length; ++index) {
|
||
$(containers[index]).css("margin-right", "0px");
|
||
$(containers[index]).css("margin-left", marginSize + "px");
|
||
}
|
||
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+4)").css("margin-left", marginSize + "px");
|
||
imagesList.find(".imageuploadify-container:nth-child(" + boxesNb + "n+3)").css("margin-right", marginSize + "px");
|
||
}, 500);
|
||
});
|
||
})
|
||
$(self).on("change", function onChange() {
|
||
const files = this.files;
|
||
retrieveFiles(files);
|
||
});
|
||
$(self).closest("form").on("submit", function(event) {
|
||
event.stopPropagation();
|
||
event.preventDefault(event);
|
||
const inputs = this.querySelectorAll("input, textarea, select, button");
|
||
const formData = new FormData();
|
||
for (let index = 0; index < inputs.length; ++index) {
|
||
if (inputs[index].tagName === "SELECT" && inputs[index].hasAttribute("multiple")) {
|
||
const options = inputs[index].options;
|
||
for (let i = 0; options.length > i; ++i) {
|
||
if (options[i].selected) {
|
||
formData.append(inputs[index].getAttribute("name"), options[i].value);
|
||
}
|
||
}
|
||
} else if (!inputs[index].getAttribute("type") || ((inputs[index].getAttribute("type").toLowerCase()) !== "checkbox" && (inputs[index].getAttribute("type").toLowerCase()) !== "radio") || inputs[index].checked) {
|
||
formData.append(inputs[index].name, inputs[index].value);
|
||
} else if ($(inputs[index]).getAttribute("type") != "file") {
|
||
formData.append(inputs[index].name, inputs[index].value);
|
||
}
|
||
}
|
||
for (var i = 0; i < totalFiles.length; i++) {
|
||
formData.append(self.name, totalFiles[i].file);
|
||
}
|
||
var xhr = new XMLHttpRequest();
|
||
xhr.onreadystatechange = function(e) {
|
||
if (xhr.status == 200 && xhr.readyState === XMLHttpRequest.DONE) {
|
||
window.location.replace(xhr.responseURL);
|
||
}
|
||
}
|
||
xhr.open("POST", $(this).attr("action"), true);
|
||
xhr.send(formData);
|
||
return false;
|
||
});
|
||
$(self).hide();
|
||
dragbox.insertAfter(this);
|
||
});
|
||
return this;
|
||
};
|
||
$.fn.imageuploadify.defaults = {};
|
||
}(jQuery, window, document)); |