How to Upload Multiple Images using Ajax in Laravel 9?
Hi Dev,
This article will provide some of the most important example How to Upload Multiple Images using Ajax in Laravel 9?. I explained simply about Laravel 9 Multiple Image Upload using jQuery Ajax Tutorial. this example will help you Multiple images Upload using Ajax in Laravel 9. I explained simply step by step Multiple image upload in Laravel using ajax.
This article will give you simple example of Multiple image upload using javascript in laravel 9
Let's start following example:
Step 1: Install LaravelFirst of all we are going from scratch new laravel application. if you have already created the project, then skip following step.
composer create-project laravel/laravel example-appStep 2 : Create New Migration
php artisan make:migration create_images_tabledatabase/migrations/create_images_table.php
<?php use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class 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'); } };
php artisan migrateStep 3 : Create New Model
php artisan make:model Imageapp/Models/Image.php
<?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Image extends Model { use HasFactory; protected $fillable = [ 'image', ]; }Step 4 : Create New Controller
In this second step, we need to create a new MultipleImageController; in this file, we will add two method index() and store() for render view and store image logic.
Let's create MultipleImageController by following command:
php artisan make:controller MultipleImageControllerapp/Http/Controllers/MultipleImageController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Image; class MultipleImageController extends Controller { /** * Write Your Code.. * * @return string */ public function index() { return view('index'); } /** * Write Your Code.. * * @return string */ public function store(Request $request) { $request->validate([ 'images' =>'required', 'images.*' =>'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048', ]); if ($request->images) { foreach($request->images as $key => $image) { $imageName = $image->getClientOriginalName(); $image->move(public_path('images'), $imageName); $images[]['name'] = $imageName; Image::create([ 'image' => $imageName ]); } } return response()->json(['message' => 'images uploaded successfully']); } }Step 5 : Create Routes routes/web.php
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\MultipleImageController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/multipleImage',[MultipleMultipleImageController::class, 'index']); Route::post('multipleImage-store',[MultipleMultipleImageController::class, 'store'])->name('multipleImage.store');Step 6: Create Blade File resources/views/index.blade.php
<!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"> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>How to Upload Multiple Images using Ajax in Laravel 9?</title> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </head> <body> <div class="container mt-5 pt-5"> <div class="row d-flex justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header bg-info text-white"> <h5 class="text-center">How to Upload Multiple Images using Ajax in Laravel 9? - Tuts-Station.com</h5> </div> <div class="card-body"> <div class="alert alert-success alert-dismissible fade show" style="display:none;" role="alert"> <div id="result"></div> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> <form method="POST" enctype="multipart/form-data" id="laravel-ajax-images-upload" action="javascript:void(0)" > <div class="mt-3"> <label>Select images : <span class="text-danger">*</span></label> <input type="file" name="images[]" placeholder="Choose images" id="images" class="form-control" multiple> <span class="text-danger" id="error"></span> </div> <div class="text-center mt-3"> <button type="submit" class="btn btn-primary">Submit</button> </div> </div> </form> </div> </div> </div> </div> </div> </body> <script type="text/javascript"> $(document).ready(function (e) { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); /*------------------------------------------ -------------------------------------------- images Upload -------------------------------------------- --------------------------------------------*/ $('#laravel-ajax-images-upload').submit(function(e) { e.preventDefault(); var formData = new FormData(this); $.ajax({ type:'POST', url: "{{ route('multipleImage.store')}}", data: formData, cache:false, contentType: false, processData: false, success: (data) => { this.reset(); $('.alert').css('display','block'); $('#result').text(data.message); setTimeout(() => { $(".alert").remove(); }, 3000); }, error: function(data){ console.log(data); $('#error').text(data.responseJSON.message); } }); }); }); </script> </html>Run Laravel App:
All steps have been done, now you have to type the given command and hit enter to run the laravel app:
php artisan serveOutput :

I hope it can help you...