Inserting image into Post in laravel

Storing / Uploading the Image

When you create a post, you’ll usually want to upload an image.
Here’s how to do it in Laravel:

In your migration (posts table)

Make sure you have a column for the image path:

@extends('adminlayouts.app')
@section('content')

<h1>Create New Post</h1>

<!-- // This is for image upload enctype="multipart/form-data" -->
<form action="{{ route('posts.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="mb-3">
        <label for="title" class="form-label">Post Title</label>
        <input type="text" name="title" id="title" class="form-control" required>
    </div>
    <div class="mb-3">
        <label for="content" class="form-label">Post Content</label>
        <textarea name="content" id="content" rows="4" class="form-control" required></textarea>
    </div>

    <!-- Image upload -->
    <!--
    <input type="file" name="image" class="form-control"> 
    -->

    <button type="submit" class="btn btn-primary">Publish</button>
</form>

@endsection

public function store(Request $request)
  {
      $request->validate([
          'title'   => 'required|string|max:255',
          'content' => 'required|string',
          'image'   => 'nullable|image|mimes:jpg,jpeg,png,gif|max:2048',
      ]);

      // Handle image upload if exists
      $path = null;
      if ($request->hasFile('image')) {
          $path = $request->file('image')->store('images', 'public');
      }

      // Create post with authenticated user
      Post::create([
          'title'   => $request->title,
          'content' => $request->content,
          'image'   => $path, // null if no image
          'user_id' => auth()->id(),
      ]);

      return redirect()->route('dashboard')->with('success', 'Post created successfully!');
  }

  // Show edit post form
  public function edit(Post $post)
  {
      return view('admindashboard.edit', compact('post'));
  }

  // Update an existing post
  public function update(Request $request, Post $post)
  {
      $request->validate([
          'title'   => 'required|string|max:255',
          'content' => 'required|string',
          'image'   => 'nullable|image|mimes:jpg,jpeg,png,gif|max:2048',
      ]);

      // Handle new image upload
      if ($request->hasFile('image')) {
          $path = $request->file('image')->store('images', 'public');
          $post->image = $path;
      }

      // Update post fields
      $post->title   = $request->title;
      $post->content = $request->content;
      $post->save();

      return redirect()->route('dashboard')->with('success', 'Post updated successfully!');
  }

and now to display the image

@extends('layouts.app')
@section('content')

<br>
<br>

<div class="container d-flex flex-column align-items-center">
    @foreach($posts as $post)
    <div class="card mb-3 w-100" style="max-width: 540px;">
        <div class="row g-0">
            <div class="col-md-4">
                 {{-- Check if the post has an image --}}
                 @if($post->image)
                    {{-- Display the post image from storage --}}
                    <img src="{{ asset('storage/' . $post->image) }}" class="card-img" alt="{{ $post->title }}">
                @else
                    {{-- Display a placeholder image if no image is available --}}
                    <img src="https://via.placeholder.com/300x200" class="card-img" alt="No image available">
                @endif
            </div>
            <div class="col-md-8">
                <div class="card-body">
                    <h5 class="card-title">{{ $post->title }}</h5>
                    <p class="card-text">{{ $post->content }}</p>
                    <p class="card-text">
                        <small class="text-muted">
                            Posted: {{ $post->created_at ? $post->created_at->diffForHumans() : 'Unknown time' }}
                        </small>
                    </p>
                </div>
            </div>
        </div>
    </div>
    @endforeach

    <div class="d-flex justify-content-center mt-3">
        {{ $posts->links() }}
    </div>
</div>

@endsection

Important Step

Run this once so Laravel can serve images from storage/:

php artisan storage:link

And show the old imagein edit post

@extends('adminlayouts.app')
@section('content')

<h1>Edit your Post</h1>

<form action="{{ route('posts.update', $post) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="mb-3">
        <label for="title" class="form-label">Post Title</label>
        <input type="text" name="title" id="title" class="form-control" 
               value="{{ old('title', $post->title) }}" required>
    </div>
    
    <div class="mb-3">
        <label for="content" class="form-label">Post Content</label>
        <textarea name="content" id="content" rows="4" class="form-control" required>{{ old('content', $post->content) }}</textarea>
    </div>

    <!-- Show current image if exists -->
    @if($post->image)
        <div class="mb-3">
            <label class="form-label">Current Image</label><br>
            <img src="{{ asset('storage/' . $post->image) }}" alt="{{ $post->title }}" class="img-thumbnail" width="150">
        </div>
    @endif

    <div class="mb-3">
        <label for="image" class="form-label">Upload New Image (optional)</label>
        <input type="file" name="image" id="image" class="form-control"> 
    </div>

    <button type="submit" class="btn btn-primary">Publish</button>
</form>

@endsection