[Javascript - Nodejs - Mongoose] Problème Fetch PUT form-data

Problème Fetch PUT form-data [Javascript - Nodejs - Mongoose] - Javascript/Node.js - Programmation

Marsh Posté le 28-10-2022 à 20:12:29    

Je serre. Mon problème alors. Je fais une requête Fetch pour mettre à jour ma base de données se trouvant chez MongoDB, cela fonctionne parfaitement en Content-Type: application/json, mais pas lorsque je veux utiliser FormData() pour l'envoi ensuite d'images.
 
Mon code côté front (React) :  
 

Code :
  1. function ModalPageMyProfile() {
  3.   const authContext = useContext(AuthContext)
  4.   const [dataResult, setDataResult] = useState({})
  5.         const regexFormChangeFirstName = (e) => {
  6.          
  7.           const newDataResult = {...dataResult}
  8.           newDataResult.firstname = e.target.value
  9.           setDataResult(newDataResult)
  10.          
  11.         RegexFunctionChange.infoInvisible('#signUpFirstName', '#alertInfoFirstName', '#alertInfoArrowFirstName', 'alertInfoMinLetterInvisible', 'alertInfoFirstNameMinLetterVisibleModalMyProfile',
  12.             'alertInfoArrowInvisible', 'alertInfoFirstNameArrowVisibleModalMyProfile')   
  13.         RegexFunctionChange.firstName('#signUpFirstName')
  15.             // if (e.target.value.match(/^[a-zA-Z-]{2,25}$/)) {
  16.             // valueFirstName = e.target.value  
  17.             // console.log(valueFirstName)     
  18.             // }  
  19.             // else {
  20.             // valueFirstName = null
  21.             // }
  22.         }
  23.        
  24.         const regexFormChangeLastName = (e) => {
  25.          
  26.           const newDataResult = {...dataResult}
  27.           newDataResult.lastname = e.target.value
  28.           setDataResult(newDataResult)
  29.          
  30.        
  31.             RegexFunctionChange.infoInvisible('#signUpLastName', '#alertInfoLastName', '#alertInfoArrowLastName', 'alertInfoMinLetterInvisible', 'alertInfoLastNameMinLetterVisibleModalMyProfile',
  32.                 'alertInfoArrowInvisible', 'alertInfoLastNameArrowVisibleModalMyProfile')   
  33.             RegexFunctionChange.lastName('#signUpLastName')
  34.        
  35.        
  36.             // if (e.target.value.match(/^[a-zA-Z-]{2,25}$/)) {
  37.             // valueLastName = e.target.value   
  38.             // }  
  39.             // else {
  40.             // valueLastName = null
  41.             //}
  42.         }
  43. const formData = new FormData()
  44. const dataObject = {...dataResult}
  45. formData.append('infosUser', JSON.stringify(dataObject))
  46. //formData.append('Authorization', `Bearer ${authContext.token}`)
  48. console.log(formData.get('infosUser'))
  51. const fetchPut = () => {
  52.   if (dataResult.firstname.match(/^[a-zA-Z-]{2,25}$/) &&
  53.       dataResult.lastname.match(/^[a-zA-Z-]{2,25}$/)) {
  54.     // const fetchHandlerUpdate = async () => {
  55.     //   const response = await  
  56.       fetch(urlPut,
  57.         {
  58.           method: 'PUT',
  59.           headers: {
  60.             //'Content-Type': 'application/json',
  61.             'Accept': 'application/json',
  62.             'Authorization': `Bearer ${authContext.token}`
  63.           },
  64.           body: formData
  65.           })
  66.           .then( response => response.json())
  67.           .then ( data => console.log(data))
  68.           // const data = await response.json( );
  70.           // if(response.ok) {
  71.           //   console.log(data)
  72.           // }
  73.          
  74.     } 
  75.   //   fetchHandlerUpdate()
  76.   // }
  77. }
  79.   return (
  80.         <DivNameProfile>
  81.         <DivNameInput>
  82.          
  83.         <input name={'firstName'} placeholder={dataResult.firstname} value={dataResult.firstname || ' '} id={'signUpFirstName'} className={'inputsNameMyProfile input'} onBlur={regexBlurFirstName} onChange={regexFormChangeFirstName}></input>
  84.        
  85.         </DivNameInput>
  86.         <DivNameInput>
  87.        
  88.         <input name={'lastName'} placeholder={dataResult.lastname} value={dataResult.lastname || ' '} id={'signUpLastName'} className={'inputsNameMyProfile input'}  /*onFocus={() => test()}*/ onBlur={regexBlurLastName} onChange={regexFormChangeLastName}></input>
  89.        
  90.         </DivNameInput>
  91.         </DivNameProfile>
  92. <ButtonValidation onClick={() => fetchPut()}/>
  93. )
  94. }


 
 
