How to Upload Image Laravel with Spatie's Media Library

I am going to show you, how to upload images into your laravel application using Spatie's media library package. You can easily use this package. So, let's start-

Step-1 :  Install spatie/laravel-medialibrary Package

composer require spatie/laravel-medialibrary

 after installing successfully, we need to run following command to create migration for "media" table:

php artisan vendor:publish --provider="Spatie\MediaLibrary\MediaLibraryServiceProvider" --tag="migrations"

Then run the migrate command:

php artisan migrate

//this will migrate media library migrations and others if have.

Step-2: Create Post Table with Model

in this step, we need to create new migrations for the posts table where we use the media library.

php artisan make:model Post -m

//it will create Model and migrations

We need to add columns to post migrations

<?php
  
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
  
class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('content');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

then run the migrate command: php artisan migrate  

app/Models/Post.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Model;
use Spatie\MediaLibrary\InteractsWithMedia;
use Spatie\MediaLibrary\HasMedia;
  
class Post extends Model implements HasMedia
{
    use InteractsWithMedia;
  
    protected $guarded = [];
}

Step-3: Add Route to web.php

Route::get('posts',[PostController::class,'index'])->name('posts.index');
Route::get('posts/create',[PostController::class,'create'])->name('posts.create');
Route::post('posts/store',[PostController::class,'store'])->name('posts.store');

Step-4: Create PostController

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use App\Models\Post;
  
class PostController extends Controller
{
   
    public function index()
    {    
        $posts = Post::latest()->paginate(50);
        return view('posts.index', compact('posts'));
    }
  
    
    public function create()
    {
        return view('posts.create');
    }
      
    

    public function store(Request $request)
    {
        $valiator = $request->validate([
            'title' => 'required',
            'content' => 'required',
        ]);
  
        $post = Post::create($request->all());
  
        if($request->hasFile('image') && $request->file('image')->isValid()){
            $post->addMediaFromRequest('image')->toMediaCollection('images');
        }
  
        return redirect()->route('posts.index')->with('message', 'Post have been published');
    }
}

Step-5: Create a Blade file

In this step, we need a blade file for creating post and post lists.

resources/views/posts/index.blade.php

<div class="container">
        <h1>Posts List</h1>
        <div class="d-flex p-2 bd-highlight mb-3">
            <a href="{{ route('posts.create') }}" class="btn btn-dark">Add</a>
        </div>
        <table class="table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Body</th>
                    <th width="30%">Image</th>
                </tr>
            </thead>
            <tbody>
                @foreach($posts as $key=>$post)
                <tr>
                    <td>{{ ++$key }}</td>
                    <td>{{ $post->title }}</td>
                    <td>{{ $post->body }}</td>
                    <td><img src="{{$post->getFirstMediaUrl('images', 'thumb')}}" / width="120px"></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

resources/views/posts/create.blade.php

<div class="container">
        <h1>Create Post</h1>
        <div class="d-flex p-2 bd-highlight mb-3">
            <a href="{{ route('posts.index') }}" class="btn btn-outline-danger btn-sm">Go Back</a>
        </div>
        <div>
            <form action="{{ route('posts.store') }}" enctype="multipart/form-data" method="post">
                @csrf
                <div class="mb-3">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control">
                </div>
                <div class="mb-3">
                    <label>Body</label>
                    <textarea class="form-control" name="body"></textarea>
                </div>
                <div class="mb-3">
                    <label>Image:</label>
                    <input type="file" name="image" class="form-control">
                </div>
                <div class="d-grid">
                    <button class="btn btn-success">Submit</button>
                </div>
            </form>
        </div>
    </div>

After completing everything, we need to link the storage folder:

php artisan storage:link

Finally serve your laravel application

php artisan serve

Hope, It will help you use media library into laravel application.