Laravel 9 Image Upload with Preview Example

Laravel 9 Image Upload with Preview Example

Laravel 9 image upload with preview using jQuery; In this tutorial, we will learn how to upload image with preview and validation using jQuery in laravel 9.

As well as how to upload image into database and storage directory in laravel 9. And how to validate image mime type, size, dimension, etc on laravel controller by using laravel validation rules.

Laravel 9 Image Upload with Preview Example

Use the following steps and upload image with preview in laravel 9 applications using jquery:

  • Step 1 – Download Laravel 9 Application
  • Step 2 – Configure Database with App
  • Step 3 – Create Model & Migration
  • Step 4 – Create Routes
  • Step 5 – Generate Controller By Artisan Command
  • Step 6 – Create Blade View
  • Step 7 – Implement javascript Code to Show Image Preview
  • Step 8 – Create Images Directory inside Storage/app/public
  • Step 9 – Run Development Server

Step 1 – Download Laravel 9 Application

First of all, download or install laravel 9 new setup. So, open terminal and type the following command to install new laravel 9 app into your machine:

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

Step 2 – Configure Database with App

In this step, setup database with your downloded/installed laravel app. So, you need to find .env file and setup database details as following:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Step 3 – Create Model & Migration

In this step, open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Photo -m

After that, open create_photos_table.php file inside LaravelImage/database/migrations/ directory. And the update the function up() with following code:

    public function up()
    {
        Schema::create('photos', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('path');
            $table->timestamps();
        });
    }

Then, open again command prompt and run the following command to create tables into database:

php artisan migrate

Step 4 – Create Routes

In this step, open web.php file from routes direcotry. And update the following routes into web.php file:

use App\Http\Controllers\ImageUploadController;

Route::get('image-upload-preview', [ImageUploadController::class, 'index']);
Route::post('upload-image', [ImageUploadController::class, 'store']);

Step 5 – Generate Controller By Artisan Command

In this step, run the following command on command prompt to create controller file:

php artisan make:controller ImageUploadController

After that, go to app/http/controllers and open ImageUploadController.php file. And update the following code into it:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Photo;

class ImageUploadController extends Controller
{
     public function index()
    {
        return view('image-upload');
    }

    public function store(Request $request)
    {
        
        $validatedData = $request->validate([
         'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',

        ]);

        $name = $request->file('image')->getClientOriginalName();

        $path = $request->file('image')->store('public/images');


        $save = new Photo;

        $save->name = $name;
        $save->path = $path;

        return redirect('image-upload-preview')->with('status', 'Image Has been uploaded successfully in laravel');

    }
}

The following line of code will upload an image into the images directory:

$path = $request->file('image')->store('public/images');

Step 6 – Create Blade View

Now, create image upload form in blade view file to display image upload form and submit to the database.

So, Go to resources/views and create image-upload.blade.php and update the following code into it:

<!DOCTYPE html>
<html>
<head>
  <title>Laravel 9 Image Upload With Preview - Tutsmake.com</title>

  <meta name="csrf-token" content="{{ csrf_token() }}">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


</head>
<body>

<div class="container mt-4">

  <h2 class="text-center">Image Upload with Preview using in Laravel 9 - Tutsmake.com</h2>

      <form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('upload-image') }}" >
                
          <div class="row">

              <div class="col-md-12">
                  <div class="form-group">
                      <input type="file" name="image" placeholder="Choose image" id="image">
                        @error('image')
                        <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
                        @enderror
                  </div>
              </div>

              <div class="col-md-12 mb-2">
                  <img id="preview-image-before-upload" src="https://www.riobeauty.co.uk/images/product_image_not_found.gif"
                      alt="preview image" style="max-height: 250px;">
              </div>
                
              <div class="col-md-12">
                  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
              </div>
          </div>     
      </form>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script type="text/javascript">
     
$(document).ready(function (e) {

  
   $('#image').change(function(){
           
    let reader = new FileReader();

    reader.onload = (e) => { 

      $('#preview-image-before-upload').attr('src', e.target.result); 
    }

    reader.readAsDataURL(this.files[0]); 
  
   });
  
});

</script>
</div>  
</body>
</html>

The following below code will display the validation error message on the blade view file:

  @error('image')
  <div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
  @enderror

Step 7 – Implement javascript Code to Show Image Preview

In this step, implement javascript code to show preview of image before upload to database and storage folder.

We have already implemented this code, so you can add this code into blade view file:

<script type="text/javascript">
     
$(document).ready(function (e) {

  
   $('#image').change(function(){
           
    let reader = new FileReader();

    reader.onload = (e) => { 

      $('#preview-image-before-upload').attr('src', e.target.result); 
    }

    reader.readAsDataURL(this.files[0]); 
  
   });
  
});

</script>

Step 8 – Create Images Directory inside Storage/app/public

Now, create images directory inside storage/app/public directory. Because the following line of code will upload an image into the images directory, which is located inside storage/app/public/ directory:

$path = $request->file('image')->store('public/images');

Step 9 – Run Development Server

Last step, open command prompt and run the following command to start developement server:

php artisan serve

Then open your browser and hit the following url on it:

http://127.0.0.1:8000/image-upload-preview

Recommended Laravel Tutorials

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *