Articles

Gestion des téléchargements de fichiers dans Laravel – CodeSource.io

Presque toutes les applications concernent le téléchargement de fichiers: une photo de profil, un document de vérification KYC, un document contenant un CV, etc.

Par conséquent, il est important de comprendre comment gérer les téléchargements de fichiers dans Laravel.

Dans ce tutoriel, nous allons créer un formulaire de profil utilisateur simple, où l’utilisateur devra remplir ses coordonnées et ces détails comprendront la soumission d’une photo de profil.

À la fin de ce tutoriel, vous devriez être capable de gérer les téléchargements de fichiers, de gérer la validation des téléchargements de fichiers et de savoir quoi faire lorsque le fichier n’est pas téléchargé avec succès.

Configuration

Pour commencer, Laravel doit être installé sur votre système. Si Laravel est déjà installé, vous pouvez ignorer cette étape.

Je vous conseille d’installer Laravel globalement. Surtout si vous prévoyez de l’utiliser souvent. Vous pouvez le faire en exécutant la commande suivante sur un terminal.

composer global require laravel/installer

Une fois cela terminé, nous pouvons créer un nouveau projet Laravel pour ce tutoriel.

laravel new profile-form

L’exécution de la commande ci-dessus créera un nouveau projet Laravel dans le répertoire courant appelé profile-form.

Servez l’application en exécutant les opérations suivantes:

cd profile-formphp artisan serve

Accédez à où vous trouverez votre application affichant la page de destination Laravel par défaut.

En écrivant la migration de la base de données

, nous devrons créer une table users qui stockera les détails de l’utilisateur.Laravel est livré avec une migration pour la table users qui peut être trouvée à database\migrations14_10_12_000000_create_users_table.php. Modifiez ce fichier pour qu’il ressemble à ceci:

Ici, nous avons modifié la migration laravel par défaut pour la table des utilisateurs afin d’inclure une photo de champ qui stockera l’URL de la photo des utilisateurs.

Modifier le.fichier env pour inclure les détails corrects de la base de données. Exécutez ensuite les migrations en exécutant la commande suivante:

php artisan migrate

Mettez à jour le modèle utilisateur pour refléter l’ajout du champ photo. Ajoutez une photo au $fillable afin qu’elle puisse être remplie automatiquement par laravel lors de la création et de la mise à jour d’un utilisateur.

// App\User.phpprotected $fillable = ;

Une fois cela fait, nous pouvons procéder à la construction du frontend du formulaire de profil.

Construction du Frontend

Nous devrons créer un système d’authentification qui permettra à l’utilisateur de s’inscrire et de se connecter à l’application.

Créez un nouveau fichier dans resources/views appelé register.blade.php. Ajoutez ce qui suit au fichier nouvellement créé.

Nous utilisons bootstrap pour le style, d’où la nécessité de l’ajouter à la section supérieure de la page. Nous avons requis tous les champs ici afin que l’utilisateur ne puisse pas soumettre le formulaire sans remplir tous les champs.

Le champ qui est particulièrement important pour nous ici est le champ de saisie de fichier <input type="file" Update web.php pour inclure la route vers la page de registre

// web.php...Route::get('/register', function () { return view('register');});

Aller à affichera la page de registre contenant les champs typiques d’un formulaire d’inscription.

Formulaire de téléchargement de fichiers

Nous devons spécifier le type de fichiers pris en charge. Puisque nous ne voulons que des fichiers image, nous devons spécifier dans l’élément d’entrée que nous voulons uniquement des fichiers image.

