Dropzone

Dropzone.js is a light weight JavaScript library that turns an HTML element into a dropzone. This means that a user can drag and drop a file onto it, and the file gets uploaded to the server via AJAX.

Documentation for Dropzone
Single File Upload

Dropzone requires a valid server-side url for the file upload. You can easily pass it through data-options attribute.

              
                data-options!={ url: 'valid/url'}
...
Drop your file here
                      
                        <div class="dropzone dropzone-single p-0" data-dropzone data-options='{"url":"valid/url","maxFiles":1,"dictDefaultMessage":"Choose or Drop a file here"}'>
                          <div class="fallback"><input type="file" name="file"></div>
                          <div class="dz-preview dz-preview-single">
                            <div class="dz-preview-cover dz-complete"><img class="dz-preview-img" src="..." alt="..." data-dz-thumbnail=""><a class="dz-remove text-danger" href="#!" data-dz-remove><span class="fas fa-times"></span></a>
                              <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
                            </div>
                          </div>
                          <div class="dz-message" data-dz-message>
                            <div class="dz-message-text align-items-center d-flex justify-content-center"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-upload me-2" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
                              <polyline points="9 15 12 12 15 15" />
                              <line x1="12" y1="12" x2="12" y2="21" />
                            </svg>Drop your file here</div>
                          </div>
                        </div>
Multiple File Upload
Drop your file here
...

Remove File
                      
                        <form class="dropzone dropzone-multiple p-0" id="my-awesome-dropzone" data-dropzone action="../assets/img/">
                          <div class="fallback"><input name="file" type="file" multiple></div>
                          <div class="align-items-center d-flex justify-content-center dz-message" data-dz-message>
                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-cloud-upload me-2" width="40" height="40" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                              <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                              <path d="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-1" />
                              <polyline points="9 15 12 12 15 15" />
                              <line x1="12" y1="12" x2="12" y2="21" />
                            </svg>Drop your file here</div>
                          <div class="dz-preview dz-preview-multiple m-0 d-flex flex-column">
                            <div class="d-flex media align-items-center mb-3 pb-3 border-bottom btn-reveal-trigger"><img class="dz-image" src="..." alt="..." data-dz-thumbnail>
                              <div class="flex-1 d-flex flex-between-center">
                                <div>
                                  <h6 data-dz-name></h6>
                                  <div class="d-flex align-items-center">
                                    <p class="mb-0 fs--1 text-400 lh-1" data-dz-size></p>
                                    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress=""></span></div>
                                  </div>
                                </div>
                                <div class="dropdown font-sans-serif"><button class="btn btn-link text-600 btn-sm dropdown-toggle btn-reveal dropdown-caret-none" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-ellipsis-h"></span></button>
                                  <div class="dropdown-menu dropdown-menu-right border py-2"><a class="dropdown-item" href="#!" data-dz-remove>Remove File</a></div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </form>
How to use?

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

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

Copy-paste the following <link> near the end of your pages under Muse Plugins CSS to enable it.

              
                <link rel="stylesheet" href="../assets/vendor/dropzone/dist/min/dropzone.min.css">