File Uploaders Components

Usage

Pass in the model for which you want to manage the files as the parameter of the component.

In the below example we are looking to manage the files of a logged-in user, so we pass in the user object.

      @livewire('model-file-manager', ['model' => \Auth::user()])
    

Documentation

In Model Media Manager livewire component we use Spatie Media Librarypackage to manage the files.

Thus in order to use this component, you must first install the Spatie media library package using Composer.

composer require "spatie/laravel-medialibrary:^9.0.0"

Preparing your models

To associate media with a model, the model must implement the interface and trait as shown above in the Model Tab:

Once you have your Model ready, you can just pass in the object of the Model to the livewire component for which you want to manage the files, and it should just work!

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>