ok
Direktori : /home2/selectio/www/frames-hub/html/assets/plugins/Drag-And-Drop/dist/ |
Current File : //home2/selectio/www/frames-hub/html/assets/plugins/Drag-And-Drop/dist/imageuploadify.min.js |
; (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));