Inisital Asset Commit
This commit is contained in:
Hickmeister
109
assets/plugins/Drag-And-Drop/dist/imageuploadify.min.css
vendored
Normal file
109
assets/plugins/Drag-And-Drop/dist/imageuploadify.min.css
vendored
Normal file
@@ -0,0 +1,109 @@
|
||||
.imageuploadify {
|
||||
border: 2px dashed #d2d2d2;
|
||||
position: relative;
|
||||
min-height: 350px;
|
||||
min-width: 250px;
|
||||
max-width: 1000px;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
background-color: #fff;
|
||||
color: #007bff
|
||||
}
|
||||
.imageuploadify .imageuploadify-overlay {
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
font-size: 7em;
|
||||
background-color: rgba(242, 242, 242, .7);
|
||||
text-align: center;
|
||||
pointer-events: none
|
||||
}
|
||||
.imageuploadify .imageuploadify-overlay i {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
pointer-events: none
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list {
|
||||
display: inline-block
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list i {
|
||||
display: block;
|
||||
font-size: 7em;
|
||||
text-align: center;
|
||||
margin-top: .5em;
|
||||
padding-bottom: 12px
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list span.imageuploadify-message {
|
||||
font-size: 24px;
|
||||
border-top: 1px solid #007bff;
|
||||
border-bottom: 1px solid #007bff;
|
||||
padding: 10px;
|
||||
display: inline-block
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list button.btn-default {
|
||||
display: block;
|
||||
color: #007bff;
|
||||
border-color: #007bff;
|
||||
border-radius: 1em;
|
||||
margin: 25px auto;
|
||||
width: 100%;
|
||||
max-width: 500px
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list .imageuploadify-container {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1em;
|
||||
float: left;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 0 4px 0 #888
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list .imageuploadify-container button.btn-danger {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 3px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 15px;
|
||||
font-size: 10px;
|
||||
line-height: 1.42;
|
||||
padding: 2px 0;
|
||||
text-align: center;
|
||||
z-index: 3
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list .imageuploadify-container img {
|
||||
height: 100px;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: auto
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list .imageuploadify-container .imageuploadify-details {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
background: rgba(255, 255, 255, .5);
|
||||
z-index: 2;
|
||||
opacity: 0
|
||||
}
|
||||
.imageuploadify .imageuploadify-images-list .imageuploadify-container .imageuploadify-details span {
|
||||
display: block
|
||||
}
|
||||
225
assets/plugins/Drag-And-Drop/dist/imageuploadify.min.js
vendored
Normal file
225
assets/plugins/Drag-And-Drop/dist/imageuploadify.min.js
vendored
Normal file
@@ -0,0 +1,225 @@
|
||||
;
|
||||
(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));
|
||||
Reference in New Issue
Block a user