Rendus console côté front (le state se met à jour nickel :

Code :
  1. {"_id":"6357f144a5ac260a67a5a9c9","firstname":"Jzaaaeeedd","lastname":"Jza","email":"jerome@truc.fr","password":"$2b$10$LY7dWK65f9Xs1PKD8Oy.c./OJZy1rPfNturFRGlaYQW0hzelNK0FS","bioProfile":"","city":"","imageUrlProfilePicture":"","imageUrlLandscapePicture":"","admin":false,"__v":0}
  2. {message: 'Objet modifié !'}


 
 
Middleware côté back :  

Code :
  1. exports.modifyInfosUser = (req, res) => {
  2.     const userObject = req.file ? {
  3.         ...JSON.parse(req.body.infosUser),
  4.         imageUrlProfilePicture: `${req.protocol}://${req.get('host')}/images/${req.file.filename}`
  5.     } : { ...req.body };
  6.     console.log(req.body.infosUser)
  7.     delete userObject.userId;
  8.     User.findOne({ _id: req.params.id})
  9.     .then((user) => {
  10.         if ( user._id != req.auth.userId) {
  11.             res.status(401).json({ message:'Non-autorisé' })
  12.         } else {
  13.             User.updateOne({ _id: req.params.id }, { ...userObject, _id: req.params.id }, {returnNewDocument: true}/*, {returnOriginal:false}*/)
  14.             .then(() => res.status(200).json({ message: 'Objet modifié !' }))
  15.             .catch((error) => res.status(403).json({ error }));
  17.             console.log(req.body)
  18.         }
  19.     })
  20.     .catch((error) => res.status(400).json({ error }))
  21. }


 
Rendus console côté back :  

Code :
  1. {
  2.   userId: '6357f144a5ac260a67a5a9c9',
  3.   iat: 1666973805,
  4.   exp: 1667002605
  5. }
  6. {"_id":"6357f144a5ac260a67a5a9c9","firstname":"Jzaaaeeedd","lastname":"Jza","email":"jerome@truc.fr","password":"$2b$10$LY7dWK65f9Xs1PKD8Oy.c./OJZy1rPfNturFRGlaYQW0hzelNK0FS","bioProfile":"","city":"","imageUrlProfilePicture":"","imageUrlLandscapePicture":"","admin":false,"__v":0}


 
 
Et mes CORS :  

Code :
  1. app.use((req, res, next) => {
  2.     // res.setHeader('Access-Control-Allow-Origin', '*');
  3.     // res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content, Accept, Content-Type, Authorization');
  4.     // res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
  5.     res.header("Access-Control-Allow-Origin", "*" );   
  6.     res.header('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
  7.     res.header("Access-Control-Allow-Headers", "X-Requested-With, X-HTTP-Methods-Override, Content-Type, Accept,Cache-Control, Pragma, Origin, Authorization, Content-Type, form-data" );
  8.     res.header("Access-Control-Allow-Credentials", "true" );
  9. if ('OPTIONS' == req.method){
  10.     return res.send(200);
  11. }
  12.     next();
  13. });
  15. app.use(express.json());
  18. app.use('/', usersRoutes)
  19. app.use('/images', express.static(path.join(__dirname, 'images')));
  20. app.use(express.urlencoded({ extended: true }));
  22. module.exports = app;


 
Voilà, plus de deux jours sur ça comme un noob, en faisant recherche sur recherche, test sur test, sans trouver l'origine du truc.
 
Toute aide est plus que la bienvenue

Reply

Marsh Posté le 28-10-2022 à 20:12:29   

Reply

Marsh Posté le 28-10-2022 à 23:09:45    

Pour les images, faudrait pas mettre "multipart/form-data" plutôt que application/json ?


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 29-10-2022 à 00:14:35    

Tout à fait, de ce que j'ai compris du moins. Faut juste pas marqué "Content-Type": "application/json", ça le fait automatique. Je cherche encore sans rien comprendre.

Reply

Marsh Posté le 01-11-2022 à 15:10:23    

Problème résolu. Je donne la solution plus tard pour qui pourrait avoir besoin, pas trop le temps là.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed