Skip to content

All topics  /  Laravel

Multiple Image Upload In Laravel 7

Laravel ·

Teams applying “Multiple Image Upload In Laravel 7” in a production project can use this practical overview to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Hi Guys,

This article will give you example of multiple image upload laravel 7. This post will give you simple example of laravel 7 multiple image upload example.

This example will help you laravel 7 multiple image upload with preview. I’m going to show you about upload multiple images in laravel 7.

Step 1 : Install Laravel project


In this step you can install fresh laravel project to using bellow command. 

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

Step 2 : Create Migration & Model

Now you will bellow command to create migration and model in laravel app. 

php artisan make:model Image -m

Above command to create one table migration file and one model file.

database/migrations/2019_12_11_111847_create_images_table.php 

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateImageTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('image');
            $table->timestamps();
        });
    }
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
}

Bellow command to use migrate your table. 

php artisan migrate

Step 3 : Create Controller

In this step create controler file to use bellow command. 

php artisan make:controller ImageController

Step 4 : Create Controller method

Create controller after you can put the bellow code in controller file.

app/http/controllers/ImageController 

<?php
namespace App\Http\Controllers;
use App\Image;
use Illuminate\Http\Request;
class ImageController extends Controller
{
    public function create()
    {
        return view('create');        
    }
    public function store(Request $request)
    {
        $input = $request->all();
        request()->validate([
            'image' => 'required',
        ]); 
         if($request->hasfile('image'))
         {

            
            foreach($request->file('image') as $image)
            {
                $imageName=$image->getClientOriginalName();
                $image->move(public_path().'/images/', $imageName);  
                $insert['image'] = "$imageName";
            }
         }       
        Image::create($insert);
        return back()
                ->with('success','Multiple Image Upload Successfully');
    }
}

Step 5 : Create Routes

In this step you will create route in web.php file.

routes/web.php 

Route::get('image','ImageController@create')->name('image.create');
Route::post('image','ImageController@store')->name('image.store');

Step 6 : Create View File

In this step you can create blade file in laravel app.

resources/views/create.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Multiple Image Upload</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
</head>
<body class="bg-dark">
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-3 mt-5">
                <div class="card">
                    <div class="card-header">
                        <h5>Multiple Image Upload in Laravel 7 - NiceSnippets.com</h5>
                    </div>
                    <div class="card-body">
                        @if (count($errors) > 0)
                            <div class="alert alert-danger">
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-block">
                                <button type="button" class="close" data-dismiss="alert">×</button>
                                <strong>{{ $message }}</strong>
                            </div>
                        @endif
                        <form action="{{ route('image.store') }}" method="post" enctype="multipart/form-data">
                            @csrf
                            <div class="form-group">
                                <label><strong>Image : </strong></label>
                                <input type="file" name="image[]" class="form-control" multiple="multiple">
                            </div>
                            <div class="form-group text-center">
                                <input type="submit" class="btn btn-success" name="submit" value="Save">
                            </div>
                        </form>                     
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

It will help you...

More on this topic