title: How to upload a file to MySQL database using Nodejs backend and display the photo
body: <p>I am trying to upload a photo to mySQL database using a node backend but for some reason I am getting that what I have uploaded is undefined.</p>
  <p>I have declared a new variable &quot;Photo2&quot; which is storing that photo and I console.log it but I get &quot;undefined&quot; in my console</p>
  <p><strong>The form:</strong></p>
  <pre><code>import axios from &quot;axios&quot;;
  import { React, useState, useEffect } from &quot;react&quot;;
  import { useHistory, withRouter } from &quot;react-router-dom&quot;;
  
  function UserMaster_Edit(props) {
    const [CmpnyCode, setCmpnyCode] = useState(&quot;&quot;);
    const [UserID, setUserID] = useState(&quot;&quot;);
    const [UserFullName, setUserFullName] = useState(&quot;&quot;);
    const [UserDetail, setUserDetail] = useState(&quot;&quot;);
    const [LoginID, setLoginID] = useState(&quot;&quot;);
    const [Password, setPassword] = useState(&quot;&quot;);
    const [UserPin, setUserPin] = useState(&quot;&quot;);
    const [UserEmailID, setUserEmailID] = useState(&quot;&quot;);
    const [UserFP, setUserFP] = useState(&quot;&quot;);
    const [Photo, setPhoto] = useState(&quot;&quot;);
    const [IsActive, setIsActive] = useState(&quot;&quot;);
    const [LicCount, setLicCount] = useState(&quot;&quot;);
    const [DateCreated, setDateCreated] = useState(&quot;&quot;);
    const [CreatedBy, setCreatedBy] = useState(&quot;&quot;);
    const [RecordChanged, setRecordChanged] = useState(&quot;&quot;);
    const [LocationID, setLocationID] = useState(&quot;&quot;);
    const [isValid, setisValid] = useState(&quot;&quot;);
    const [isDeleted, setisDeleted] = useState(&quot;&quot;);
  
    const history = useHistory();
  
    const argu = props.match.params.UserID;
  
    useEffect(() =&gt; {
      axios.get(&quot;http://localhost:8000/getuserid/&quot; + argu).then((response) =&gt; {
        setCmpnyCode(response.data[0].CmpnyCode);
        setUserID(response.data[0].UserID);
        setUserFullName(response.data[0].UserFullName);
        setUserDetail(response.data[0].UserDetail);
        setLoginID(response.data[0].LoginID);
        setPassword(response.data[0].Password);
        setUserPin(response.data[0].UserPin);
        setUserEmailID(response.data[0].UserEmailID);
        setUserFP(response.data[0].UserFP);
        setPhoto(response.data[0].Photo);
        setIsActive(response.data[0].IsActive.data[0]);
        setLicCount(response.data[0].LicCount);
        setDateCreated(response.data[0].DateCreated);
        setCreatedBy(response.data[0].CreatedBy);
        setRecordChanged(response.data[0].RecordChanged.data[0]);
        setLocationID(response.data[0].LocationID);
        setisValid(response.data[0].isValid);
        setisDeleted(response.data[0].isDeleted);
      });
    }, [argu]);
  
    const editData = () =&gt; {
      axios.put(&quot;http://localhost:8000/upusermst/&quot; + argu, {
        CmpnyCode,
        UserID,
        UserFullName,
        UserDetail,
        LoginID,
        Password,
        UserPin,
        UserEmailID,
        UserFP,
        Photo,
        IsActive,
        LicCount,
        DateCreated,
        CreatedBy,
        RecordChanged,
        LocationID,
        isValid,
        isDeleted,
      });
      history.push(&quot;/usermst&quot;);
    };
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;div className=&quot;auth-wrapper&quot;&gt;
          &lt;div className=&quot;auth-inner&quot;&gt;
            &lt;form enctype=&quot;multipart/form-data&quot; onSubmit={() =&gt; editData()}&gt;
              &lt;h3&gt; Edit User Master&lt;/h3&gt;
              &lt;div&gt;
                &lt;div className=&quot;form-class8&quot;&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;Company Code&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;CompanyCode&quot;
                      value={CmpnyCode}
                      onChange={(e) =&gt; {
                        setCmpnyCode(e.target.value);
                      }}
                      name=&quot;CmpnyCode&quot;
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;UserID&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;UserID&quot;
                      value={UserID}
                      onChange={(e) =&gt; {
                        setUserID(e.target.value);
                      }}
                      name=&quot;UserID&quot;
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;UserFullName&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;UserFullName&quot;
                      value={UserFullName}
                      onChange={(e) =&gt; {
                        setUserFullName(e.target.value);
                      }}
                      name=&quot;UserFullName&quot;
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;UserDetail&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;UserDetail&quot;
                      onChange={(e) =&gt; {
                        setUserDetail(e.target.value);
                      }}
                      name=&quot;UserDetail&quot;
                      value={UserDetail}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;LoginID&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;LoginID&quot;
                      onChange={(e) =&gt; {
                        setLoginID(e.target.value);
                      }}
                      name=&quot;LoginID&quot;
                      value={LoginID}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;Password&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;Password&quot;
                      onChange={(e) =&gt; {
                        setPassword(e.target.value);
                      }}
                      name=&quot;Password&quot;
                      value={Password}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;UserPin&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;UserPin&quot;
                      onChange={(e) =&gt; {
                        setUserPin(e.target.value);
                      }}
                      name=&quot;UserPin&quot;
                      value={UserPin}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;UserEmailID&lt;/label&gt;
                    &lt;input
                      type=&quot;email&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;UserEmailID&quot;
                      onChange={(e) =&gt; {
                        setUserEmailID(e.target.value);
                      }}
                      name=&quot;UserEmailID&quot;
                      value={UserEmailID}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot;form-class8&quot;&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;UserFP&lt;/label&gt;
                    &lt;input
                      type=&quot;file&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;UserFP&quot;
                      onChange={(e) =&gt; {
                        setUserFP(e.target.value);
                      }}
                      name=&quot;UserFP&quot;
                      value={UserFP}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;Photo&lt;/label&gt;
                    &lt;input
                      type=&quot;file&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;Photo&quot;
                      onChange={(e) =&gt; {
                        setPhoto(e.target.value);
                      }}
                      name=&quot;Photo&quot;
                      value={Photo}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;IsActive&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;IsActive&quot;
                      onChange={(e) =&gt; {
                        setIsActive(e.target.value);
                      }}
                      name=&quot;IsActive&quot;
                      value={IsActive}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;LicCount&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;LicCount&quot;
                      onChange={(e) =&gt; {
                        setLicCount(e.target.value);
                      }}
                      name=&quot;LicCount&quot;
                      value={LicCount}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;DateCreated&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;DateCreated&quot;
                      onChange={(e) =&gt; {
                        setDateCreated(e.target.value);
                      }}
                      name=&quot;DateCreated&quot;
                      value={DateCreated}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;CreatedBy&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;CreatedBy&quot;
                      onChange={(e) =&gt; {
                        setCreatedBy(e.target.value);
                      }}
                      name=&quot;CreatedBy&quot;
                      value={CreatedBy}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;RecordChanged&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;RecordChanged&quot;
                      onChange={(e) =&gt; {
                        setRecordChanged(e.target.value);
                      }}
                      name=&quot;RecordChanged&quot;
                      value={RecordChanged}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;LocationID&lt;/label&gt;
                    &lt;input
                      type=&quot;text&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;LocationID&quot;
                      onChange={(e) =&gt; {
                        setLocationID(e.target.value);
                      }}
                      name=&quot;LocationID&quot;
                      value={LocationID}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;div className=&quot;form-class8&quot;&gt;
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;isValid&lt;/label&gt;
                    &lt;input
                      type=&quot;date&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;isValid&quot;
                      onChange={(e) =&gt; {
                        setisValid(e.target.value);
                      }}
                      name=&quot;isValid&quot;
                      value={isValid}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className=&quot;form-group&quot;&gt;
                    &lt;label&gt;isDeleted&lt;/label&gt;
                    &lt;input
                      type=&quot;date&quot;
                      className=&quot;form-control&quot;
                      placeholder=&quot;isDeleted&quot;
                      onChange={(e) =&gt; {
                        setisDeleted(e.target.value);
                      }}
                      name=&quot;isDeleted&quot;
                      value={isDeleted}
                    /&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
  
                &lt;button className=&quot;btn btn-primary btn-block&quot;&gt;Edit&lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  
  export default withRouter(UserMaster_Edit);
  </code></pre>
  <p>The fields that you are looking for are UserFP and Photo which are of type file.</p>
  <p><strong>Node backend:</strong></p>
  <pre><code>const multer = require(&quot;multer&quot;);
  const upload = multer({ storage: multer.memoryStorage() });
  
  
  app.put(&quot;/upusermst/:UserID&quot;, upload.single(&quot;Photo&quot;), (req, res) =&gt; {
    const userid = req.params.UserID;
    const CompanyCode = req.body.CmpnyCode;
    const UserID = req.body.UserID;
    const UserFullName = req.body.UserFullName;
    const UserDetail = req.body.UserDetail;
    const LoginID = req.body.LoginID;
    const Password = req.body.Password;
    const UserPin = req.body.UserPin;
    const UserEmailID = req.body.UserEmailID;
    const UserFP = req.body.UserFP;
    const Photo = req.body.Photo;
    const Photo2 = req.file;
    const IsActive = req.body.IsActive;
    const LicCount = req.body.LicCount;
    const DateCreated = req.body.DateCreated;
    const CreatedBy = req.body.CreatedBy;
    const RecordChanged = req.body.RecordChanged;
    const LocationID = req.body.LocationID;
    const isValid = req.body.isValid;
    const isDeleted = req.body.isDeleted;
    console.log(Photo2);
    db.query(
      &quot;UPDATE usermst SET CmpnyCode=?,UserID=?,UserFullName=?,UserDetail=?,LoginID=?,Password=?,UserPin=?,UserEmailID=?,UserFP=?,Photo=?,IsActive=?,LicCount=?,DateCreated=?,CreatedBy=?,RecordChanged=?,LocationID=?,isValid=?,isDeleted=? WHERE UserID=?&quot;,
      [
        CompanyCode,
        UserID,
        UserFullName,
        UserDetail,
        LoginID,
        Password,
        UserPin,
        UserEmailID,
        UserFP,
        Photo,
        IsActive,
        LicCount,
        DateCreated,
        CreatedBy,
        RecordChanged,
        LocationID,
        isValid,
        isDeleted,
        userid,
      ],
      (err, result) =&gt; {
        if (err) {
          console.log(err);
        } else {
          res.send(result);
        }
      }
    );
  });
  </code></pre>
  <p>Note that there is variable named Photo already but that was what I did before, now I am doing req.file for Photo2 and that is resulting to undefined.</p>
  <p>I would really appreciate if someone can edit the code for me for better understanding with some explanation as to why I may be getting undefined for &quot;Photo2&quot;</p>