Untitled
unknown
plain_text
2 months ago
3.5 kB
1
Indexable
Never
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="gallery" class="collapse" role="tabpanel" aria-labelledby="galleryHead" data-parent="#accordion"> <div class="card-body"> <div class="col-md-12 mt-4 text-center"> <div id="dropzone" class="dropzone"></div> </div> </div> </div> </body> </html> <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/dropzone.css" /> <script> // disable autodiscover Dropzone.autoDiscover = false; var myDropzone = new Dropzone("#dropzone", { url: "url-is-here", method: "POST", paramName: "file", autoProcessQueue: false, acceptedFiles: "image/*", maxFiles: 10, maxFilesize: 15, // MB uploadMultiple: true, parallelUploads: 100, // use it with uploadMultiple createImageThumbnails: true, //thumbnailWidth: 140, //thumbnailHeight: 140, addRemoveLinks: true, timeout: 180000, dictRemoveFileConfirmation: "Dosyayı silmek istediğinize emin misiniz?", // ask before removing file // Language Strings dictFileTooBig: "Dosya çok büyük ({{filesize}}mb). En büyük dosya boyutu {{maxFilesize}}mb", dictInvalidFileType: "Sadece resim dosyaları desteklenmektedir !", dictCancelUpload: "İptal", dictRemoveFile: "Sil", dictMaxFilesExceeded: "Only {{maxFiles}} files are allowed", dictDefaultMessage: "<br><i class='fa fa-file-import' style='font-size: 20px !important;'></i> <span style='font-size: 16px;'> Galeri</span>", }); myDropzone.on("addedfile", function (file) { //console.log(file); }); myDropzone.on("removedfile", function (file) { // console.log(file); }); // Add mmore data to send along with the file as POST data. (optional) myDropzone.on("sending", function (file, xhr, formData) { formData.append("csrf_token", '<?= $csrf_token; ?>'); }); myDropzone.on("error", function (file, response) { console.log(response); }); // on success myDropzone.on("successmultiple", function (file, response) { // get response from successful ajax request console.log(response); // submit the form after images upload // (if u want yo submit rest of the inputs in the form) document.getElementById("dropzone-form").submit(); }); // button trigger for processingQueue var submitDropzone = document.getElementById("submit-dropzone"); submitDropzone.addEventListener("click", function (e) { $(this).attr('disabled', 'disabled'); $(this).html('<div class="text-center"><div class="spinner-border" role="status"><span class="sr-only">...</span></div></div>'); $('#loadInfo').fadeIn(); // Make sure that the form isn't actually being sent. e.preventDefault(); e.stopPropagation(); if (myDropzone.files != "") { // console.log(myDropzone.files); myDropzone.processQueue(); } else { // if no file submit the form document.getElementById("dropzone-form").submit(); } }); </script>