Laravel 10 Ajax Multiple File Upload Tutorial

We have already discussed multiple images or file uploads with Laravel 10 with dropzone js and without the jQuery library. We have uploaded multiple files with Laravel 10 with a preview without Ajax request previously for Laravelias readers. So there is no tutorial on Ajax request multiple file upload in Laravel 10 application.

In this tutorial, I will explain how to upload multiple images in Laravel using Ajax and how to handle multiple image uploads in Laravel 10 application. I will also show you how to give server-side validation as well as client-side validation. I will create a simple form and when the user will submit the form, we will send all the files with formData and then we will save that files into the database.

So let's see the tutorial of Multiple file upload using ajax in Laravel 10.

Step 1: Download Fresh Laravel 10

In the first step of how to add multiple images in Laravel. download a fresh Laravel application by the following command:

composer create-project laravel/laravel example-app

Step 2: Create Route

Now in this step, create a route like the one below to complete the how to upload multiple file using ajax in Laravel. I am going to use an Ajax controller. So we can create this laravel 10 ajax multiple file upload.

routes/web.php

<?php

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

Route::get('/', [ImageController::class, 'index']);
Route::get('multiple_ajax_file_upload', [AjaxController::class, 'store']);

Step 3: Create Controller

Now we have to create AjaxController to complete our Laravel upload multiple files. So run the below command to create a controller:

php artisan make:controller ImageController

Now update this controller like this:

app/Http/Controllers/AjaxController.php

<?php

namespace App\Http\Controllers;

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

class AjaxController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function store(Request $request)
    {
        $request->validate([
            'files' => 'required',
            'files.*' => 'mimes:csv,txt,xlx,xls,pdf'
        ]);

        if ($request->totalFilesToBeUploaded > 0) {
            for ($x = 0; $x < $request->totalFilesToBeUploaded; $x++) {
                if ($request->hasFile('files' . $x)) {
                    $file = $request->file('files' . $x);
                    $path = $file->store('public/files');
                    $name = $file->getClientOriginalName();
                    $insert[$x]['name'] = $name;
                    $insert[$x]['path'] = $path;
                }
            }
            File::insert($insert);
            return response()->json(['success' => 'Ajax Multiple fIle has been uploaded']);
        }
        return response()->json(["message" => "Please try again."]);
    }
}

Step 4 Create Views

Now in this final step, we have to create our welcome.blade.php. so create it and paste this below code.

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>

<head>
    <title>Laravel 10 Ajax Multiple File Upload</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
    <div class="container mt-5">
        <h2 class="text-center">Laravel 10 Ajax Multiple File Upload</h2>
        <div class="text-center">
            <form id="selectFile" method="POST" action="javascript:void(0)" accept-charset="utf-8"
                enctype="multipart/form-data">
                @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <input type="file" name="files[]" id="files" placeholder="Choose files" multiple>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary" id="submit">Submit</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function(e) {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $('#selectFile').submit(function(e) {
                e.preventDefault();
                var formData = new FormData(this);
                let totalFilesToBeUploaded = $('#files')[0].files.length;
                let files = $('#files')[0];
                for (let i = 0; i < totalFilesToBeUploaded; i++) {
                    formData.append('files' + i, files.files[i]);
                }
                formData.append('totalFilesToBeUploaded', totalFilesToBeUploaded);
                $.ajax({
                    type: 'POST',
                    url: "{{ route('store') }}",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: (data) => {
                        this.reset();
                        alert('Files has been uploaded using jQuery ajax');
                    },
                    error: function(data) {
                        alert(data.responseJSON.errors.files[0]);
                    }
                });
            });
        });
    </script>
</body>

</html>

Read also: Laravel 10 Ajax Image Upload With Preview

Conclusion

Now we know multiple file upload using ajax in Laravel 10. Hope after completing this multiple file upload using ajax in the Laravel tutorial, you can able to upload multiple image upload in Laravel 10.

Laravel 10 Ajax Multiple File Upload Tutorial

Mahedi Hasan

Conclusion