Filepond Initial Images

#1

What seems to be the problem: I have a post with multiple images. If a user edits the post I can’t get the previously uploaded files to load in filepond.

If anyone has tackled this please help. I am unsure where to start.

#2

Hey, @mschuyler
Can you show us the code?

#3

Yes see below. On a post with one image it will populate - if it has multiple images it thinks it’s one file instead of muttiple. Which I realize I am missing some steps.

Here is my filepond component:
<div class=“pt-3”
wire:ignore
x-data
x-init="
FilePond.create($refs.input, {
allowMultiple: {{ isset($attributes[‘multiple’]) ? ‘true’ : ‘false’ }},
server: {
process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
@this.upload(’{{ $attributes[‘wire:model’] }}’, file, load, error, progress)
},
revert: (filename, load) => {
@this.removeUpload(’{{ $attributes[‘wire:model’] }}’, filename, load)
},
load: (uniqueFileId, load, error, progress, abort, headers) => {
fetch({{ Storage::disk('details')->url($attributes['uploadedFile']) }}).then((res) => {
return res.blob();
}).then(load);
},
},
files: [
{
source: ‘{{ Storage::disk(‘details’)->url($attributes[‘uploadedFile’]) }}’,

                    options: {
                        type: 'local',
                    },
                }
            ],

            onremovefile: (error, file) => {
                @this.set('{{ $attributes['wire:model'] }}', null);
            }
        });
    "
>

<input type="file" x-ref="input">

</div>

My livewire component fetching file data:
foreach ($traffic->details as $detail) {
$uploadedFile[] = $detail->name;
}

            $this->uploadedFile = implode(', ', $uploadedFile);

Again I know I’m missing important items but I’m unsure where to go from here. Any help is appreciated.

#4

I got initial images to work by using this format

files: [
@foreach($data[‘fullfile’] as $initfile)
{source: {{$initfile}},options: {type: ‘local’}},
@endforeach
],

which generates in my test case (had to remove the p from all but two of the http to get the code to post in the forum)

files: [
{source: ‘http://lhf.lan/prop_images/icon-size/1-887fa-c4267.jpg’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/1-982d5-64825.JPG’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/1-7942e-353db.JPG’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/001aerialmap-b7ef2.png’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/1a-08ff7.JPG’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/1-92873-87c11.JPG’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/1-51621-bc715.jpg’,options: {type: ‘local’}},
{source: ‘htt://lhf.lan/prop_images/icon-size/1-22505-d08b2.jpg’,options: {type: ‘local’}},
],

and

load: (source, load, error, progress, abort, headers) => {
var myRequest = new Request(source);
fetch(myRequest).then((res) => {return res.blob();})
.then(load);
},
},

This works and loads the images but I now have an error in adding a new image with an error

Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
http://lhf.lan/livewire/message/image-upload

I’m guessing this something to do with Filepond calling the Fetch function again which is issuing GETS to load the files and Livewire isn’t liking this as part of it’s callback procedures?

Any help on that part would be much appreciated.

Mike