vincent15000's avatar

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

0 likes
2 replies
vincent15000's avatar

ikInit() is a method I have created to initiate ImageKit. It work's fine.

I have seen on the web that temporaryUrl() only works with images and throws an exception if you try to use it with another type of file.

But I thought that the validation would have worked.

Please or to participate in this conversation.