lukeboy_2002's avatar

Error: The thumbnail must be an image.

Help,

I don't get is. I have an upload for an image. I have two controllers with almost the same code. I my post controller no error. in my event controller I have a error The thumbnail must be an image.

blade: event/create.blade.php

        <form action="{{ route('admin.events.store') }}" method="POST" class="space-y-6">
            @csrf
            <x-form.input name="title" required />
            <x-form.input name="thumbnail" type="file" />
            <x-form.textarea name="excerpt" required/>
            <x-form.textarea name="body" />

            <div class="relative">
                <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                    <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
                </div>
                <input datepicker datepicker-autohide datepicker-format="dd-mm-yyyy" name="date" type="text" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Select date">
            </div>

            <div class="flex justify-end space-x-2">
                <x-buttons.default onclick="history.back()" class="text-white bg-gray-700 hover:bg-gray-800 dark:bg-gray-600 dark:hover:bg-white dark:hover:text-gray-500 focus:ring-gray-500 dark:focus:ring-gray-800">Close</x-buttons.default>
                <x-buttons.default class="text-white bg-orange-500 hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-white dark:hover:text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-800">Send</x-buttons.default>
            </div>
        </form>

blade: post/create.blade.php

        <form method="POST" action="/admin/posts" enctype="multipart/form-data" class="mt-6 space-y-6">
            @csrf
            <x-form.field>
                <x-form.label name="category"/>
                <select name="category_id" id="category_id" class="mt-1 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-orange-500 focus:border-orange-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-orange-500 dark:focus:border-orange-500" required>
                    @foreach ($categories as $category)
                        <option
                            value="{{ $category->id }}"
                            {{ old('category_id') == $category->id ? 'selected' : '' }}
                        >{{ ucwords($category->name) }}</option>
                    @endforeach
                </select>
                <x-form.error name="category"/>
            </x-form.field>
            <x-form.input name="title" required />
            <x-form.input name="thumbnail" type="file" required />
            <x-form.textarea name="excerpt" required />
            <x-form.textarea name="body" required/>
            <x-form.field>
                <div class="flex items-center shadow-sm bg-gray-50 pl-4 rounded-lg border border-gray-300 dark:bg-gray-700 dark:border-gray-600 dark:shadow-sm-light">
                    <input name="published"
                           id="published"
                           value="1"
                           aria-describedby="published"
                           type="checkbox"
                           class="w-4 h-4 text-orange-500 bg-gray-100 rounded-lg border-gray-300 focus:ring-orange-500 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
                    >
                    <label for="published" class="py-4 ml-2 w-full text-sm font-medium text-gray-900 dark:text-white">Publish</label>
                </div>
            </x-form.field>
            <x-buttons.default class="text-white bg-orange-500 hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-white dark:hover:text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-800">
                Publish
            </x-buttons.default>
        </form>

in my controllers EventController

    public function store()
    {
        $slug = SlugService::createSlug(Event::class, 'slug', request()->title);

        $event = Event::create(array_merge($this->validateEvent(), [
            'slug' => $slug,
        ]));

        request()->file('thumbnail')->storeAs('images/events', $event->id . '.' . request()->thumbnail->extension());

        $event->update(['thumbnail' => 'images/events/'.$event->id . '.' . request()->thumbnail->extension()]);

        request()->session()->flash('success', 'Blogpost added successfully');

        return redirect()->route('admin.events.index');
    }

    protected function validateEvent(?Event $event = null): array
    {
        $event ??= new Event();

        return request()->validate([
            'title' => 'required|max:25',
            'thumbnail' => $event->exists ? ['image'] : ['required', 'image', 'mimes:jpg,jpeg,png,svg,gif', 'max:1024'],
            'excerpt' => 'required|min:4',
        ]);
    }

PostController

    public function store()
    {
        $slug = SlugService::createSlug(Post::class, 'slug', request()->title);

        $post = Post::create(array_merge($this->validatePost(), [
            'user_id' => request()->user()->id,
            'slug' => $slug,
            'published' => request()->published,
        ]));

        request()->file('thumbnail')->storeAs('images/posts', $post->id . '.' . request()->thumbnail->extension());

        $post->update(['thumbnail' => 'images/posts/'.$post->id . '.' . request()->thumbnail->extension()]);

        request()->session()->flash('success', 'Blogpost added successfully');

        return redirect('/posts');
    }

   protected function validatePost(?Post $post = null): array
    {
        $post ??= new Post();

        return request()->validate([
            'title' => 'required|max:25',
            'thumbnail' => $post->exists ? ['image'] : ['required', 'image', 'mimes:jpg,jpeg,png,svg,gif', 'max:1024'],
            'excerpt' => 'required|min:4',
            'body' => 'required|min:10',
            'category_id' => ['required', Rule::exists('categories', 'id')]
        ]);
    }
0 likes
2 replies
newbie360's avatar
Level 24

@lukeboy_2002 i haven't read all the code sorry, but the first code block missing enctype="multipart/form-data"

Please or to participate in this conversation.