Third-Party Plugins
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.
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.
Install lodash
via npm
npm i lodash
Install dropzone
via npm
npm i dropzone
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>
Using the most basic file upload markup, here's how file upload look.
.
Pick a file up to 2MB.
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']);
}
});
})();