Laravel 7/6 Multiple Image Upload  With Preview Tutorial

Laravel 7/6 Multiple Image Upload With Preview Tutorial

Upload Multiple images into the database and folder in laravel application with preview.

In this laravel 7, 6 multiple image upload tutorial, you will learn step by step how you can upload multiple images into a database and folder with preview.

Laravel Multiple Images Upload With Preview

Follow the following steps and upload the multiple images into database and folder with preview in your laravel applications:

  • Install Laravel Fresh App
  • Setup Database
  • Generate Migration & Model
  • Make Route
  • Create Controller & Methods
  • Create Blade View
  • Run Development Server

1). Install Laravel Fresh App

First, we need to download laravel fresh setup. Use the below command and download fresh new laravel setup :

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

2). Setup Database

After successfully install laravel 6 Application, Go to your project .env file and set up database credential and move next step :

DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

3). Generate Migration & Model

Now we will create table name Image and it’s migration file. use the below command :

php artisan make:model Image -m

It command will create one model name Image and also create one migration file for Image table. After successfully run the command go to database/migrations file and put the below here :


use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateImagesTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('images', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()

Next, migrate the table using the below command :

php artisan migrate

4). Make Route

We will create two routes in the web.php file. Go to app/routes/web.php file and create two routes so update your routes in web.php file:

 Route::get('multiple-image', 'ImageController@index');
 Route::post('multiple-save', 'ImageController@save');

5). Create Controller

We need to create a controller name ImageController. Use the below command and create Controller :

php artisan make:controller ImageController

After successfully create controller go to app/controllers/ImageController.php and update the below code :

The first method is index() and it will show you image upload form.

The second method is save() and it will store your images into database and folder in laravel application.


namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response,File;
use App\Image;

class ImageController extends Controller

    public function index()
        return view('image');

    public function save(Request $request)


            'image' => 'required',
            'image.*' => 'image|mimes:jpeg,png,jpg,gif,svg|max:2048'


        if ($image = $request->file('image')) {
            foreach ($image as $files) {
            $destinationPath = 'public/image/'; // upload path
            $profileImage = date('YmdHis') . "." . $files->getClientOriginalExtension();
            $files->move($destinationPath, $profileImage);
            $insert[]['image'] = "$profileImage";
        $check = Image::insert($insert);

        return Redirect::to("image")->withSuccess('Great! Image has been successfully uploaded.');


6). Create Blade view

In this step we need to create blade view file. Go to app/resources/views and create one file name image.blade.php :

<!DOCTYPE html>
<link rel="stylesheet" href="{{ url('public/cssjs/bootstrap.min.css') }}" />
<script src=""></script>
    margin: 10px 5px 0 0;
    width: 300px;
<article class="bg-secondary mb-3">  
<div class="card-body text-center">
<h4 class="text-white">Laravel Multiple Image Upload Tutorial With Live Preview</h4>
<div class="container">  
    @if ($message = Session::get('success'))

    <div class="alert alert-success alert-block">

        <button type="button" class="close" data-dismiss="alert">×</button>

            <strong>{{ $message }}</strong>

<form id="file-upload-form" class="uploader" action="{{url('save')}}" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<input type="file" id="file-input" multiple />
<span class="text-danger">{{ $errors->first('image') }}</span>
<div id="thumb-output"></div>
<button type="submit" class="btn btn-success">Submit</button>

Put the script on multiple-image.blade.php, after closing of body tag

 $('#file-input').on('change', function(){ //on file input change
    if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) //check File API supported browser
        var data = $(this)[0].files; //this file data
        $.each(data, function(index, file){ //loop though each file
            if(/(\.|\/)(gif|jpe?g|png)$/i.test(file.type)){ //check supported file type
                var fRead = new FileReader(); //new filereader
                fRead.onload = (function(file){ //trigger function on successful read
                return function(e) {
                    var img = $('<img/>').addClass('thumb').attr('src',; //create image element 
                    $('#thumb-output').append(img); //append image to output element
                fRead.readAsDataURL(file); //URL representing the file's data.
        alert("Your browser doesn't support File API!"); //if File API is absent


7). Run Development Server

We need to run the development server. Use the php artisan serve command and start your server :

 php artisan serve
If you want to run the project diffrent port so use this below command
php artisan serve --port=8080

Now we are ready to run our example so run bellow command to quick run.



In this tutorial , We have successfully upload multiple image in project folder . We uploaded multiple image in database and folder. Our examples run quickly.

If you have any questions or thoughts to share, use the comment form below to reach us.

AuthorTuts Make

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Javascript, JQuery, Laravel, Codeigniter, Vue JS, Angular JS, React Js, WordPress and Bootstrap from a starting stage.

Leave a Reply

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