Laravel 10, Multiple file uploads allow users to upload multiple files simultaneously, which improves the efficiency of data submission. It saves time and reduces the number of requests required to upload files individually.
Users can select multiple files in one go instead of selecting and uploading them one by one.
Step 1: Install Laravel App
composer create-project laravel/laravel example-MultipleFileUpload
Step 2: Create Migration and Model
php artisan make:migration create_files_table
database/migrations/2022_02_11_07192023_create_files_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('files', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('files');
}
};
Run migration
php artisan migrate
Create model
php artisan make:model File
app/Models/File.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class File extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}
Step 3: Create Controller
php artisan make:controller FileController
app/Http/Controllers/FileController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\File;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
class FileController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('fileUpload');
}
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): RedirectResponse
{
$request->validate([
'files' => 'required',
'files.*' => 'required|mimes:pdf,xlx,csv|max:2048',
]);
$files = [];
if ($request->file('files')){
foreach($request->file('files') as $key => $file)
{
$fileName = time().rand(1,99).'.'.$file->extension();
$file->move(public_path('uploads'), $fileName);
$files[]['name'] = $fileName;
}
}
foreach ($files as $key => $file) {
File::create($file);
}
return back()
->with('success','You have successfully upload file.');
}
}
Store Files in Storage Folder
$file->storeAs('files', $fileName);
// storage/app/files/file.png
Files in Public Folder
$file->move(public_path('files'), $fileName);
// public/files/file.png
Store Files in S3
$file->storeAs('files', $fileName, 's3');
Step 4: Create and Add Routes
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;
/*
|--------------------------------------------------------------------------
| 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::controller(FileController::class)->group(function(){
Route::get('file-upload', 'index');
Route::post('file-upload', 'store')->name('file.store');
});
Step 5: Create Blade File
resources/views/fileUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Multiple File Upload Example - webthestuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h2>Laravel 10 Multiple File Upload Example - webthestuff.com</h2>
</div>
<div class="panel-body">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-block">
<strong>{{ $message }}</strong>
</div>
@endif
<form action="{{ route('file.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label" for="inputFile">Select Files:</label>
<input
type="file"
name="files[]"
id="inputFile"
multiple
class="form-control @error('files') is-invalid @enderror">
@error('files')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Run Laravel App:
php artisan serve
Now, Go to web browser, type the given URL and see the output:
http://localhost:8000/file-upload
