menu FixWins.com apps Spring MVC Spring Boot Angular Laravel ExpressJS ReactJS PFE list

Spring MVC:Ajouter Utilisateur +upload file CV et Photo

Les étapes à suivre

  1. 1Créer le Service FileManger contenant deux méthodes upload():pour upload n'importe quel fichier
  2. 2Créer la méthode ajouter() AVEC GET dans le controlleur UtilisateurController.java :permettant d'afficher le formulaire d'ajout d'un nouveau utiliateur
  3. 3Créer la vue utilisateur/ajouter.jsp
  4. 4Créer la méthode ajouter() AVEC POST dans le controlleur UtilisateurController.java :permettant d'ajouter un nouveau utilisateur dans la table utilisateurs
  5. 5Configuration de la Servlet MultipartResolver dans le fichier spring-servlet.xml
  6. 6Ajouter la dépendance de commons-fileupload dans le fichier pom.xml
  7. 7Créer le dossiers resources/uploads/utilisateursPhotos et resources/uploads/utilisateursCV

1.Créer le Service services/FileManager.java,upload()

package com.ecomerce.services;

import java.io.File;
import java.io.IOException;
import java.util.HashMap;
import java.util.List;

import org.apache.tomcat.util.http.fileupload.FileUtils;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

//Une classe qui permet de gérer les upload les donwload des fichiers
@Service
public class FileManager {
/*upload :une méthode qui permet de upload un fichier au serveur
MultipartFile fichierContenu:permet de sauvegarder le contenu du fichier
à partir du formulaire <input type=file/>

String dossier:le dossier oû on va stocker le fichier

List<String>extensionAutorises :les extensions autorisé :png, jpg,pdf,doc..
*/
public HashMap<String,String> upload(MultipartFile fichierContenu,
String dossier,List<String>extensionAutorises)
throws IllegalStateException, IOException
{
/* HashMap<String,String>:type de retour:
{typeReponse,valeur}
{contenu,valeur}
exemple
{typeReponse,"Erreur"}
{contenu,"Extension non autorisé"}
*/
HashMap<String,String> reponse=new HashMap<String,String>();
//extension=> image/png,image/jpg...
String extension=fichierContenu.getContentType();
//récuppérer la taille du fichier
double taille=fichierContenu.getSize();
//Vérifier la taille du fichier
if(taille>500000) {
reponse.put("contenu", "Erreur Taille="+(taille/1024)+"Mo :La taille doit< "+(500000/1024)+" M octets ");
reponse.put("typeReponse", "Erreur");
}
//Vérifier l'extension du fichier
//extension.substring(extension.lastIndexOf("/") + 1):recupère jpg , png ,from image/png,image/jpg...
else if(!extensionAutorises.contains(extension.substring(extension.lastIndexOf("/") + 1)))
{
reponse.put("contenu", "Erreur l'extension :"+extension+" non autorisée "+" on accepte :"+extensionAutorises.toString());
reponse.put("typeReponse", "Erreur");
}
else //si la taille et l'extension sont OK
{
//créer le chemin oû on va upload le fichier +le nom du fichier
String cheminComplet=dossier+"\\"+fichierContenu.getOriginalFilename();
//si le fichier chargé n'est pas vide
if(!fichierContenu.isEmpty()){
//Créationd du fichier avec le meme nom que le fichier à chargé
File saveFile = new File(cheminComplet);
saveFile .createNewFile(cheminComplet);
// Transférer le contenu du fichier au fichier crée
fichierContenu.transferTo(saveFile);
//Envoyé une réponse success avec le chemin du fichier
reponse.put("contenu", cheminComplet);
reponse.put("typeReponse", "success");
}
}
//finalement retourner la réponse à envoyé au controlleur
return reponse;
}

}

2.Créer la méthode ajouter() AVEC GET dans le controlleur UtilisateurController.java

package com.ecomerce.controllers;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.ecomerce.models.Utilisateur;

@Controller
@RequestMapping("/utilisateurs")
public class UtilisateurController {
//afficher le formulaire d'ajout d'un nouveau utilisateur
@GetMapping("/add")
public String add(Model m)
{
m.addAttribute("utilisateur",new Utilisateur());
return "utilisateurs/Ajouter";
}

}

3.Créer la vue utilisateurs/Ajouter.jsp

<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form" %>
<html>
<head><title>Ajouter un utilisateur</title></head>
<body>
<style>.error{color:red;}</style>
<fieldset>
<legend>Inscription d'un utilsateur</legend>
<form:form method="post" modelAttribute="utilisateur"
action="${pageContext.request.contextPath}/utilisateurs/adds" enctype='multipart/form-data' >
<!--enctype='multipart/form-data' > :est obligatoire pour envoyé des fichier au serveur-->
<table>
<tr>
<form:hidden path="id" />
<td>Nom</td>
<td><form:input path="nom" type="text"/><form:errors path="nom" cssClass="error" /></td>
</tr>
<tr>
<td>Prénom</td>
<td><form:input path="prenom" type="text"/><form:errors path="prenom" cssClass="error" /></td>
</tr>
<tr>
<td>Email</td>
<td><form:input path="email" type="email"/><form:errors path="email" cssClass="error" /></td>
</tr>
<tr>
<tr>
<td>Passwod</td>
<td><form:input path="password" type="password"/><form:errors path="password" cssClass="error" /></td>
</tr>
<tr>
<td>Age</td>
<td><form:input path="age" type="number"/><form:errors path="age" cssClass="error" /></td>
</tr>
<tr>
<td>Photo</td>
<td><input name="PhotoUtilisateur" type="file"/></td>
</tr>
<tr>
<td>CV</td>
<td><input name="CvUtilisateur" type="file"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Valider"/></td>
</tr>
</table>
</form:form>

