PT-83
1 week ago
533
30
Laravel

Upload image to existing form

Posted 1 week ago by PT-83

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

Please sign in or create an account to participate in this conversation.