DEV Community

Dendi Handian
Dendi Handian

Posted on • Updated on

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
Enter fullscreen mode Exit fullscreen mode

The file input component

The input form is the plain one like this:

<input type="file" />
Enter fullscreen mode Exit fullscreen mode

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); 
});

...
Enter fullscreen mode Exit fullscreen mode

In above code, We parse any input file type element in the page document body.

Build assets

npm run development
Enter fullscreen mode Exit fullscreen mode

or

npm run production
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)