Jan 13, 2021
2
Level 63
Dynamic validating image format with Livewire : problem ?
Hello,
I want to upload some images, but only images. I use a livewire component.
I have a validation code. But it seems it isn't working as I want it to do. I get an exception error : This driver does not support creating temporary URLs as soon as I try to upload some file which is not an image, but I would like the validation code working and show the error message in the view.
Who would have an idea to help me ? ;)
Here is a part of the code of the livewire controller.
protected $messages = [
'photos.image' => 'Les fichiers à téléverser doivent être des images.',
'photos.max' => 'Chaque image doit faire une taille inférieure ou égale à 25 MB.',
];
public function updatedPhotos()
{
$this->validate(
[
'photos.*' => 'image|max:25600',
],
$this->messages,
);
}
public function upload()
{
$ik = $this->ikInit();
if ($this->photos)
{
$this->validate(
[
'photos.*' => 'image|max:25600',
],
$this->messages,
);
foreach ($this->photos as $photo)
{
$response = $ik->uploadFiles([
"file" => $photo->readStream(),
"fileName" => $photo->getFilename(),
"useUniqueFileName" => true,
"folder" => $this->mev_id
]);
if ($response->err === null)
{
$this->store($response->success);
}
}
$this->emit('photos_saved');
$this->photos = null;
}
}
And here is the code of my livewire view.
<div>
<div class="container text-center">
<div wire:loading>
<div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
</div>
<div class="row no-gutters">
@if ($photos)
@foreach ($photos as $photo)
<div class="col-sm text-center mb-3">
<img class="nyd-miniature" src="{{ $photo->temporaryUrl() }}"/>
</div>
@endforeach
@endif
</div>
</div>
<form wire:submit.prevent="upload" class="mt-3">
<div class="custom-file">
<input type="file" wire:model="photos" multiple class="custom-file-input">
<label class="custom-file-label" for="customFile">Choisir une ou plusieurs photos</label>
@error('photos') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<button type="submit" class="btn btn-block btn-primary mt-3">Enregistrer</button>
</form>
</div>
Thanks a lot for your answers ;).
Vincent
Please or to participate in this conversation.