Adding Filepond to Laravel (The Laravel-Mix Way)

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

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.