- Components
- FileUpload
Third-Party Plugins
Tailwind CSS File Upload
File Upload enhances web forms with a Tailwind CSS-compatible, user-friendly interface that supports drag-and-drop, previews, and progress bars. It allows simultaneous multiple file uploads with options for automatic or manual submission and validation of file types and sizes.
Requires Additional Installation
Note that this component requires the use of the third-party Dropzone plugin.
Requires JS
Note that this component requires the use of Preline UI's File Upload plugin, else you can skip this message if you are already using Preline UI as a package.
How to use
-
Install Dropzone.
Install
dropzonevia npmnpm i dropzone -
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>Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already:
npm i lodash
Example
Using the most basic file upload markup, here's how file upload look.
.
Pick a file up to 2MB.
Error
Error handling. Will throw an error if the file size exceeds 1 MB.
.
Pick a file up to 2MB.
(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']);
}
});
})();
