Image source not readable

#1

Hi. I am using Image Intervention to manage image upload. I manage to correctly upload the image, display it, edit it and delete it. But, I get a problem trying to edit an entry, and save it without making changes. The error is as follows:

    Intervention\Image\Exception\NotReadableException    
    Image source not readable.

This is the edit function:

public function edit($id)
    {
        $author = Author::findOrFail($id);
        $this->author_id = $id;
        $this->photo = $author->photo;
        $this->name = $author->name;
        $this->lastname = $author->lastname;
        $this->born = $author->born;
        $this->died = $author->died;
        $this->content = $author->content;
        $this->source = $author->source;

        $this->openModal();
    }

The function to save the image is as follows:

        public function store()
        {
            $this->validate([
                'name' => 'required',
                'lastname' => 'required',
                'born' => 'required',
                'content' => 'required',
                'source' => 'required',
            ]);

        $photo = $this->storeImage();
            
        Author::updateOrCreate(['id' => $this->author_id], [
            'name' => $this->name,
            'lastname' => $this->lastname,
            'born' => $this->born,
            'died' => $this->died,
            'content' => $this->content,
            'source' => $this->source,
            'photo' => $photo,
        ]);
        
        $this->photo = '';

        session()->flash('message', $this->author_id ? 'Autor actualizado correctamente.' : 'Autor creado con exito.');

        $this->closeModal();
        $this->resetInputFields();
    }

My form:

<form wire:submit.prevent="store">
                <div class="px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4">
                    <div class="">
                        <div class="mb-4">
                            <label
                                class="flex flex-col items-center w-full px-4 py-6 tracking-wide text-white uppercase bg-green-400 border rounded-lg shadow-lg cursor-pointer border-blue hover:bg-blue hover:text-white">
                                <svg class="w-8 h-8" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
                                    viewBox="0 0 20 20">
                                    <path
                                        d="M16.88 9.1A4 4 0 0 1 16 17H5a5 5 0 0 1-1-9.9V7a3 3 0 0 1 4.52-2.59A4.98 4.98 0 0 1 17 8c0 .38-.04.74-.12 1.1zM11 11h3l-4-4-4 4h3v3h2v-3z" />
                                </svg>
                                <span class="mt-2 text-base leading-normal">Eilige una foto</span>
                                <div>
                                    <input type='file' id="photo" class="hidden" wire:change="$emit('fileChoosen')" />
                                </div>
                            </label>

                            @error('photo') <span class="text-red-500">{{ $message }}</span>@enderror
                            <div class="mt-2">
                                @if($photo)
                                <img class="object-contain h-48 w-full ..." src="{{ $photo }}">
                                @endif
                            </div>
                        </div>
                        
                        <div class="mb-4">
                            <label for="exampleFormControlInput1"
                                class="block mb-2 text-sm font-bold text-gray-700">Nombre:</label>
                            <input type="text"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput1" placeholder="Nombre" wire:model="name">
                            @error('name') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput1"
                                class="block mb-2 text-sm font-bold text-gray-700">Apellido:</label>
                            <input type="text"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput1" placeholder="Apellido" wire:model="lastname">
                            @error('lastname') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput1"
                                class="block mb-2 text-sm font-bold text-gray-700">Nacimiento:</label>
                            <input type="text"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput1" placeholder="Nacimiento" wire:model="born">
                            @error('born') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput1"
                                class="block mb-2 text-sm font-bold text-gray-700">Fallecimiento:</label>
                            <input type="text"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput1" placeholder="Fallecimiento" wire:model="died">
                            @error('died') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="body-content" wire:ignore>
                            <label for="exampleFormControlInput2"
                                class="block mb-2 text-sm font-bold text-gray-700">Biografía:</label>
                            <textarea
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="editor" wire:model="content" placeholder="Biografía"></textarea>
                            @error('content') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                        <div class="mb-4">
                            <label for="exampleFormControlInput1"
                                class="block mb-2 text-sm font-bold text-gray-700">Fuente:</label>
                            <input type="text"
                                class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                                id="exampleFormControlInput1" placeholder="Ej.: http://wikipedia.org"
                                wire:model="source">
                            @error('source') <span class="text-red-500">{{ $message }}</span>@enderror
                        </div>
                    </div>
                </div>
                <div class="px-4 py-3 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse">
                    <span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
                        <button wire:click.prevent="store()" type="button"
                            class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out bg-green-600 border border-transparent rounded-md shadow-sm hover:bg-green-500 focus:outline-none focus:border-green-700 focus:shadow-outline-green sm:text-sm sm:leading-5">
                            Guardar
                        </button>
                    </span>
                    <span class="flex w-full mt-3 rounded-md shadow-sm sm:mt-0 sm:w-auto">

                        <button wire:click="closeModal()" type="button"
                            class="inline-flex justify-center w-full px-4 py-2 text-base font-medium leading-6 text-gray-700 transition duration-150 ease-in-out bg-white border border-gray-300 rounded-md shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue sm:text-sm sm:leading-5">
                            Cancelar
                        </button>
                    </span>
                </div>
            </form>

Thanks!

#2

You can do conditionals check for changes in properties. If it’s equals than the model then do not do nothing, or just save the property changed. Use prevProperties for that checks. Love everything, what or where do you get the error?

#3

I’m sorry, but I’m not understanding …

#4

I’m sorry…don’t see the error before.

$photo = $this->storeImage();

what happens in this method??? always run even no change in image or not loaded any image…or photo?

#5

Yes, but if there is no photo uploaded, it returns null.

   public function storeImage()
    {
        if (!$this->photo) {
            return null;
        }


        
        $img = ImageManagerStatic::make($this->photo)->encode('jpg');
        $name = Str::random() . '.jpg';
        Storage::disk('public')->put($name, $img);

        return $name;
    }

To then use a default image in the index if the image does not exist:

@if ($author->photo == null)
@else
@endif
#6

and finally

could you checks for this final values? Think that the matter is there

1 Like
#7

and this last, maybe you must change it by @if($photo === ?)…because $autor->photo is the model right, not a public property? I’m right?

1 Like
#8

Thank you. I have no problem showing the data saved in the index. My problem is when editing the image and trying to save it without making changes.

#9

I found the solution, I share it for others if they need it.

In my Author model I create a function to get the full path of my image

public function getPhotoPathAttribute()
    {

        return Storage::disk('authors')->url($this->photo);
    }

In the edit function of my Authors component, I must use the function that I created in the model to get the full path of the file.

public function edit($id)
{
$author = Author::findOrFail($id);

    $this->author_id = $id;
    $this->photo = $author->photoPath;
    $this->name = $author->name;
    $this->lastname = $author->lastname;
    $this->born = $author->born;
    $this->died = $author->died;
    $this->content = $author->content;
    $this->source = $author->source;

    $this->openModal();
}

I hope it is useful!

1 Like