Multiple File Upload using FilePond in Livewire

Usage

This component also requires you to create a Blade component. Run the following command in your project root folder to generate a new blade component

php artisan make:component filepond --view

The command above will create a Blade file at resources/views/components/filepond.blade.php which can be rendered as a component via

Put the contents shown above in Blade Component Tab in filepond.blade.php file.

And finally, you can call the livewire component like so:

      @livewire('multiple-file-upload-file-pond')
    

Documentation

Livewire makes it seamless to integrate with FilePond. We have also used Alpine.js in this project. Make sure you include the following libraries for the integration to work.

<!-- AlpineJS -->
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- Keep the CSS files in the head section of the HTML -->
<!-- FilePond CSS -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">

<!-- Filepond JS -->
<!-- Keep this in the body at the end -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>