card/merchant/assetss/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));