If you want to create a system for uploading multiple files like pdf, txt, CSV, Excel, doc, etc in Laravel 10 web application then you are right place. In this tutorial, you will learn how to upload multiple files in Laravel 10 web application and validate multiple files before storing them in database and directories.
Laravel 10 Multiple File Upload with Validation Example
By using the following steps, you can upload multiple files with validation in Laravel 10 applications:
- Step 1 – Setup New Laravel 10 Application
- Step 2 – Setup Database with Laravel App
- Step 3 – Build Model & Migration
- Step 4 – Add Routes
- Step 5 – Build Multi Upload Controller By Artisan Command
- Step 6 – Create Multiple File Upload Form
- Step 7 – Create Directory inside Storage/app/public
- Step 8 – Run Development Server
Step 1 – Setup New Laravel 10 Application
First of all, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel LaravelMultipleFileUpload
Step 2 – Setup Database with Laravel App
In this step, Configure your database with your apps. So, visit your app root directory and find the .env file. Then configure database details as follows:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=database-name DB_USERNAME=database-user-name DB_PASSWORD=database-password
Step 3 – Build Model & Migration
In this step, open again your terminal/command line/ command prompt. And execute the following command into it to create model and migration files for your Laravel applications:
php artisan make:model File -m
After that, open the create_files_table.php file inside /database/migrations/ directory. And then update the function up() with the following code:
public function up()
{
Schema::create('files', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('path');
$table->timestamps();
});
}
Then, open again command prompt and run the following command to create tables in the database:
php artisan migrate
Step 4 – Add Routes
In this step, Visit your application routes directory and open the web.php file in any text editor. And add the following routes into the web.php route file:
use App\Http\Controllers\MultiFileUploadController;
Route::get('files-upload', [MultiFileUploadController::class, 'index']);
Route::post('save-multiple-files', [MultiFileUploadController::class, 'store']);
Step 5 – Build Multi Upload Controller By Artisan Command
In this step, execute the following command on the terminal/command prompt/command line to create a controller file for your Laravel applications; is as follow:
php artisan make:controller MultiFileUploadController
After that, go to app/http/controllers and open the MultiFileUploadController.php file. And update the following code into it:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\File;
class MultiFileUploadController extends Controller
{
public function index()
{
return view('multiple-files-upload');
}
public function store(Request $request)
{
$validatedData = $request->validate([
'files' => 'required',
'files.*' => 'mimes:csv,txt,xlx,xls,pdf'
]);
if($request->hasfile('files'))
{
foreach($request->file('files') as $key => $file)
{
$path = $file->store('public/files');
$name = $file->getClientOriginalName();
$insert[$key]['name'] = $name;
$insert[$key]['path'] = $path;
}
}
File::insert($insert);
return redirect('files-upload')->with('status', 'Multiple File has been uploaded Successfully');
}
}
Note that, The below-given code will upload a file into the files directory:
$path = $request->file('file')->store('public/files');
Step 6 – Create Multiple File Upload Form
Now, create multiple file upload forms in the blade view file to display multiple file upload forms and submit them to the database.
So, Go to resources/views and create multiple-files-upload.php and update the following code into it:
<!DOCTYPE html>
<html>
<head>
<title>Multiple File Upload in Laravel 10</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
@if(session('status'))
<div class="alert alert-success">
{{ session('status') }}
</div>
@endif
<h2 class="text-center">Laravel 10 Multiple File Upload With Validation - Tutsmake</h2>
<div class="text-center">
<form name="save-multiple-files" method="POST" action="{{ url('save-multiple-files') }}" 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[]" placeholder="Choose files" multiple >
</div>
@error('files')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Note that, The below-given code will display the validation error message on the blade view file:
@error('files')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
Step 7 – Create a Directory inside Storage/app/public
Now, create directory name files inside the storage/app/public directory. Because the following line of code will upload a file into the files directory, which is located inside the storage/app/public/ directory:
$path = $request->file('file')->store('public/files');
Step 8 – Run Development Server
The last step, open the command prompt and run the following command to start development server:
php artisan serve
Then open your browser and hit the following url on it:
http://127.0.0.1:8000/files-upload
