Add more images input files

#1

Hi, I have been investigating for several days how I can improve the image loading functionality without results.

Problem:

  1. By creating the multiple image upload button, the user can select as many images as they want. To limit that procedure to only being able to upload 30 images I use max: 30 and it seems to work fine.

If the user clicks the button again, it replaces the loaded images with the new ones selected.
Therefore I try to create a functionality that allows adding more images:

My input:

<input wire:model="imagenes" type="file" name="imagenes" accept="image/*" class="form-control-file" multiple>

Add more images functionality:

<button class="text-white btn btn-info btn-sm" wire:click.prevent="add({{$i}})">
     Agregar más fotos
</button>   

@foreach($inputs as $key => $value)        
    <input wire:model="name.{{ $value }}" type="file" name="imagenes" accept="image/*" class="form-control-file">        
@endforeach

What I need is to be able to validate that no more than 30 images are uploaded between the two inputs in the view.

Validate:

$this->validate([
	'imagenes' => 'max:30',
]);

They could give me a little more light to finish this functionality. Thanks a lot

#2

Hey, @maraet

What about checking the count of the uploaded images?

public function updatedImage($field)
{
   if (count($field) >= 30) {
     return $this->addError('error', 'You are reached the limit');
  }
}
#3

Excuse me but I am a newbie to Livewire, how would this function be invoked? and the property $ field would be in my case $ images the array of images of the input?

#4

That’s totally fine @maraet, you can take a look here at lifecycle hooks, and actually updatedImage method do, is grub the value of the image value after updated, and you can do what ever you want to do after in real time.

#5

The information provided was very useful to me. Thanks a lot!

1 Like
#6

You are very welcome