${message}
</fieldset>
</body>
</html>


4.Créer la méthode ajouter() AVEC POST dans le controlleur UtilisateurController.java

package com.ecomerce.controllers;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import java.util.Collections;
import java.util.HashMap;

import javax.servlet.http.HttpServletRequest;
import javax.validation.Valid;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.ecomerce.DAO.UtilisateurRepository;
import com.ecomerce.models.Utilisateur;
import com.ecomerce.services.FileManager;

@Controller
@RequestMapping("/utilisateurs")
public class UtilisateurController {
@Autowired
UtilisateurRepository utilisateurRepository;
//afficher le formulaire d'ajout d'un nouveau utilisateur
@GetMapping("/add")
public String add(Model m)
{
m.addAttribute("utilisateur",new Utilisateur());
return "utilisateurs/Ajouter";
}

/*upload phot et cv puis sauvegarder l'utilisateur dans la table utilisateurs */
@RequestMapping(value="/adds", method=RequestMethod.POST)
/* @Vali:permet de délecher la validation des input selon les régles de validation dans l'entité Uitilisateur
BindingResult form:retourne pour chaque input l'etat de validation et le message d'erreur
@RequestParam("PhotoUtilisateur") MultipartFile:le fichier reçu ,photo et cv
HttpServletRequest:sera utilisée pour recupérer le chemin du dossier de déploiement pour upload les fichiers */
public String add(@Valid @ModelAttribute Utilisateur utilisateur, BindingResult form,Model model,
RedirectAttributes attributes,@RequestParam("PhotoUtilisateur") MultipartFile PhotoUtilisateur,
@RequestParam("CvUtilisateur") MultipartFile CvUtilisateur,
HttpServletRequest servletRequest) throws IllegalStateException, IOException{
//si la validation des input à echouer
if (form.hasErrors()){
attributes.addFlashAttribute("message", "<span style='color:red;'>Veillez corriger les erreurs de validation</span>");
return "utilisateurs/Ajouter";
}
//si la validation est OK
else
{
//récupérer le dossier pour upload les photos
String dossierImage = servletRequest.getSession().getServletContext().getRealPath("resources/uploads/utilisateursPhotos");
//instancier le services crée pour upload les fichiers
FileManager fileManager=new FileManager();
//1.Upload photo
/*remplir une liste par les extensions d'images autorisées */
List<String> extensionAutorisesPhoto=new ArrayList<String>();
Collections.addAll(extensionAutorisesPhoto, new String[]{"png","jpeg","gif","jpeg"});
/* Appeler la méthode upload du service FileManager et retoure la réponse */
HashMap<String,String>reponse=fileManager.upload(PhotoUtilisateur,dossierImage,extensionAutorisesPhoto);
String Typereponse=reponse.get("typeReponse");
String contenu=reponse.get("contenu");
//si la réponse retourne erreur
if(Typereponse.equals("Erreur"))
{
attributes.addFlashAttribute("message", "<span style='color:red;'>"+contenu+"</span>");
return "redirect:/utilisateurs/add";
}
//si l'upload du photo est OK
utilisateur.setPhoto("uploads/utilisateursPhotos/"+PhotoUtilisateur.getOriginalFilename());
//2.Upload CV
String dossierCV = servletRequest.getSession().getServletContext().getRealPath("resources/uploads/utilisateursCV");
List<String> extensionAutorisesCV=new ArrayList<String>();
Collections.addAll(extensionAutorisesCV, new String[]{"pdf","doc","docx"});
reponse=fileManager.upload(CvUtilisateur,dossierCV,extensionAutorisesCV);
Typereponse=reponse.get("typeReponse");
contenu=reponse.get("contenu");
if(Typereponse.equals("Erreur"))
{
attributes.addFlashAttribute("message", "<span style='color:red;'>"+contenu+"</span>");
return "redirect:/utilisateurs/add";
}
//si l'upload du CV est Ok
utilisateur.setCv("uploads/utilisateursCV/"+CvUtilisateur.getOriginalFilename());
/*stocker l'utilisateur dans la table utilisateur */
utilisateurRepository.save(utilisateur);
attributes.addFlashAttribute("message", "<span style='color:green;'>Utilisateur est ajouté validé.</span>");
}
return "redirect:/utilisateurs/add";
}
}

5.Configuration de la Servlet MultipartResolver dans le fichier spring-servlet.xml

L'interface MultipartResolver fournies par Spring Framework pour faciliter le téléchargement de fichiers
pour l'activer, définissez un bean nommé 'multipartResolver' avec le type MultipartResolver dans les configurations de bean spring.

<beans:bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
</beans:bean>

6.Ajouter la dépendance de commons-fileupload dans le fichier pom.xml

<dependency>
<groupId>commons-fileupload</groupId>
<artifactId>commons-fileupload</artifactId>
<version>1.4</version>
</dependency>

FileUpload permet d'analyser ue requete HTTP afin de trouver la liste des fichiers à upload.

FileUpload permet de trouver les fichiers PhotoUtilisateuret CvUtilisateur:

@RequestParam("PhotoUtilisateur") MultipartFile PhotoUtilisateur,
@RequestParam("CvUtilisateur") MultipartFile CvUtilisateur,








Cours et TPs

Laravel
Spring MVC
Spring Boot+Angular
Spring Security
NodeJS