Tailwind CSS File Upload

How to use

1. Install Lodash.

   Install lodash via npm

   npm i lodash

2. Install Dropzone.

   Install dropzone via npm

   npm i dropzone

3. Add Lodash and Dropzone to the page.

   Include the JavaScript <script> near the end of your </body> tag:

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

Basic usage

Error

Error handling. Will throw an error if the file size exceeds 1 MB.

                      
                        (function() {
                          const { element } = HSFileUpload.getInstance('#hs-file-upload-with-limited-file-size', true);
                  
                          element.dropzone.on('error', (file, response) => {
                            if (file.size > element.concatOptions.maxFilesize * 1024 * 1024) {
                              const successEls = document.querySelectorAll('[data-hs-file-upload-file-success]');
                              const errorEls = document.querySelectorAll('[data-hs-file-upload-file-error]');
                  
                              successEls.forEach((el) => el.style.display = 'none');
                              errorEls.forEach((el) => el.style.display = '');
                              HSStaticMethods.autoInit(['tooltip']);
                            }
                          });
                        })();
                      
                    

Gallery

Using file upload as a gallery.

Single Image Upload

Using file upload as a single image upload.

Input File

Using file upload as a simple file upload.