<p class="text-lg font-bold mb-6">Multiple upload</p>
<div class="mb-6">
  <div id="imageUpload" class="dropzone multiple-dropzone mb-6">
    <div class="dz-message" data-dz-message>
      <div class="pre-upload flex ioajsklehsnm yhansklopals">
        <i class="mx-auto text-gray-500 inline-block size-10 bi bi-cloud-arrow-up"></i>
        <div class="py-3"><span>Drag & drop images here</span></div>
      </div>
      <div class="pre-upload text-center">
        <button class="py-1.5 px-3 inline-block text-center rounded leading-normal text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 me-2 dark:bg-gray-300">Browse file</button>
      </div>
      <span class="after-upload">+</span>
    </div>
  </div>
</div>

<p class="text-lg font-bold mb-6">Single upload</p>
<div class="mb-6">
  <div id="imageSingle" class="dropzone single-dropzone mb-6">
    <div class="dz-message" data-dz-message>
      <div class="pre-upload flex ioajsklehsnm yhansklopals">
        <i class="mx-auto text-gray-500 inline-block size-10 bi bi-cloud-arrow-up"></i>
        <div class="py-3"><span>Drag & drop images here</span></div>
      </div>
      <div class="pre-upload text-center">
        <button class="py-1.5 px-3 inline-block text-center rounded leading-normal text-gray-800 bg-gray-100 border border-gray-100 hover:text-gray-900 hover:bg-gray-200 hover:ring-0 hover:border-gray-200 focus:bg-gray-200 focus:border-gray-200 focus:outline-none focus:ring-0 me-2 dark:bg-gray-300">Browse file</button>
      </div>
    </div>
  </div>
</div>

<script src="../vendors/dropzone/dist/dropzone-min.js"></script><!-- uploader images -->
<script type="text/javascript">
  // Dropzone uploader
  const myUploader = function () {
    // dropzone
    const dropzone_class = document.querySelectorAll(".multiple-dropzone");

    if ( dropzone_class != null) {
      for( let i = 0; i < dropzone_class.length; i++){
        const myDropzone = new Dropzone( dropzone_class[i], {
          addRemoveLinks: true,
          uploadMultiple: true,
          parallelUploads: 100,
          maxFiles: 5,
          paramName: 'file',
          clickable: true,
          url: '#'
        });
        Dropzone.autoDiscover = false;
      }
    }

    const dropzone_single = document.querySelectorAll(".single-dropzone");
    if ( dropzone_single != null) {
      for( let i = 0; i < dropzone_single.length; i++){
        const myDropzone = new Dropzone( dropzone_single[i], {
          addRemoveLinks: true,
          uploadMultiple: false,
          maxFiles: 1,
          init: function() {
            this.on('addedfile', function(file) {
              if (this.files.length > 1) {
                this.removeFile(this.files[0]);
              }
            });
          },
          paramName: 'file',
          clickable: true,
          url: '#'
        });
        Dropzone.autoDiscover = false;
      }
    }
  }
  myUploader();
</script>