Drag’ n’ Drop File Uploads

@@include("@@autopath/partials/docs/docs-sidebar.html", { "link": "dropzone.html" })

How to use

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

        
          <script src="./node_modules/dropzone/dist/min/dropzone.min.js"></script>

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

        
          <script src="./assets/js/hs.dropzone.js"></script>

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

        
          <script>
            (function() {
              // INITIALIZATION OF DROPZONE
              // =======================================================
              HSCore.components.HSDropzone.init('.js-dropzone')
            })();
          </script>

              
                <form>
                  <!-- Dropzone -->
                  <div id="basicExampleDropzone" class="js-dropzone row dz-dropzone dz-dropzone-card">
                    <div class="dz-message">
                      <img class="avatar avatar-xl avatar-4x3 mb-3" src="@@autopath/assets/svg/illustrations/oc-browse.svg" alt="Image Description">

                      <h5>Drag and drop your file here</h5>

                      <p class="mb-2">or</p>

                      <span class="btn btn-white btn-sm">Browse files</span>
                    </div>
                  </div>
                  <!-- End Dropzone -->
                </form>

Preview
HTML

              
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>

                <!-- Modal -->
                <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLabel">Dropzone</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                      </div>

                      <div class="modal-body">
                        <form>
                          <!-- Dropzone -->
                          <div id="modalDropzone" class="js-dropzone row dz-dropzone dz-dropzone-card">
                            <div class="dz-message">
                              <img class="avatar avatar-xl avatar-4x3 mb-3" src="@@autopath/assets/svg/illustrations/oc-browse.svg" alt="Image Description">

                              <h5>Drag and drop your file here</h5>

                              <p class="mb-2">or</p>

                              <span class="btn btn-white btn-sm">Browse files</span>
                            </div>
                          </div>
                          <!-- End Dropzone -->
                        </form>
                      </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-primary">Save changes</button>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- End Modal -->

Methods

Parameters	Description	Default value
`allowTypes`	Supported file types. If empty all supported.	`[]`
`maxFileSize`	Max size for uploading file.	`1024`
`mode`	Supported two mods (image/simple). image - show image after uploading. simple - show file name after uploading.	`simple`
`targetAttr`	Element selector with src for `image` mode.	`null`
`textTarget`	Element selector for `simple` mode.	`null`
`resetTarget`	Element selector to reset form.	`null`
`errorMessage`	Error message text if the file size is larger than the allowed.	`'File is too big!'`
`typeErrorMessage`	Error message text if file type is not supported.	`'Unsupported file type'`

How to use

Basic example

Drag and drop your file here

Modal example

Methods