diff --git a/pages/forms/advanced.html b/pages/forms/advanced.html index b761ac6d3..a4ebb1cc5 100644 --- a/pages/forms/advanced.html +++ b/pages/forms/advanced.html @@ -24,6 +24,8 @@ + + @@ -1435,7 +1437,86 @@ - + +
+
+
+
+

Dropzone.js jQuery File Upload like look

+
+
+
+
+
+ + + Add files + + + +
+
+
+ +
+
+
+ +
+
+
+
+
+ +
+
+

+ + () +

+ +
+
+
+
+
+
+
+
+ + + +
+
+
+
+
+ +
+ Visit dropzone.js documentation for more examples and information about the plugin. +
+
+ +
+
+ + + @@ -1476,6 +1557,8 @@ + + @@ -1557,6 +1640,59 @@ document.addEventListener('DOMContentLoaded', function () { window.stepper = new Stepper(document.querySelector('.bs-stepper')) }); + + // DropzoneJS Demo Code Start + Dropzone.autoDiscover = false; + + // Get the template HTML and remove it from the doumenthe template HTML and remove it from the doument + var previewNode = document.querySelector("#template"); + previewNode.id = ""; + var previewTemplate = previewNode.parentNode.innerHTML; + previewNode.parentNode.removeChild(previewNode); + + var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone + url: "/target-url", // Set the url + thumbnailWidth: 80, + thumbnailHeight: 80, + parallelUploads: 20, + previewTemplate: previewTemplate, + autoQueue: false, // Make sure the files aren't queued until manually added + previewsContainer: "#previews", // Define the container to display the previews + clickable: ".fileinput-button" // 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(".start").onclick = function() { myDropzone.enqueueFile(file); }; + }); + + // Update the total progress bar + myDropzone.on("totaluploadprogress", function(progress) { + document.querySelector("#total-progress .progress-bar").style.width = progress + "%"; + }); + + myDropzone.on("sending", function(file) { + // Show the total progress bar when upload starts + document.querySelector("#total-progress").style.opacity = "1"; + // And disable the start button + file.previewElement.querySelector(".start").setAttribute("disabled", "disabled"); + }); + + // Hide the total progress bar when nothing's uploading anymore + myDropzone.on("queuecomplete", function(progress) { + document.querySelector("#total-progress").style.opacity = "0"; + }); + + // Setup the buttons for all transfers + // The "add files" button doesn't need to be setup because the config + // `clickable` has already been specified. + document.querySelector("#actions .start").onclick = function() { + myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED)); + }; + document.querySelector("#actions .cancel").onclick = function() { + myDropzone.removeAllFiles(true); + }; + // DropzoneJS Demo Code End