Filepond is a javascript library that makes your <input type="file">
element looks silky and smooth and has ability to perform drag and drop, a great addition for your app. Here I want to show you how it's done in Laravel app.
Prerequisites to code along
Have your own laravel
app to follow along, you have used JS and SASS/SCSS using laravel-mix
in the app.
Installing Filepond
The NPM command:
npm install filepond --save-dev
The file input component
The input form is the plain one like this:
<input type="file" />
Just put anywhere in the page.
Applying Filepond to the file input component
In your JS entrypoint file, we can parse the component input into the filepond form component on the page document load event:
...
import { parse } from 'filepond';
// ref: https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/#document-ready
var ready = (callback) => {
if (document.readyState != "loading") callback();
else document.addEventListener("DOMContentLoaded", callback);
}
ready(() => {
parse(document.body);
});
...
In above code, We parse any input file type element in the page document body.
Build assets
npm run development
or
npm run production
Test
Well, see if the filepond is implemented perfectly.
More about Filepond
Filepond isn't only about styling your file form, but it come with others nice features. One of them is able to do asyncronus file upload to the server when you selected the file in form. I will try to cover this later in the future post.
Top comments (0)