Laravel 10 Image Upload with Display Preview Example

Laravel 10 Image Upload with Display Preview Example

If you want to provide users with a preview of an image before uploading it in your Laravel 10 web application, then this tutorial is for you. In this tutorial, you will learn how to upload an image with validation and display a preview using jQuery.

Laravel 10 Image Upload with Display Preview Example

By using the following steps, you can upload an image with validation and show preview in Laravel 10 applications using jquery:

  • Step 1 – Setup New Laravel 10 Application
  • Step 2 – Setup Database with Laravel App
  • Step 3 – Create Model & Migration
  • Step 4 – Define Routes
  • Step 5 – Create 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 – Setup New Laravel 10 Application

First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:

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

Step 2 – Database with Laravel App

In this step, Configure your database with your apps. So, visit your app root directory and find .env file. Then configure database details as follows:

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 – Add Routes

In this step, Visit your routes directory and open web.php file in any text editor. And add the following routes into web.php route file:

use App\Http\Controllers\ImageUploadController;

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

Step 5 – Create Controller By Artisan Command

In this step, execute the following command on terminal/command prompt/command line to create controller file for your laravel applications; is as follow:

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 10');

    }
}

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 10 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 10 - 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

Conclusion

Throughout this tutorial, you will gain valuable insights into handling image uploads, implementing validation, and leveraging jQuery to provide a dynamic preview of the selected image. By following the steps outlined, you will be able to enhance the user experience by allowing them to preview images before uploading them in your Laravel 10 web application.

Recommended Laravel Posts

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of 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 from a starting stage. As well as demo example.

Leave a Reply

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