blog/creating-a-filepond-component-using-blade-livewire-alpinejs-then-validating-storing-with-spatie-media-library

[utterances-bot]

Rappasoft | Blog | Creating a Filepond component using Blade, Livewire, & Alpine.js. Then validating & storing with Spatie Media Library

Let's create a Blade component that uses the Filepond library with Alpine.js, sends it to the server with Livewire, and saves it with Spatie Media Library.

https://rappasoft.com/blog/creating-a-filepond-component-using-blade-livewire-alpinejs-then-validating-storing-with-spatie-media-library

[monoman81]

Great article. I arrive here through your post in reddit and i have to say, how happy i am i found your blog.

[devsrv]

there is no other article which is that detailed on filepond. love it 😍 great work. Thanks !

[drbornot]

Hey Anthony. This is a great job, I followed it and works perfect. I'm looking on Pintura integration (Doka before) for simple image resize but don't find any documented solution like your here. Could you give me a hint about it?

[stsmuniz]

Great!

I was looking for anything like this. Tried with Dropzone but had no success. But following your tutorial made it a breeze

[rappasoft]

Hey Anthony. This is a great job, I followed it and works perfect. I'm looking on Pintura integration (Doka before) for simple image resize but don't find any documented solution like your here. Could you give me a hint about it?

I haven't used that functionality of Pintura but if I have time I'll try to figure it out and make a post about it.

[drbornot]

I decided left this because I realized it (Pintura) isn´t free package, so for a simple and not for profit app this integration couldn´t be possible. Actually I´m over Cropperjs. But thanks anyway!.

[OstrichMann]

This is a really well written article, great work! I would love to see an implementation of this (FilePond) and Pintura together using Livewire and AlpineJS.

Thank you for writing this great article!

[xtfer]

I'm getting Alpine Expression Error: FilePond is not defined using exactly the code in the final example.

[rappasoft]

I'm getting Alpine Expression Error: FilePond is not defined using exactly the code in the final example.

Sounds like the scripts are not loaded properly.

[grafxflow]

Is it possible to retrieve the file when going back to the form to update the values?

files: [
        {
            // the server file reference
            source: '12345',

            // set type to local to indicate an already uploaded file
            options: {
                type: 'local',

                // mock file information
                file: {
                    name: 'my-file.png',
                    size: 3001025,
                    type: 'image/png',
                },
            },
        },
    ],

[tahirafridi]

<x-filepond wire:model="icon" image_name="icon" label="Choose Icon Image" />
<x-filepond wire:model="image" image_name="image" label="Choose Feature Image" />

These laravel components are called in a Livewire component and it shows everything correct, once I choose two different images in different FilePond instances. I can see only the last FilePond file data into my laravel livewire component, that is wire:model: image data. The icon data is null.

I also noticed that while using the same livewire component so @this is same for every filepond upload. I think its override the first one with the last one.

Any work around for this?

By the way thanks for the huge and informative article I ever seen on internet on this topic.

[mtbossa]

Hello. Thanks for the tutorial, awesome. However, I don't think my file validation type is working. I copied your code, everything seems to be working, even the image preview is working, but when I drop any file, like text or pdf, the file is uploaded to the server and in the input it says "file uploaded" and green, like success. What could be happening?

[rappasoft]

@mtbossa it's hard to say without being able to see. You should be able to just use standard Laravel validation, sounds like your validation isn't getting hit if you have it in there. Maybe try adding logging to see if the code is getting run when you drop a file in.

[mtbossa]

@mtbossa it's hard to say without being able to see. You should be able to just use standard Laravel validation, sounds like your validation isn't getting hit if you have it in there. Maybe try adding logging to see if the code is getting run when you drop a file in.

Thanks for the reply. So, with your code for the filepond component:

<div
    wire:ignore
    x-data
    x-init="
        () => {
            const post = FilePond.create($refs.{{ $attributes->get('ref') ?? 'input' }});
            post.setOptions({
                allowMultiple: {{ $attributes->has('multiple') ? 'true' : 'false' }},
                server: {
                    process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                        @this.upload('{{ $attributes->whereStartsWith('wire:model')->first() }}', file, load, error, progress)
                    },
                    revert: (filename, load) => {
                        @this.removeUpload('{{ $attributes->whereStartsWith('wire:model')->first() }}', filename, load)
                    },
                },
                allowImagePreview: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                imagePreviewMaxHeight: {{ $attributes->has('imagePreviewMaxHeight') ? $attributes->get('imagePreviewMaxHeight') : '256' }},
                allowFileTypeValidation: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                acceptedFileTypes: {!! $attributes->get('acceptedFileTypes') ?? 'null' !!},
                allowFileSizeValidation: {{ $attributes->has('allowFileSizeValidation') ? 'true' : 'false' }},
                maxFileSize: {!! $attributes->has('maxFileSize') ? "'".$attributes->get('maxFileSize')."'" : 'null' !!}
            });
        }
    "
>
    <input type="file" x-ref="{{ $attributes->get('ref') ?? 'input' }}" />
</div>

the file type and size verification doesn't work.

I was able to make it work by chaging the order of the accepted types and size, like this:

<div
    wire:ignore
    x-data
    x-init="() => {        
        const post = FilePond.create($refs.input);
        post.setOptions({  
            // Here
            acceptedFileTypes: {!! $attributes->get('acceptedFileTypes') ?? 'null' !!},
            // And Here
            maxFileSize: {!! $attributes->has('maxFileSize') ? "'".$attributes->get('maxFileSize')."'" : 'null' !!},
            server: {
                process:(fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
                    console.log(post);
                    console.log(metadata);
                    console.log(options);
                    @this.upload('{{ $attributes->whereStartsWith('wire:model')->first() }}', file, load, error, progress)
                },
                revert: (filename, load) => {
                    @this.removeUpload('{{ $attributes->whereStartsWith('wire:model')->first() }}', filename, load)
                },
                allowImagePreview: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},
                imagePreviewMaxHeight: {{ $attributes->has('imagePreviewMaxHeight') ? $attributes->get('imagePreviewMaxHeight') : '256' }},
                allowFileTypeValidation: {{ $attributes->has('allowFileTypeValidation') ? 'true' : 'false' }},       
                allowFileSizeValidation: {{ $attributes->has('allowFileSizeValidation') ? 'true' : 'false' }},                
                labelFileTypeNotAllowed: 'File is of invalid type',
            }
        });
    }"
>
    <input type="file" x-ref="input" />
</div>

[rappasoft]

@mtbossa I wouldn't think it would matter. I use these snippets on projects and they work, there's a chance you're using a newer version than I am and something changed. But if it works by you moving things around then that's good.

[samankassou]

Thanks for your article, well written I just want to ask if there is a way to populate the filepond with images from the server for editing?

[diogolf]

Thanks for the article by the way. But i have a doubt. Imagine that you have a multi step form and need to move back and forward again. That uploaded file isn't there. So i have to upload it again. You have some way to resolve it ?

[boranbar]

Thank you @rappasoft for this great component. There is something that i couldn't figure it out. :( How can i change the language of Filepond? I tried what docs said but every time i got errors. I'm using Laravel Mix and filepond already included via npm. https://github.com/pqina/filepond#internationalization

Is there anyone can give me suggestions?

[ifathurrohman]

How to delete image in livewire ?

[fathialamre]

How to display saved images using media library?

[ocfemiajm]

Great tutorial, so detailed. can I ask how will i be able to display saved multiple images?

say, I have 'User' model that has multiple images saved using filepond in a 'media' table. how will i be able to display those images?

thanks.

and also how can i change storage location using this tutorial?

[Akhmami]

How do i use this component to update the existing image on server?