laravel 11 multiple files images upload with Preview

by

Uploading files or images in Laravel 11 is a crucial component of any project. Despite its significance, many developers encounter challenges when integrating file upload capabilities. Multiple image upload allows the user to select multiple files at once and upload all files to the server.

In this guide, I’ll demonstrate how to upload multiple files in Laravel 11, covering both single and multiple file uploads. We’ll utilize Laravel’s storage capabilities and create database records for the uploaded files. Throughout the tutorial, I’ll leverage Laravel 11 multiple files images upload functionality.

How to Upload Multiple Files in Laravel 11 with Preview

Follow the following steps to upload multiple images with preview and validation in Laravel 10 apps:

  • Step 1: Download Laravel App
  • Step 2: Setup Database credentials
  • Step 3: Generate Model & Migration
  • Step 4: Create Routes
  • Step 5: Generate Controller
  • Step 6: Create Blade View
  • Step 7: Run your application

#1 Download Laravel App

First, open the terminal or command prompt and run the following command to install a fresh Laravel app:

composer create-project laravel/laravel multiple-images

Next, go to the application directory:

cd multiple-images

#2 Connect Database

Open the .env file and add your database credentials such as database name, username and 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

#3 Create Model & Run Migration

Now, you need to generate model and migration file, execute the following command on terminal:

php artisan make:model Image -m

Next, add fillable properties in your model file. So, open the app\Models\Image.php file and put the following code on it.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;
    protected $fillable = [
        'name', 'path'
    ];
}

Next, open the database\migrations\2023_03_26_082159_create_images_table.php file and add the columns in it.

<?php

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

class CreateImagesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->string('path');
            $table->timestamps();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }

}

Now run the migrate command and generate table in your database.

php artisan migrate

#4 Create Routes for Image upload

In this step, Navigate to the routes folder and open web.php file and add the following routes into web.php file:

<?php

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

Route::get('images', [ ImageController::class, 'index' ]);
Route::post('images', [ ImageController::class, 'store' ])->name('images.store');

#5 How to create Controller

Next generate a controller using the following command.

php artisan make:controller ImageController

After successfully creating the controller open and put the below code on it, Here we have added two methods on it one index for showing for form and the store function for saving data in database and uploading in public and storage directory.

So, open the app\Http\Controllers\ImageController.php file and put the login inside it;

<?php

namespace App\Http\Controllers;

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

class ImageController extends Controller
{
    public function index()
    {
       return view('images');
    }
     
    public function store(Request $request)
    {
        $request->validate([
            'images' => 'required',
            'images.*' => 'mimes:jpg,png,jpeg,gif,svg'
        ]);

        if ($request->hasfile('images')) {
            $images = $request->file('images');
            foreach($images as $image) {
                $name = $image->getClientOriginalName();
                $path = $image->storeAs('uploads', $name, 'public');

                Image::create([
                'name' => $name,
                'path' => '/storage/'.$path
                ]);
            }
        }
        
        return back()->with('success', 'Images uploaded successfully');
    }
}

#6 Create Blade File

Now create a images.blade.php file inside the resources/views directory. After that open the resources\views\images.blade.php file and put the below code on it;

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Upload Multiple Files in Laravel with preview</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
    <style>
        .invalid-feedback {
        display: block;
        }
        .images-preview-div img
        {
            padding: 10px;
            max-width: 150px;
        }
</style>
</head>

<body>
    <div class="container mt-4">
      <h2>Upload Multiple Files in Laravel</h2>
        @if(session()->has('success'))
            <div class="alert alert-success">
                {{ session()->get('success') }}
            </div>
        @endif
        <form method="post" action="{{ route('images.store') }}" enctype="multipart/form-data">
          @csrf
          <div class="form-group">
              <input type="file" name="images[]" multiple class="form-control" accept="image/*" id="images">
              @if ($errors->has('images'))
                @foreach ($errors->get('images') as $error)
                <span class="invalid-feedback" role="alert">
                    <strong>{{ $error }}</strong>
                </span>
                @endforeach
              @endif
          </div>
          <div class="col-md-12">
              <div class="images-preview-div"> </div>
          </div>
          <div class="form-group">
            <button type="submit" class="btn btn-success">Save</button>
          </div>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    <script>
        $(function() {
            // Multiple images preview with JavaScript
            var previewImages = function(input, imgPreviewPlaceholder) {
                if (input.files) {
                    var filesAmount = input.files.length;
                        for (i = 0; i < filesAmount; i++) {
                        var reader = new FileReader();
                        reader.onload = function(event) {
                            $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(imgPreviewPlaceholder);
                        }
                        reader.readAsDataURL(input.files[i]);
                    }
                }
            };
            $('#images').on('change', function() {
                previewImages(this, 'div.images-preview-div');
            });
        });
    </script>
</body>
</html>

#7 Start your application

Now is the time to come to test Laravel multiple image upload with preview example.

So, run the following command on cmd to start the development server:

php artisan serve

Next open your browser and fire the following URL into a browser:

http://127.0.0.1:8000/images