Install FilePond in a Laravel project, how?

Question

I'm developing my first Laravel based webapp. I need to upload some file so I decided to use FilePond JavaScript library. I tried to install in my project via npm following the documentation so I did npm i filepond --save to install main library and repeated for some plugins... To use the library the documentations says to import with import * as FilePond from 'filepond'; but where must I write these imports? I wrote in /resources/js/app.js but it doesn't work...

Can anyone explain me how to insert correctly FilePond in a Laravel 6 project?

I solved the problem, in my /resources/views/layout/app.blade.php (my main layout file) I had `` in head section, now moved just before `
` and removed defer. Thank you! — icolumbro, Jan 28 '20 at 16:58

score 7 · Answer 1 · edited Sep 09 '20 at 07:36

To install FilePond in Laravel do the following

In /resources/js/app.js import and assign it to global window object as follows:

import * as FilePond from 'filepond';

window.FilePond = FilePond;

To import the styles in /resources/css/main.css:

@import "~filepond/dist/filepond.min.css";

And now anywhere in your blade files you can simply get the FilePond instance.

Example using AlpineJs in blade file.

<div x-data x-init="FilePond.create($refs.input);">
    <input type="file" x-ref="input">
</div>

Darryl E. Clarke · Answer 2 · 2020-01-28T18:03:06.297

In /resources/js/app.js I have:

import * as FilePond from 'filepond';

require('./bootstrap');

$(document).ready(function () {
    // executes when HTML-Document is loaded and DOM is ready
    console.log("Hi ");

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
});

In /resources/sass/app.scss I have:

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import '~filepond/dist/filepond.min.css';

In my welcome.blade.php I simply have added a file input tag with no actual form processing:

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ mix('js/app.js') }}" defer></script>

    <!-- Styles -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
        <div class="container">
            <a class="navbar-brand" href="{{ url('/') }}">
                {{ config('app.name', 'Laravel') }}
            </a>
        </div>
    </nav>

    <input type="file">

</div>
</body>
</html>

After running npm run dev and loading my demo site, I get what I would expect.

Check out the docs on Laravel Mix for more details: https://laravel.com/docs/6.x/mix#working-with-scripts

I had all these steps, I included generated css and js files from `npm run dev`... — icolumbro, Jan 28 '20 at 15:51
I ran through the documents and it seems to work for me. I'll update my answer with the detailed steps that I used on a fresh laravel. — Darryl E. Clarke, Jan 28 '20 at 17:55

score 0 · Answer 3 · answered Jan 28 '20 at 15:45

FilePond is exposed as a module wrapped in a UMD. It can be added to a project using Node Package Manager, from a CDN or by adding the files manually.

From a CDN

<!-- add in <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.min.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" rel="stylesheet">


<!--
The classic file input element we'll enhance to a file pond
-->
<input type="file" 
       class="filepond"
       name="filepond"
       multiple
       data-max-file-size="3MB"
       data-max-files="3" />


<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></script>

<script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.min.js"></script>

<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.min.js"></script>

<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"></script>

<script src="https://unpkg.com/filepond/dist/filepond.min.js"></script>

/*
If you want to preview images, you need to register the Image Preview plugin
*/
<script>
FilePond.registerPlugin(

    // encodes the file as base64 data
  FilePondPluginFileEncode,

    // validates the size of the file
    FilePondPluginFileValidateSize,

    // corrects mobile image orientation
    FilePondPluginImageExifOrientation,

    // previews dropped images
  FilePondPluginImagePreview
);

// Select the file input and use create() to turn it into a pond
FilePond.create(
    document.querySelector("input[name='filepond']")
);
</script>

I know I can use CDN to get needed JavaScript and CSS files but I'd like to use npm and Laravel Mix to manage all libraries and components that I'll use during development... — icolumbro, Jan 28 '20 at 15:53

Install FilePond in a Laravel project, how?

3 Answers3

To install FilePond in Laravel do the following