Untitled

<!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;'>&nbsp;&nbsp;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>
Editor is loading...