Laravel 10: Multiple image upload using filepond and livewire

285 Views Asked by At

I have a problem with Filepond image uploading. i created a multiple fileupload using FilePond. Uploading the images to a machine works fine, but when i want to add or remove images from/to the existing machine, i get the following error:

Call to a member function getClientOriginalName() on string
 

image uploaded

livewire debug

**My blade view: **

<div
x-data=""
x-init="
FilePond.setOptions({
    allowMultiple: true,

    onaddfilestart: function(file, fileItems, filename, load) {
        submitButtonDisabled = true;
          @this.removeUpload('images', filename, load);

    },
    onprocessfiles: function() { submitButtonDisabled = false },
    itemInsertLocation: 'after',
    server: {
        process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {
            @this.upload('images', file, load, error, progress);

        },
        revert: (filename, load) => {
            @this.removeUpload('images', filename, load)
        },
    },
});
const pond = FilePond.create($refs.input, {
    files: [
        @foreach($machine->machine_images as $image)
            {
                //loading the existing machine images
                source: '{{asset('storage/machine_images/'.$image->path)}}',
            },
        @endforeach
    ],
});
">

<div wire:ignore wire:model="images" >
    <div class="form-group text-center">
        <input
            id="image-upload"
            type="file"
            x-ref="input"
            multiple
            wire:model="images"
        >
    </div>

**My update function in the Controller **

$this->images = [];

public function updateMachine() {
   //remove all images from the machine    
   MachineImage::where('machine_id',$this->machine_id)->delete();
   
   //store all the images again
   foreach ($this->images as $image) {
      MachineImage::create([
         'machine_id' => $this->machine_id,
         'path' => $image->getClientOriginalName(),
         'order_id' => '1',
     ]);
     $image->storeAs('machine_images', $image->getClientOriginalName());
}
0

There are 0 best solutions below