Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

PT-83's avatar
Level 7

Upload image to existing form

Hi all, I have successfully added an image file picker to an existing form.

Also, I have php artisan storage:link to access the public/storage/uploads folder which contains the image that was uploaded.

Next step I included an @if statement in my show view to render the image when looking at post details. However, the image is not showing at all in the show view? I am perplexed as to what I'm missing???

PostController

<?php

namespace App\Http\Controllers;

use App\Post;
use Auth;
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;
 

class PostController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $posts = Post::all();

        return view('post.index', compact('posts'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $post = new Post();

        return view('post.create', compact ('post'));
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'body' => 'required',
        ]);
        $post = new Post();
        $post->user_id = Auth::user()->id;
        $post->title = $request->title;
        $post->body = $request->body;
        $this->storeImage($post);
        $post->save();


        return redirect('/posts');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return view('post.show', compact('post'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        return view('post.edit', compact('post'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        $post->update($this->validatedRequest());

        $this->storeImage($post);

        return redirect('/posts');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        $post->delete();

        return redirect('/posts');
    }

    private function validatedRequest()
    {
        return request()->validate([
            'title' => 'required',
            'body' => 'required',
            'image' => 'sometimes|file|image|max:5000',
        ]);
    }
        
    private function storeImage($post)
    {

        if (request()->has('image')) {
            $filename = Str::random(14).'.'.request()->image->getClientOriginalExtension();
        
            $image = Image::make(request()->image)->fit(500, 500, null, 'top-left')->encode();
        
            Storage::disk('public')->put("uploads/{$filename}", (string) $image);
        
            $post->update([
                'image' => "uploads/{$filename}"
            ]);
        }
    }
}

Form (show.blade.php)

@extends('layouts.app')

@section('content')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="pt-3 pl-3 pr-3 card">
                <h1 class="text-secondary">Post Details</h1>

                    <div>
                        <a href="/posts"><- Back</a>
                    </div> 

                    <strong class="text-secondary mt-2">Title</strong>
                         <p>{{ $post->title }}</p>

                    <strong class="text-secondary mt-2">Body</strong>
                        <p>{{ $post->body }}</p>

                @if($post->image)
                    <div class="row">
                        <div class="col-12">
                            <img src="{{ asset('storage/' . $post->image) }}" alt="" class="img-thumbnail">
                        </div>
                    </div>
                @endif

                <div>
                    <a href="/posts/{{ $post->id }}/edit">Edit</a>

                    <form action="/posts/{{ $post->id }}" method="post">
                         @method('DELETE')
                        @csrf

                        <button class="btn btn-danger mt-3 mb-3">Delete</button>  
                    </form>
                </div> 
            </div>
        </div>
    </div>
</div>
@endsection
0 likes
31 replies
Nishan12's avatar

may be 'storage/uploads/' . $post->image ??

MichalOravec's avatar

What exactly do you have in $post->image?

Also your image exists in storage/app/public/uploads/?

Do you see symlink storage in public folder?

PT-83's avatar
Level 7

Hi @michaloravec

Yes the image exists in two places.

App/storage/uploads I then create a storage link which makes the file available in public/storage/uploads

PT-83's avatar
Level 7

@michaloravec yes I can. localhost address /storage/uploads/name of file.

Interesting now I submitted the form and got an error (that I didn't get before) the image is still passed but the error is Class 'App\Http\Controllers\Image' not found and it references $image = Image::make(public_path('storage/' . $post->image))->fit(500, 500, null, 'top-left'); code.

MichalOravec's avatar

In your controller you need to add

use Intervention\Image\Facades\Image;

And I want to know when you dd($post->image) what do you get?

PT-83's avatar
Level 7

Done. New error Class 'Intervention\Image\Facades\Image' not found

PT-83's avatar
Level 7

@michaloravec I think this is the problem. I just uploaded the photo from my desktop no other installations and not using any program or code like image.intervention.io

But I'm assuming by installing the above it would then function, correct?

MichalOravec's avatar

Yes install it, because

Image::make(public_path('storage/' . $post->image))->fit(500, 500, null, 'top-left');

this is Intervention.

But I still don't get information what do you get in dd($post->image)? What do you exactly store in image column in your database?

1 like
PT-83's avatar
Level 7

Installed... I always get an error this time its Intervention\Image\Exception\NotReadableException Image source not readable image is a jpg.

MichalOravec's avatar
if (request()->has('image')) {
    $filename = Str::random(14).'.'.request()->image->getClientOriginalExtension();

    $image = Image::make(request()->image)->fit(500, 500, null, 'top-left')->encode();

    Storage::disk('public')->put("uploads/{$filename}", (string) $image);

    $post->update([
        'image' => "uploads/{$filename}"
    ]);
}
1 like
PT-83's avatar
Level 7

Class 'App\Http\Controllers\Str' not found @michaloravec by the way you are solid thanks so much for the help so far!!!

error points to $filename = Str::random(14).'.'.request()->image->getClientOriginalExtension()

PT-83's avatar
Level 7

Done. I got another error this time Class 'App\Http\Controllers\Storage' not found however I used use Illuminate\Support\Facades\Storage; which solved that (getting used to that)..

Everything is functioning fine but the image is still not being shown. Perhaps something in the form (show.blade.php) fie?

MichalOravec's avatar

Again I still don't get anser what do you have here $post->image)?

Could you run?

dd($post->image);
MichalOravec's avatar

So you don't have path saved in your column image that's the problem.

Could you again post your whole PostController?

I want to see what do you have it right now.

PT-83's avatar
Level 7

sure, updated original post

MichalOravec's avatar
Level 75

I change it a little bit

<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Support\Facades\Auth;
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Storage;
 

class PostController extends Controller
{
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $posts = Post::all();

        return view('post.index', compact('posts'));
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        $post = new Post(); // What is this?

        return view('post.create', compact ('post'));
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required',
            'body' => 'required',
        ]);

        $post = Post::create([
            'user_id' => Auth::id(),
            'title' => $request->title,
            'body' => $request->body
        ]);

        $this->storeImage($post);

        return redirect('/posts');
    }

    /**
     * Display the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function show(Post $post)
    {
        return view('post.show', compact('post'));
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function edit(Post $post)
    {
        return view('post.edit', compact('post'));
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, Post $post)
    {
        $this->validatedRequest();

        $post->update($request->except('image'));

        $this->storeImage($post);

        return redirect('/posts');
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  \App\Post  $post
     * @return \Illuminate\Http\Response
     */
    public function destroy(Post $post)
    {
        $post->delete();

        return redirect('/posts');
    }

    private function validatedRequest()
    {
        return request()->validate([
            'title' => 'required',
            'body' => 'required',
            'image' => 'sometimes|file|image|max:5000',
        ]);
    }
        
    private function storeImage($post)
    {
        if (request()->has('image')) {
            $filename = Str::random(14).'.'.request()->image->getClientOriginalExtension();
        
            $image = Image::make(request()->image)->fit(500, 500, null, 'top-left')->encode();
        
            Storage::disk('public')->put("uploads/{$filename}", (string) $image);
        
            $post->update([
                'image' => "uploads/{$filename}"
            ]);
        }
    }
}
1 like
PT-83's avatar
Level 7

I used guarded.


namespace App;

use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $guarded = [];
}
MichalOravec's avatar

And do you have uploads/image_name.jpeg saved in image column of some post?

1 like
MichalOravec's avatar

So this should work

<img src="{{ asset("storage/{$post->image}") }}">

When you check source code, what do you see in src attribute?

1 like
PT-83's avatar
Level 7

Yes, its solved! Thank you so much, this has been a great learning experience for me with your help!

Next

Please or to participate in this conversation.