1. Plugins
  2. File Upload

Plugins

Tailwind CSS File Upload

Tailwind CSS File Upload plugin using Dropzone library to enable drag-and-drop functionality, previews, and progress bars.

File Upload

Installation

To get started, install Dropzone plugin via npm with Preline UI's File Upload plugin, you may skip Preline UI's plugin installation step if you are already using Preline UI as a package.

                      
                        npm i lodash dropzone @preline/file-upload

Example

Here is a basic example of a file upload with advanced features.

Drop your file here or browse

Pick a photo up to 2MB.

Basic usage

Prefer to create your own style? Here is a completely unstylized example.

Data Options

Dropzone.js

Please note that this component requires the use of the Dropzone.js plugin. Most options available in the plugin are available in our wrapper.

Check Options
Name Description Options Default value
data-hs-file-upload Activate a File Upload by specifying on an element. Should be added to the container. — —
:extensions A list of extensions and associated icons that will be added inside the container with the data-hs-file-upload-file-icon selector if they match the extension name. object Includes markup. See the code.
:autoHideTrigger If the attribute value is true, then data-hs-file-upload-trigger will disappear if at least one item is added to the upload and will appear if more than one item is not in the upload. boolean false
:singleton If the attribute value is true, then the plugin will remove any previously uploaded file. It needs for emulate simple input file behavior. boolean false

Tailwind Modifiers

Name Description
hs-file-upload-complete:* A modifier that allows you to set Tailwind classes to items that successfully uploaded.

Selectors

Name Description
data-hs-file-upload-trigger Determines which element inside the initialized element will act as a clickable element.
data-hs-file-upload-previews Determines which element inside the initialized element will act as a wrapper for uploaded items.
data-hs-file-upload-clear Determines which element inside the initialized element will act as a button that deletes all files.
data-hs-file-upload-preview Determines which element inside the initialized element will act as a template for the uploading item. Should be a template HTML element.
data-hs-file-upload-file-icon Determines which element inside the uploading item will act as a wrapper for the file icon defined in the extensions property.
data-hs-file-upload-file-name Determines which element inside the uploading item will act as a wrapper for the file name.
data-hs-file-upload-file-ext Determines which element inside the uploading item will act as a wrapper for the file extension.
data-hs-file-upload-file-size Determines which element inside the uploading item will act as a wrapper for the file size.
data-hs-file-upload-remove Determines which element inside the uploading item will act as a remove button.
data-hs-file-upload-reload Determines which element inside the uploading item will act as a re-upload button.
data-hs-file-upload-progress-bar Determines which element inside the uploading item will act as a progressbar.
data-hs-file-upload-progress-bar-pane Determines which element inside the uploading item will act as a progressbar pane, which width will dynamically increase during the uploading process.
data-hs-file-upload-progress-bar-value Determines which element inside the uploading item will act as a current progress value, which will dynamically increase during the uploading process.

Methods

The HSFileUpload object is contained within the global window object

Method Description
Public methods
destroy() Destroys the instance, removes generated markup (if any), removes added classes and attributes.
Static methods
HSFileUpload.getInstance(target, isInstance) Returns the element associated to the target.
  • target should be a Node or string (valid selector)
  • isInstance boolean. Returns the instance instead of Node if true

Destroy instance.

                      
                        const { element } = HSFileUpload.getInstance('#file-upload', true);
                        const destroyBtn = document.querySelector('#destroy-btn');
                        
                        destroyBtn.addEventListener('click', () => {
                          element.destroy();
                        });

Events

Dropzone.js

Please note that this component requires the use of the Dropzone.js plugin. Most events available in the plugin are available in our wrapper.

Check Events

When item successfully uploaded to the server event example.

                      
                        const { element } = HSFileUpload.getInstance('#hs-file-upload', true);
                        const { dropzone } = element;

                        dropzone.on('complete', () => {
                          console.log('Item uploaded!');
                        });

Demo examples

Looking for prebuilt UI components based on the Tailwind CSS? Preline UI packs hundreds of component examples for all your website needs.

Plugins UI Mockups
Check out Preline UI Components