title: React Hooks and Axios Image Upload with Multer
body: <p>I am trying to add the ability to upload an image and then update a user object with that image path. When I upload the image using Insomnia client and send the request, I am able to successfully add the image and path to MongoDB. NodeJS user route below:</p>
  <pre><code>const express = require (&quot;express&quot;); 
  const router = express.Router(); 
  const bcrypt = require(&quot;bcryptjs&quot;); 
  const jwt = require(&quot;jsonwebtoken&quot;); 
  const Users = require(&quot;../models/users&quot;); 
  const auth = require(&quot;../middleware/auth&quot;); 
  const multer = require('multer');
  
  const storage = multer.diskStorage({
      destination: function(req, file, cb) {
          cb(null, './uploads/'); 
      }, 
      filename: function(req, file, cb){
          cb(null, file.originalname); 
      }
  }); 
  
  const fileFilter = (req, file, cb) =&gt; {
      // reject a file
      if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png' || file.mimetype == &quot;image/jpg&quot;) {
        cb(null, true);
          } else {
              cb(null, false);
              return cb(new Error('Only .png, .jpg and .jpeg format allowed!'));
          }
    };
  
  const upload = multer({storage: storage, limits: {
      fileSize: 1024 * 1024 * 5 
      }, 
  
      fileFilter: fileFilter
  });
  // REQUEST TO FIND USER BY ID AND ADD A PROFILE PICTURE 
  router.put('/update/:id', upload.single('userImage'), (req, res) =&gt; {
      Users.findById(req.params.id)
      .then(user =&gt; {
          user.userImage = req.file.path || user.userImage,
  
          user 
              .save()
              .then(() =&gt; res.json(&quot;The User is UPDATED succesfully!&quot;))
              .catch(err =&gt; res.status(400).json(`Error: ${err}`)); 
          }) 
      .catch(err =&gt; res.status(500).json(`Error: ${err}`));  
      console.log(req.body); 
      console.log(req.file); 
  
  });
  </code></pre>
  <p>However, when I test the code on the client I receive the following 500 error: &quot;&quot;Error: TypeError: Cannot read property 'path' of undefined.&quot; I am using React Hooks and Axios, code below:</p>
  <pre><code>import React, { useState, useContext } from 'react'; 
  import Exit from '../cancel.svg'; 
  import Modal from 'react-modal';
  import { useForm } from &quot;react-hook-form&quot;;
  import axios from 'axios';
  import UserContext from &quot;../context/UserContext&quot;; 
  import { useHistory } from &quot;react-router-dom&quot;;
  
  
  Modal.setAppElement('#root');
  
  const ProfilePicture = () =&gt; {
      const [modalIsOpen, setModalIsOpen]= useState (true);
      const { register, handleSubmit } = useForm (); 
      const [userImage, setUserImage] = useState(); 
  
      const onSubmit = (data) =&gt; console.log(data);
  
      const { userData } = useContext(UserContext); 
      const history = useHistory();
  
  
      const changeOnClick = e =&gt; {
          const users = {
              userImage
          }; 
  
          console.log(users); 
  
           axios
              .put(`http://localhost:5000/users/update/${userData.user.id}`, users)
              .then(res =&gt; console.log(res.body))
              .catch(err =&gt; {
                  console.log(err); 
              }); 
              history.push(&quot;/Landing&quot;)
      } 
  
  return(
  &lt;Modal isOpen={modalIsOpen} onRequestClose={() =&gt; setModalIsOpen(false)} className='finishBorder'&gt; 
      &lt;div className='border-bottom-two'&gt;
          &lt;img onClick= {() =&gt; setModalIsOpen(false)} className='newexitButton'src={Exit} alt='X' /&gt;
              &lt;span className='lastThing'&gt;One last thing! Add a profile picture&lt;/span&gt;
      &lt;/div&gt;
      &lt;form onSubmit={handleSubmit(changeOnClick)} encType=&quot;multipart/form-data&quot; &gt;
          &lt;div&gt;
              &lt;span className=&quot;dot&quot;&gt;&lt;/span&gt;
              &lt;input onChange={e =&gt; setUserImage(e.target.value)} ref = {register} type='file' name='userImage' className='picUploader'/&gt;
              {/* &lt;button&gt;submit&lt;/button&gt; */}
          &lt;/div&gt;
          &lt;div&gt;
              &lt;button type='submit' className='doneButton'&gt;Done&lt;/button&gt;
                  &lt;div&gt;
                      &lt;span className='laterTwo'&gt;I'll do this later&lt;/span&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/Modal&gt;
  )
  
  }
  
  export default ProfilePicture; 
  </code></pre>
  <p>Appreciate the help!</p>