How to Insert Multiple Values into Multiple Tables in a Single Statement?

PUT Request - Uploading a file - React / Express / Multer - req.file = undefined

Sanchez

this is my first post on this forum, but to be honest, i'm really stuck this time, let me explain the problem:

I'm developping a social network for a school project, and i want to make possible to the user to update his/her infos, specifically the profile Photo and the cover Photo, like facebook,

to store the images, i use multer (i join you all the code on the screenshoots), my problem is, when i try to upload an image on a POST request, it works perfectly (thanks to the older posts on this forum) but on a PUT request, req.file /req.files is always undefined, I've tried all the things that i saw on the web, but nothing was speaking about PUT requests, and the big problem i have is that i don't understand why it doesnt work If i'm not clear enough, just tell me and i'll try to be more explicit, thanks for your help guys ! :D it's a big post, i agree, i hope the code is explicit enough

// FORM (IMPORTANT PART) 
<form
          className="update__form"
          onSubmit={handleSubmit}
          encType="multipart/form-data"
          id="form"
        >
          {/* GESTION PHOTO DE COUVERTURE */}
          <div className="update__form-cover">
            <input
              type="file"
              name="coverPhotoUrl"
              className="update__form-cover-input"
              id="cover"
              accept="image/*"
              onChange={handleCover}
            />
            <div className="update__form-cover-button">
              Modifier la photo de couverture
            </div>
          </div>
          <div
            className={
              loadCover === true
                ? 'update__form-cover-img'
                : 'update__form-cover-img--close'
            }
          >
            <img id="coverImg" alt="ok" />
          </div>
          {/* GESTION PHOTO DE PROFIL */}
          <div className="update__form-profile">
            <input
              type="file"
              name="profilePhotoUrl"
              className="update__form-profile-input"
              id="profile"
              accept="image/*"
              onChange={handleProfile}
            />
            <div className="update__form-profile-button">
              Modifier la photo de profil
            </div>
          </div>
          <div
          
 //   MY DIFFERENTS FUNCTIONS
   // TO DISPLAY AND STORE THE NEW COVER (USESTATE)
   const handleCover = () => {
    const coverChange = document.getElementById('cover').files

    if (coverChange.length > 0) {
      const fileReader = new FileReader()

      fileReader.onload = function (event) {
        document
          .getElementById('coverImg')
          .setAttribute('src', event.target.result)
        setLoadCover(true)
        setData({
          ...data,
          coverPhotoUrl: coverChange[0],
        })
      }
      fileReader.readAsDataURL(coverChange[0])
    }
  }

  // DISPLAY AND STORE THE NEW PROFILE PHOTO (USESTATE)
  const handleProfile = () => {
    const profileChange = document.getElementById('profile').files
    setData({
      ...data,
      profilePhotoUrl: profileChange[0].name,
    })

    if (profileChange.length > 0) {
      const test = new FileReader()

      test.onload = function (event) {
        document
          .getElementById('profileImg')
          .setAttribute('src', event.target.result)
        setLoadProfile(true)
      }
      test.readAsDataURL(profileChange[0])
    }
  }

  // FUNCTION CALLED WHEN FORM IS SUBMITTED
  const handleSubmit = (event) => {
    event.preventDefault()

    try {
      updateUser(data)
    } catch (err) {
      console.log(err)
    }
  }

// FUNCTION TO FETCH PUT 
const updateUser = (data) => {
  console.log(data)
  const userId = localStorage.getItem('userId')
  fetch('http://localhost:8000/api/user/' + userId, {
    method: 'PUT',
    headers: {
      'Content-Type': 'form-data',
    },
    body: JSON.stringify(data),
  })
}

export default updateUser

// BACK CONFIG
const multer = require('multer');

const MIME_TYPES = {
    'image/jpg': 'jpg',
    'image/jpeg': 'jpeg',
    'image/png': 'png',
    'image/svg': 'svg',
}

const storage = multer.diskStorage({
    destination: (req, file, callback) => {
        callback(null, '../images')
    },
    filename: (req, file, callback) => {
        const name = file.originalname.split(' ').join('_');
        const extension = MIME_TYPES[file.mimetype];
        callback(null, name + Date.now() + '.' + extension);
    }
});

const upload = multer({ storage: storage });
router.put('/:id', upload.array(), userCtrl.updateUser);

// CONTROLLER (not very important HERE BUT RETURN REQ.FILE UNDEFINED)
exports.updateUser = ((req, res, next) => {
    console.log(req.file)
    console.log(req.files)
    const userInfos = req.file ? {
        ...JSON.parse(req.body.data),
        coverPhotoUrl: `${req.protocol}://${req.get('host')}/images/${req.file.filename}`
    } : {
        ...req.body
    };

    delete userInfos._userId;

    User.findOne({
        _id: req.params.id
    })
        .then((user)=> {
            User.updateOne({
                _id: req.params.id
            },
            {
                ...userInfos,
                _id: req.params.id
            })
                .then(()=> res.status(200).json({ message : 'infos mises à jour ! '}))
                .catch((error)=> res.status((401)).json({ error }));
        })
        .catch((error)=> res.status(400).json({ error }));
});