Laravel 8 Image Upload with Spatie Media Library Tutorial

In this tutorial you will learn about the Laravel 8 Image Upload with Spatie Media Library Tutorial and its application with practical example.

In this Laravel 8 Image Upload with Spatie Media Library Tutorial, I’ll show you how to upload image with Spatie Media Library in laravel 8. In this laravel image upload tutorial you will learn to upload image into folder and then save it into database. In this article I will share example to upload image using Spatie Media Library in laravel 8. In this example we will be using Spatie Media Library to upload image in laravel application. Before saving image into database we will show preview of the images and then save it into directory. Before uploading the image we will display preview of the image. After successfully image upload into the database and folder we will display success message on the screen.

Table Of Contents−

Laravel 8 Image Upload with Spatie Media Library Tutorial
Create New Laravel Project

Database Connection
Add Spatie Media library Package
Create Model and Migration

Create New Controller
Register Routes
Create Blade View Template
- Run Development Server

In this step by step tutorial you will learn how to Upload image with Spatie Media Library Tutorial. Please follow the instruction given below:

Step 1: Create New Laravel Project.

Step 2: Database Connection.
Step 3: Define App Url.
Step 4: Add Spatie Medialibrary Package.

Step 5: Create Model and Migration.
Step 6: Formulate New Controller.
Step 7: Register Routes.

Step 8: Create Blade View Template.
Step 9: Evoke Development Server.

Create New Laravel Project

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

composer create-project laravel/laravel blog --prefer-dist

1	composer create-project laravel/laravel blog --prefer-dist

Database Connection

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db_name
DB_USERNAME=db_username
DB_PASSWORD=db_password

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=db_name

DB_USERNAME=db_username

DB_PASSWORD=db_password

Add Spatie Media library Package

In this step, we will install Spatie Media library Package via the composer dependency manager. Use the following command to install Spatie Media library Package.

composer require "spatie/laravel-medialibrary:^9.6.0"

1	composer require "spatie/laravel-medialibrary:^9.6.0"

Now run the vendor publish command:

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\BlogController;


/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('blog',[
    BlogController::class,'index'
])->name('blog');

Route::get('blog/create',[
    BlogController::class,'mediaView'
])->name('blog.create');

Route::post('blog/store',[
    BlogController::class,'store'
])->name('blog.store');

<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\BlogController;

|--------------------------------------------------------------------------

| Web Routes

|--------------------------------------------------------------------------

| Here is where you can register web routes for your application. These

| routes are loaded by the RouteServiceProvider within a group which

| contains the "web" middleware group. Now create something great!

Route::get('blog',[

BlogController::class,'index'

])->name('blog');

Route::get('blog/create',[

BlogController::class,'mediaView'

])->name('blog.create');

Route::post('blog/store',[

BlogController::class,'store'

])->name('blog.store');

Create Blade View Template

Now, create and update app/resources/views/index.blade.php file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Implement Spatie Media Library in Laravel</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="d-flex p-2 bd-highlight">
            <a href="{{ route('blog.create') }}" class="btn btn-primary">Create Blog</a>
        </div>
        <table class="table mt-4">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Title</th>
                    <th>Profile Pic</th>
                </tr>
            </thead>
            <tbody>
                @foreach($blogs as $key=>$data)
                <tr>
                    <td>{{ ++$key }}</td>
                    <td>{{ $data->title }}</td>
                    <td><img src="{{$data->getFirstMediaUrl('img', 'thumb')}}" / width="130px"></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Implement Spatie Media Library in Laravel</title>

</head>

<body>

<a href="{{ route('blog.create') }}" class="btn btn-primary">Create Blog</a>

</div>

<thead>

<tr>

<th>Title</th>

<th>Profile Pic</th>

</tr>

</thead>

<tbody>

@foreach($blogs as $key=>$data)

<tr>

<td>{{ $data->title }}</td>

<td><img src="{{$data->getFirstMediaUrl('img', 'thumb')}}" / width="130px"></td>

</tr>

@endforeach

</tbody>

</table>

</div>

</body>

</html>

Afetr that , create and insert the code in the app/resources/views/media.blade.php file.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Laravel Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="d-flex p-2 bd-highlight mb-2">
            <a href="{{ route('blog') }}" class="btn btn-primary">Go Back</a>
        </div>
        <div>
            <form action="{{ route('blog.store') }}" enctype="multipart/form-data" method="post">
                @csrf
                <div class="mb-2">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control">
                </div>
                <div class="mb-2">
                    <label>Profile Image</label>
                    <input type="file" name="img" class="form-control">
                </div>
                <div class="d-grid">
                    <button class="btn btn-danger">Save</button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>Laravel Demo</title>

</head>

<body>

</div>

<div>

@csrf

<label>Title</label>

</div>

<label>Profile Image</label>

</div>

</div>

</form>

</div>

</body>

</html>

Run Development Server

php artisan storage:link

1	php artisan storage:link

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Image Upload with Spatie Media Library Tutorial