adding files of assets
This commit is contained in:
Arjun Patel
@@ -0,0 +1,187 @@
|
||||
"use strict";
|
||||
|
||||
// Class definition
|
||||
var KTFormsDropzoneJSDemos = function () {
|
||||
// Private functions
|
||||
var exampleBasic = function () {
|
||||
// For more info about Dropzone plugin visit: https://www.dropzonejs.com/#usage
|
||||
var myDropzone = new Dropzone("#kt_dropzonejs_example_1", {
|
||||
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
|
||||
paramName: "file", // The name that will be used to transfer the file
|
||||
maxFiles: 10,
|
||||
maxFilesize: 10, // MB
|
||||
addRemoveLinks: true,
|
||||
accept: function (file, done) {
|
||||
if (file.name == "wow.jpg") {
|
||||
done("Naha, you don't.");
|
||||
} else {
|
||||
done();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var exampleQueue = function () {
|
||||
// set the dropzone container id
|
||||
const id = "#kt_dropzonejs_example_2";
|
||||
const dropzone = document.querySelector(id);
|
||||
|
||||
// set the preview element template
|
||||
var previewNode = dropzone.querySelector(".dropzone-item");
|
||||
previewNode.id = "";
|
||||
var previewTemplate = previewNode.parentNode.innerHTML;
|
||||
previewNode.parentNode.removeChild(previewNode);
|
||||
|
||||
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
|
||||
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
|
||||
parallelUploads: 20,
|
||||
previewTemplate: previewTemplate,
|
||||
maxFilesize: 1, // Max filesize in MB
|
||||
autoQueue: false, // Make sure the files aren't queued until manually added
|
||||
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
|
||||
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
|
||||
});
|
||||
|
||||
myDropzone.on("addedfile", function (file) {
|
||||
// Hookup the start button
|
||||
file.previewElement.querySelector(id + " .dropzone-start").onclick = function () { myDropzone.enqueueFile(file); };
|
||||
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
|
||||
dropzoneItems.forEach(dropzoneItem => {
|
||||
dropzoneItem.style.display = '';
|
||||
});
|
||||
dropzone.querySelector('.dropzone-upload').style.display = "inline-block";
|
||||
dropzone.querySelector('.dropzone-remove-all').style.display = "inline-block";
|
||||
});
|
||||
|
||||
// Update the total progress bar
|
||||
myDropzone.on("totaluploadprogress", function (progress) {
|
||||
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.style.width = progress + "%";
|
||||
});
|
||||
});
|
||||
|
||||
myDropzone.on("sending", function (file) {
|
||||
// Show the total progress bar when upload starts
|
||||
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.style.opacity = "1";
|
||||
});
|
||||
// And disable the start button
|
||||
file.previewElement.querySelector(id + " .dropzone-start").setAttribute("disabled", "disabled");
|
||||
});
|
||||
|
||||
// Hide the total progress bar when nothing's uploading anymore
|
||||
myDropzone.on("complete", function (progress) {
|
||||
const progressBars = dropzone.querySelectorAll('.dz-complete');
|
||||
|
||||
setTimeout(function () {
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.querySelector('.progress-bar').style.opacity = "0";
|
||||
progressBar.querySelector('.progress').style.opacity = "0";
|
||||
progressBar.querySelector('.dropzone-start').style.opacity = "0";
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Setup the buttons for all transfers
|
||||
dropzone.querySelector(".dropzone-upload").addEventListener('click', function () {
|
||||
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
|
||||
});
|
||||
|
||||
// Setup the button for remove all files
|
||||
dropzone.querySelector(".dropzone-remove-all").addEventListener('click', function () {
|
||||
dropzone.querySelector('.dropzone-upload').style.display = "none";
|
||||
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
|
||||
myDropzone.removeAllFiles(true);
|
||||
});
|
||||
|
||||
// On all files completed upload
|
||||
myDropzone.on("queuecomplete", function (progress) {
|
||||
const uploadIcons = dropzone.querySelectorAll('.dropzone-upload');
|
||||
uploadIcons.forEach(uploadIcon => {
|
||||
uploadIcon.style.display = "none";
|
||||
});
|
||||
});
|
||||
|
||||
// On all files removed
|
||||
myDropzone.on("removedfile", function (file) {
|
||||
if (myDropzone.files.length < 1) {
|
||||
dropzone.querySelector('.dropzone-upload').style.display = "none";
|
||||
dropzone.querySelector('.dropzone-remove-all').style.display = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
var exampleQueueAutoUpload = function () {
|
||||
// set the dropzone container id
|
||||
const id = "#kt_dropzonejs_example_3";
|
||||
const dropzone = document.querySelector(id);
|
||||
|
||||
// set the preview element template
|
||||
var previewNode = dropzone.querySelector(".dropzone-item");
|
||||
previewNode.id = "";
|
||||
var previewTemplate = previewNode.parentNode.innerHTML;
|
||||
previewNode.parentNode.removeChild(previewNode);
|
||||
|
||||
var myDropzone = new Dropzone(id, { // Make the whole body a dropzone
|
||||
url: "https://preview.keenthemes.com/api/dropzone/void.php", // Set the url for your upload script location
|
||||
parallelUploads: 20,
|
||||
maxFilesize: 1, // Max filesize in MB
|
||||
previewTemplate: previewTemplate,
|
||||
previewsContainer: id + " .dropzone-items", // Define the container to display the previews
|
||||
clickable: id + " .dropzone-select" // Define the element that should be used as click trigger to select files.
|
||||
});
|
||||
|
||||
|
||||
myDropzone.on("addedfile", function (file) {
|
||||
// Hookup the start button
|
||||
const dropzoneItems = dropzone.querySelectorAll('.dropzone-item');
|
||||
dropzoneItems.forEach(dropzoneItem => {
|
||||
dropzoneItem.style.display = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Update the total progress bar
|
||||
myDropzone.on("totaluploadprogress", function (progress) {
|
||||
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.style.width = progress + "%";
|
||||
});
|
||||
});
|
||||
|
||||
myDropzone.on("sending", function (file) {
|
||||
// Show the total progress bar when upload starts
|
||||
const progressBars = dropzone.querySelectorAll('.progress-bar');
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.style.opacity = "1";
|
||||
});
|
||||
});
|
||||
|
||||
// Hide the total progress bar when nothing"s uploading anymore
|
||||
myDropzone.on("complete", function (progress) {
|
||||
const progressBars = dropzone.querySelectorAll('.dz-complete');
|
||||
|
||||
setTimeout(function () {
|
||||
progressBars.forEach(progressBar => {
|
||||
progressBar.querySelector('.progress-bar').style.opacity = "0";
|
||||
progressBar.querySelector('.progress').style.opacity = "0";
|
||||
});
|
||||
}, 300);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
// Public Functions
|
||||
init: function (element) {
|
||||
exampleBasic();
|
||||
exampleQueue();
|
||||
exampleQueueAutoUpload();
|
||||
}
|
||||
};
|
||||
}();
|
||||
|
||||
// On document ready
|
||||
KTUtil.onDOMContentLoaded(function () {
|
||||
KTFormsDropzoneJSDemos.init();
|
||||
});
|
||||
Reference in New Issue
Block a user