Home / Questions / 418471
Accepted
maraet
Asked: 2022-01-05 14:19:45 +0800 CST 2022-01-05 14:19:45 +0800 CST

Keep selected files in input of type file

  • 772

I've been investigating for several days how I can improve the functionality of loading images without results.

Problem:

  1. By creating the multiple image uploads button, the user can select all the images 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 on 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>

Functionality add more images:

<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',
]);
laravel

1 Answers

  1. Best Answer

    I think you can put it this way:

    Inside your main component, have:

    • 2 properties, one that serves as a binding between it inputand a property of the component and the other that will be the array that stores the files that the user chooses

        public $imagen = [];
  public $imagenes = [];

    • A method that accumulates the received files into an array

        public function cargaImagenes()
  {
      foreach ($this->imagen as $ima) {
          array_push($this->imagenes, $ima);
      } 
  }

    • A method that takes that newly filled array, iterates through it, and stores its values ​​in a specific path

        public function almacenaImagenes()
  {
      /*
          Tu lógica de iteración y almacenamiento
      */
  }

    Once we have divided the actions to be performed into 2 different methods, then we must also assign the call to these to 2 HTML elements.

    • Considering that type inputsfile have 2 possible associated events, which are: changee input, then we will move the first method and make it execute precisely on the change of said HTML element, like this:

        <input wire:change="cargaImagenes" type="file" multiple wire:model="imagen">

    • So now we assign the iteration and storage logic to occur during the clickbutton event like this:

        <button wire:click="almacenaImagenes">Almacena todo</button>

    You can check that the array $imagenesis storing the files that the user chooses, if you print the number of elements in the front like this:

    {{ count($imagenes) }}
    • 1