Modfie le input:type="file" pour accepter uniquement les fichiers image en ajoutant l’attribut accept avec une valeur de image/* à la balise d’entrée.

La section photographie devrait maintenant aimer:

Alors que le formulaire semble configuré pour envoyer des images au backend, il ne peut pas encore le faire. Nous devons indiquer au formulaire qu’il devra envoyer un autre type de données de formulaire au backend, dans ce cas des données binaires.

Pour ce faire, ajoutez l’attribut enctype à l’élément de formulaire et définissez sa valeur sur multipart/form-data.

La balise de formulaire d’ouverture doit ressembler à:

<form action="#" class="col-md-5" enctype="multipart/form-data">

Ensuite, nous devons écrire le contrôleur pour gérer le téléchargement.

Écriture du contrôleur

Notre backend devrait pouvoir gérer la validation, le stockage et la redirection / authentification de l’utilisateur.

Laravel est livré avec un RegisterController qui se trouve à app\Http\Controllers\Auth\RegisterController.php.

Validation

La méthode validator du Contrôleur de registre est chargée de valider les champs. Alors mettons-le à jour pour refléter ce que nous voulons réellement.

Modifiez la méthode validator dans RegisterController.php pour valider tous nos champs.

Le champ name doit être un champ obligatoire et une chaîne, d’où les règles de validation. Il en va de même pour l’e-mail et le mot de passe.

Le champ de mot de passe doit être confirmé. Dans le frontend, nous avons ajouté un champ pour password_confirmation. C’est à cela que le champ de mot de passe est comparé. Enfin le champ photo.

Ce champ est obligatoire lors de l’inscription. C’est nécessaire car dans notre migration de base de données, nous l’avons fait ainsi. Si nous l’avions défini comme nullable, nous n’aurions pas besoin de définir la validation sur required.

Laravel dispose également d’une règle de validation pratique, image, qui est utilisée pour valider les fichiers image (fichiers avec l’une des extensions suivantes: jpeg, png, bmp, gif ou svg).

Une autre validation que vous voudrez peut-être effectuer sur les fichiers est

  • En veillant à ce que la taille du fichier ne soit pas supérieure ou inférieure à une quantité spécifique. Cette règle peut être ajoutée en tant que max:500 ou min:500 selon les besoins. Il convient de noter que la taille du fichier ici est en kilo-octets
  • En vérifiant les dimensions de l’image. Cela peut être fait en ajoutant ce qui suit au tableau de règles 'dimensions:min_width=100,min_height=200'.

Stockage

L’étape suivante consiste à stocker l’image. Nous allons créer une nouvelle fonction pour gérer cette fonctionnalité.

Il existe plusieurs endroits où les fichiers peuvent être stockés dans une application: ils peuvent être stockés dans un compartiment s3, Google Drive ou même dans votre serveur d’applications.

Laravel prend en charge le stockage de fichiers sur ces emplacements. Pour plus de simplicité, nous stockerons le fichier image dans l’application.

La classe de requête Laravel, Illuminate\Http\Request prend en charge le traitement des fichiers prêt à l’emploi. Le fichier téléchargé peut être stocké via $request→file(<inputName>)→store(<folderToBeStored>). Pour notre cas, nous pourrions utiliser:

$request->file('photo')->store('profile')

Cela stocke le fichier dans le dossier storage \app\profile. Le fichier est enregistré avec un nom aléatoire et l’URL du fichier est renvoyée.

Si nous voulons attribuer un nom personnalisé à l’image telle qu’elle est stockée, nous devons utiliser la méthode storeAs.

L’utilisation de la méthode storeAs ressemblera à

$request→file(<inputName>)→storeAs(<folderToBeStored>, <customName.fileExtension>)

L’extension de fichier est importante, et laravel fournit des moyens simples d’obtenir l’extension de fichier du fichier qui a été téléchargé, via la méthode clientExtension.

Il peut être obtenu comme indiqué ci-dessous

$request->file('photo')->extension()

En utilisant cette méthode, nous pouvons enregistrer l’image d’un utilisateur en fonction du nom de l’utilisateur.

$fileName = $request->get('name') . '.' . $request->file('photo')->extension(); $request->file('photo')->storeAs('profile', $fileName);

Dans notre cas, nous pouvons nous contenter des noms aléatoires que laravel enregistre dans notre fichier.

  • Pour que votre fichier soit accessible publiquement, il doit être stocké dans le dossier storage/app/public.
  • Les fichiers dans d’autres dossiers ne seront pas accessibles au public

Créons une fonction qui gère la tâche d’enregistrement des images dans le stockage.

Sous la fonction validateur, ajoutez la

suivante La fonction storeImage stocke l’image dans le dossier storage/app/public/profile et renvoie une URL à l’emplacement de stockage du fichier.

Tout mettre ensemble

Puisque nous ajoutons plus de choses à faire, nous devons remplacer la méthode de registre par défaut fournie par laravel.

Laravel fournit un trait pour l’enregistrement des utilisateurs et peut être trouvé à Illuminate\Foundation\Auth\RegistersUsers.php.

Mettez à jour le contrôleur de registre pour inclure les éléments suivants:

Comme vu ci-dessus, la fonction create fait le travail de création d’un utilisateur en fonction des données qui lui sont envoyées.

La fonction de registre est l’endroit où tout se passe. La validation est d’abord effectuée avant toute autre chose.

Si la validation est passée, nous stockons l’image. Une fois cela fait, nous créons l’utilisateur en transmettant toutes les données nécessaires dans un tableau, $data.

Si tout se passe correctement, nous authentifions l’utilisateur et redirigeons vers la page d’accueil.

Affichage de l’image téléchargée

La page d’accueil est l’endroit où nous afficherons tous les détails de l’utilisateur. Tout d’abord, créons une route et un contrôleur pour cela.

Sur le terminal, exécutez le code pour générer le HomeController.

php artisan make:controller HomeController

Accédez à la HomeController nouvellement créée et ajoutez les méthodes suivantes à la classe.

Dans le constructeur, nous définissons que nous utilisons le middleware d’authentification. Ce que fait ce middleware, c’est qu’il permet uniquement aux utilisateurs autorisés d’accéder aux fonctions définies dans la classe.

Par conséquent, l’utilisateur ne peut venir ici que s’il est authentifié. Si l’utilisateur n’est pas authentifié, il est redirigé vers la page de connexion.

La fonction show gère l’affichage de la page d’accueil. Nous transmettons également l’utilisateur authentifié à la vue. Pour en savoir plus à ce sujet, consultez la documentation de laravel.

Mettez à jour le fichier routes pour contenir la route d’origine.

// web.php...Route::get('/home', '[email protected]')->name('home');

Enfin créer une maison.lame.fichier php dans le répertoire resources/views.

Ajoutez ce qui suit à accueil.lame.php:

Dans le fichier de vue, nous avons accès aux données user qui ont été transmises par le contrôleur.

Nous utilisons actuellement une image d’espace réservé pour afficher la photo de l’utilisateur car la photo n’est pas actuellement disponible pour nous.

Nous devons créer un lien symbolique du dossier public/storage au dossier storage/app/public vers Laravel, ce qui est simple en fournissant la commande artisan:

php artisan storage:link

Après cela, mettez à jour la balise d’image pour afficher l’image de profil.

<img src="https://codesource.io/handling-file-uploads-in-laravel/amp/{{asset('storage/'.$user->photo)}}" class="card-img-top" alt="...">

Félicitations!!! Vous avez appris avec succès à stocker des images dans laravel.

Conclusion

Presque toutes les applications nécessitent de stocker des fichiers d’une manière ou d’une autre. En suivant le guide ci-dessus, vous devriez pouvoir stocker des images et tout autre fichier dans le stockage local.Tout le code utilisé ici peut être trouvé ici sur Github.