Dans cet article, nous allons apprendre à faire un téléchargement d’image via AJAX avec une barre de progression dans une application Laravel 11.
Vous avez sûrement déjà effectué un téléchargement de fichiers de manière classique, et c’est assez simple. Cependant, lorsqu’il s’agit d’un fichier volumineux, le téléchargement peut prendre du temps. Bien que vous ne puissiez pas réduire le temps de téléchargement, vous pouvez afficher une barre de progression avec un pourcentage pour que l’utilisateur sache combien de temps il reste pour compléter le téléchargement.
Dans ce tutoriel, nous allons créer deux routes avec le fichier FileController. Lors du clic sur le bouton de soumission, la méthode AJAX de jQuery sera déclenchée, et le téléchargement de l’image affichera une barre de progression. Suivez les étapes ci-dessous pour réaliser cet exemple.
Étapes pour le Téléchargement de Fichier via Ajax avec Barre de Progression dans Laravel 11
Étape 1 : Installer Laravel 11
Étape 2 : Créer les Routes
Étape 3 : Créer le Contrôleur FileController
Étape 4 : Créer le Fichier Blade
Lancer l’Application Laravel
Étape 1 : Installer Laravel 11
Tout d’abord, nous devons obtenir une version fraîche de Laravel 11 à l’aide de la commande ci-dessous, car nous partons de zéro. Ouvrez votre terminal ou invite de commande et exécutez la commande suivante :
composer create-project laravel/laravel example-app
Étape 2 : Créer les Routes
Dans cette étape, nous allons ajouter deux nouvelles routes. Une pour afficher la vue (où nous écrirons le code jQuery) et une autre pour le téléchargement des fichiers via POST.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\FileController;
Route::controller(FileController::class)->group(function(){
Route::get(‘file-upload’, ‘index’);
Route::post(‘file-upload’, ‘store’)->name(‘file.upload’);
});
Étape 3 : Créer le Contrôleur FileController
Dans cette étape, nous devons créer le contrôleur FileController avec les méthodes index() et store(). Vous devez également créer un dossier nommé « files » dans le dossier public pour y stocker tous les fichiers téléchargés. Créez simplement un nouveau contrôleur et insérez le code ci-dessous :
app/Http/Controllers/FileController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class FileController extends Controller
{
/**
* Affiche le tableau de bord de l’application.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view(‘fileUpload’);
}
/**
* Traite le téléchargement du fichier.
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->validate([
‘file’ => ‘required’,
]);
$fileName = time().’.’.$request->file->getClientOriginalExtension();
$request->file->move(public_path(‘files’), $fileName);
return response()->json([‘success’ => ‘Fichier téléchargé avec succès.’]);
}
}
Étape 4 : Créer le Fichier Blade
Dans cette dernière étape, nous devons créer le fichier fileUpload.blade.php et y écrire le code jQuery pour afficher la barre de progression. Ajoutez simplement le code ci-dessous au chemin suivant :
resources/views/fileUpload.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset= »utf-8″>
<meta name= »viewport » content= »width=device-width, initial-scale=1″>
<title>Exemple Laravel avec Barre de Progression – ItSolutionStuff.com</title>
<link href= »https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css » rel= »stylesheet »>
</head>
<body>
<div class= »container mt-5″ style= »max-width: 900px »>
<div class= »alert alert-primary mb-4 text-center »>
<h2 class= »display-6″>Exemple de Téléchargement de Fichier avec Barre de Progression via AJAX – ItSolutionStuff.com</h2>
</div>
<form id= »fileUploadForm » method= »POST » action= »{{ route(‘file.upload’) }} » enctype= »multipart/form-data »>
@csrf
<div class= »form-group mb-3″>
<input name= »file » type= »file » class= »form-control »>
</div>
<div class= »form-group »>
<div class= »progress »>
<div class= »progress-bar progress-bar-striped progress-bar-animated bg-success » role= »progressbar » aria-valuenow= »0″ aria-valuemin= »0″ aria-valuemax= »100″ style= »width: 0% »></div>
</div>
</div>
<div class= »d-grid mt-4″>
<input type= »submit » value= »Soumettre » class= »btn btn-primary »>
</div>
</form>
</div>
<script src= »https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js »></script>
<script src= »https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js »></script>
<script>
$(function () {
$(document).ready(function () {
$(‘#fileUploadForm’).ajaxForm({
beforeSend: function () {
var percentage = ‘0’;
},
uploadProgress: function (event, position, total, percentComplete) {
var percentage = percentComplete;
$(‘.progress .progress-bar’).css(« width », percentage+’%’, function() {
return $(this).attr(« aria-valuenow », percentage) + « % »;
})
},
complete: function (xhr) {
alert(‘Le fichier a été téléchargé avec succès !’);
}
});
});
});
</script>
</body>
</html>
Lancer l’Application Laravel
Toutes les étapes nécessaires ont été complétées. Maintenant, tapez la commande suivante et appuyez sur Entrée pour lancer l’application Laravel :
php artisan serve
Ensuite, ouvrez votre navigateur web, tapez l’URL suivante et visualisez le résultat de l’application :
http://localhost:8000/file-upload
