- Plugins
- 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.
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.
.
Pick a photo up to 2MB.
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.
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.
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.