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
**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());
}