88 lines
2.7 KiB
JavaScript
88 lines
2.7 KiB
JavaScript
(function ($) {
|
|
$.fn.dropzone = function (options) {
|
|
if (!this.length) {
|
|
return;
|
|
}
|
|
|
|
const settings = $.extend({
|
|
onDrop: undefined,
|
|
dragBackgroundColor: "#e6ffe6",
|
|
dragBorderColor: "#38fc38",
|
|
multiple: true
|
|
}, options);
|
|
|
|
// language=HTML
|
|
this.html(`
|
|
<label for="dropzoneInput" class="dropzone font-weight-normal">
|
|
<i class="fad fa-upload my-10"></i>
|
|
<span>Trascina qui i file per caricarli</span>
|
|
<span>oppure clicca nel riquadro o incolla qui</span>
|
|
<input type="file" id="dropzoneInput" class="mb-10 hidden" ${settings.multiple ? "multiple" : ""}/>
|
|
<button type="button" id="retryButton" class="btn btn-primary btn-sm mb-10 hidden">
|
|
<i class="fa fa-redo-alt"></i> Riprova
|
|
</button>
|
|
</label>
|
|
`);
|
|
|
|
const onDrop = async (e, files) => {
|
|
if (settings.onDrop) {
|
|
const $this = $(e.currentTarget);
|
|
|
|
$this.disabled();
|
|
|
|
try {
|
|
if (await settings.onDrop(e, files)) {
|
|
$this.val(null);
|
|
}
|
|
} catch (ignored) {
|
|
$this.siblings("#retryButton").removeClass("hidden");
|
|
} finally {
|
|
$this.disabled(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
const $dropzoneInput = this.find("#dropzoneInput");
|
|
|
|
this
|
|
.on("mousedown dragenter dragover", function (e) {
|
|
e.preventDefault();
|
|
|
|
$(this)
|
|
.css("background-color", settings.dragBackgroundColor)
|
|
.css("border-color", settings.dragBorderColor);
|
|
})
|
|
.on("mouseup mouseleave dragleave drop", function (e) {
|
|
e.preventDefault();
|
|
|
|
$(this)
|
|
.css("background-color", "")
|
|
.css("border-color", "");
|
|
})
|
|
.on("drop", (e) => onDrop(e, e.originalEvent.dataTransfer.files));
|
|
|
|
$dropzoneInput
|
|
.on("change", (e) => onDrop(e, $(e.currentTarget)[0].files));
|
|
|
|
this.find("#retryButton").on("click", function (e) {
|
|
e.stopPropagation();
|
|
|
|
$(this).addClass("hidden");
|
|
|
|
$dropzoneInput.trigger("change");
|
|
});
|
|
|
|
const onPaste = (e) => {
|
|
$dropzoneInput.get(0).files = e.originalEvent.clipboardData.files;
|
|
$dropzoneInput.trigger("change");
|
|
};
|
|
|
|
$(document).on("paste", onPaste);
|
|
|
|
return {
|
|
destroy: () => {
|
|
$(document).off("paste", onPaste);
|
|
}
|
|
};
|
|
};
|
|
}(jQuery)); |