How to upload a file to MySQL database using Nodejs backend and display the photo

Question

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.

I have declared a new variable "Photo2" which is storing that photo and I console.log it but I get "undefined" in my console

The form:

import axios from "axios";
import { React, useState, useEffect } from "react";
import { useHistory, withRouter } from "react-router-dom";

function UserMaster_Edit(props) {
  const [CmpnyCode, setCmpnyCode] = useState("");
  const [UserID, setUserID] = useState("");
  const [UserFullName, setUserFullName] = useState("");
  const [UserDetail, setUserDetail] = useState("");
  const [LoginID, setLoginID] = useState("");
  const [Password, setPassword] = useState("");
  const [UserPin, setUserPin] = useState("");
  const [UserEmailID, setUserEmailID] = useState("");
  const [UserFP, setUserFP] = useState("");
  const [Photo, setPhoto] = useState("");
  const [IsActive, setIsActive] = useState("");
  const [LicCount, setLicCount] = useState("");
  const [DateCreated, setDateCreated] = useState("");
  const [CreatedBy, setCreatedBy] = useState("");
  const [RecordChanged, setRecordChanged] = useState("");
  const [LocationID, setLocationID] = useState("");
  const [isValid, setisValid] = useState("");
  const [isDeleted, setisDeleted] = useState("");

  const history = useHistory();

  const argu = props.match.params.UserID;

  useEffect(() => {
    axios.get("http://localhost:8000/getuserid/" + argu).then((response) => {
      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 = () => {
    axios.put("http://localhost:8000/upusermst/" + argu, {
      CmpnyCode,
      UserID,
      UserFullName,
      UserDetail,
      LoginID,
      Password,
      UserPin,
      UserEmailID,
      UserFP,
      Photo,
      IsActive,
      LicCount,
      DateCreated,
      CreatedBy,
      RecordChanged,
      LocationID,
      isValid,
      isDeleted,
    });
    history.push("/usermst");
  };

  return (
    <div className="App">
      <div className="auth-wrapper">
        <div className="auth-inner">
          <form enctype="multipart/form-data" onSubmit={() => editData()}>
            <h3> Edit User Master</h3>
            <div>
              <div className="form-class8">
                <div className="form-group">
                  <label>Company Code</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="CompanyCode"
                    value={CmpnyCode}
                    onChange={(e) => {
                      setCmpnyCode(e.target.value);
                    }}
                    name="CmpnyCode"
                  />
                </div>

                <div className="form-group">
                  <label>UserID</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="UserID"
                    value={UserID}
                    onChange={(e) => {
                      setUserID(e.target.value);
                    }}
                    name="UserID"
                  />
                </div>

                <div className="form-group">
                  <label>UserFullName</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="UserFullName"
                    value={UserFullName}
                    onChange={(e) => {
                      setUserFullName(e.target.value);
                    }}
                    name="UserFullName"
                  />
                </div>

                <div className="form-group">
                  <label>UserDetail</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="UserDetail"
                    onChange={(e) => {
                      setUserDetail(e.target.value);
                    }}
                    name="UserDetail"
                    value={UserDetail}
                  />
                </div>

                <div className="form-group">
                  <label>LoginID</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="LoginID"
                    onChange={(e) => {
                      setLoginID(e.target.value);
                    }}
                    name="LoginID"
                    value={LoginID}
                  />
                </div>

                <div className="form-group">
                  <label>Password</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="Password"
                    onChange={(e) => {
                      setPassword(e.target.value);
                    }}
                    name="Password"
                    value={Password}
                  />
                </div>

                <div className="form-group">
                  <label>UserPin</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="UserPin"
                    onChange={(e) => {
                      setUserPin(e.target.value);
                    }}
                    name="UserPin"
                    value={UserPin}
                  />
                </div>

                <div className="form-group">
                  <label>UserEmailID</label>
                  <input
                    type="email"
                    className="form-control"
                    placeholder="UserEmailID"
                    onChange={(e) => {
                      setUserEmailID(e.target.value);
                    }}
                    name="UserEmailID"
                    value={UserEmailID}
                  />
                </div>
              </div>

              <div className="form-class8">
                <div className="form-group">
                  <label>UserFP</label>
                  <input
                    type="file"
                    className="form-control"
                    placeholder="UserFP"
                    onChange={(e) => {
                      setUserFP(e.target.value);
                    }}
                    name="UserFP"
                    value={UserFP}
                  />
                </div>

                <div className="form-group">
                  <label>Photo</label>
                  <input
                    type="file"
                    className="form-control"
                    placeholder="Photo"
                    onChange={(e) => {
                      setPhoto(e.target.value);
                    }}
                    name="Photo"
                    value={Photo}
                  />
                </div>

                <div className="form-group">
                  <label>IsActive</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="IsActive"
                    onChange={(e) => {
                      setIsActive(e.target.value);
                    }}
                    name="IsActive"
                    value={IsActive}
                  />
                </div>

                <div className="form-group">
                  <label>LicCount</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="LicCount"
                    onChange={(e) => {
                      setLicCount(e.target.value);
                    }}
                    name="LicCount"
                    value={LicCount}
                  />
                </div>

                <div className="form-group">
                  <label>DateCreated</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="DateCreated"
                    onChange={(e) => {
                      setDateCreated(e.target.value);
                    }}
                    name="DateCreated"
                    value={DateCreated}
                  />
                </div>

                <div className="form-group">
                  <label>CreatedBy</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="CreatedBy"
                    onChange={(e) => {
                      setCreatedBy(e.target.value);
                    }}
                    name="CreatedBy"
                    value={CreatedBy}
                  />
                </div>

                <div className="form-group">
                  <label>RecordChanged</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="RecordChanged"
                    onChange={(e) => {
                      setRecordChanged(e.target.value);
                    }}
                    name="RecordChanged"
                    value={RecordChanged}
                  />
                </div>

                <div className="form-group">
                  <label>LocationID</label>
                  <input
                    type="text"
                    className="form-control"
                    placeholder="LocationID"
                    onChange={(e) => {
                      setLocationID(e.target.value);
                    }}
                    name="LocationID"
                    value={LocationID}
                  />
                </div>
              </div>

              <div className="form-class8">
                <div className="form-group">
                  <label>isValid</label>
                  <input
                    type="date"
                    className="form-control"
                    placeholder="isValid"
                    onChange={(e) => {
                      setisValid(e.target.value);
                    }}
                    name="isValid"
                    value={isValid}
                  />
                </div>

                <div className="form-group">
                  <label>isDeleted</label>
                  <input
                    type="date"
                    className="form-control"
                    placeholder="isDeleted"
                    onChange={(e) => {
                      setisDeleted(e.target.value);
                    }}
                    name="isDeleted"
                    value={isDeleted}
                  />
                </div>
              </div>

              <button className="btn btn-primary btn-block">Edit</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

export default withRouter(UserMaster_Edit);

The fields that you are looking for are UserFP and Photo which are of type file.

Node backend:

const multer = require("multer");
const upload = multer({ storage: multer.memoryStorage() });


app.put("/upusermst/:UserID", upload.single("Photo"), (req, res) => {
  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(
    "UPDATE usermst SET CmpnyCode=?,UserID=?,UserFullName=?,UserDetail=?,LoginID=?,Password=?,UserPin=?,UserEmailID=?,UserFP=?,Photo=?,IsActive=?,LicCount=?,DateCreated=?,CreatedBy=?,RecordChanged=?,LocationID=?,isValid=?,isDeleted=? WHERE UserID=?",
    [
      CompanyCode,
      UserID,
      UserFullName,
      UserDetail,
      LoginID,
      Password,
      UserPin,
      UserEmailID,
      UserFP,
      Photo,
      IsActive,
      LicCount,
      DateCreated,
      CreatedBy,
      RecordChanged,
      LocationID,
      isValid,
      isDeleted,
      userid,
    ],
    (err, result) => {
      if (err) {
        console.log(err);
      } else {
        res.send(result);
      }
    }
  );
});

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.

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 "Photo2"

Answer 1

After a lot of digging I finally figured out the problem. I had not installed jQuery hence the put request being sent by axios was giving the result undefined in the backend. I used fetch instead and it worked. The code is now as follows: The form:

const uploadPhoto = (event, argu) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append("avatar", Photo);
    fetch("http://localhost:8000/uploadphoto/" + argu, {
      method: "PUT",
      body: formData,
    });
  };

 <form enctype="multipart/form-data">
             <div className="form-group">
                  <label>Photo</label>
                  <input
                    type="file"
                    className="form-control"
                    placeholder="Photo"
                    onChange={(e) => {
                      setPhoto(e.target.files[0]);
                    }}
                    id="Photo"
                    name="Photo"
                  />
</form>

Backend:

const multer = require("multer");
const fs = require("fs");

const upload = multer({ dest: "uploads/" });


app.put("/uploadphoto/:UserId", upload.single("avatar"), (req, res) => {
  const userid = req.params.userId;
  const photo = req.file;
  const fileType = photo.mimetype.split("/")[1];
  let newFileName = photo.filename + "." + fileType;

  fs.rename(
    `./uploads/${photo.filename}`,
    `./uploads/${newFileName}`,
    function () {
      console.log("file renamed and uploaded");
    }
  );
  console.log(photo);
  console.log("fileName ", newFileName);

  db.query(
    "UPDATE usermst SET Photo=? WHERE UserID=?",
    [newFileName, userid],
    (err, result) => {
      console.log(err);
      res.json({ result });
    }
  );
});```

Answer 2

Because file type inputs are not in e.target.value. The are in e.target.files. As you have only one image that would be e.target.files[0] in your case.

<input
  type="file"
  lassName="form-control"
  placeholder="Photo"
  onChange={(e) => {
    setPhoto(e.target.files[0]);
  }}
  name="Photo"
/>

By the way, you can't just send file along with request. You need to use formData instead.

Check out my minimal example:

import { useState } from "react";

export default function PrivatePage(props) {
  const [image, setImage] = useState(null);
  const [createObjectURL, setCreateObjectURL] = useState(null);

  const uploadToClient = (event) => {
    if (event.target.files && event.target.files[0]) {
      const i = event.target.files[0];

      setImage(i);
      setCreateObjectURL(URL.createObjectURL(i));
    }
  };

  const uploadToServer = async (event) => {
    const body = new FormData();
    body.append("file", image);
    const response = await fetch("/api/formidable", {
      method: "POST",
      body
    });
  };

  return (
    <div>
      <div>
        {createObjectURL&&<img height="500px" width="1000px" src={createObjectURL}/>}
        <h4>Select Image</h4>
        <input type="file" name="myImage" onChange={uploadToClient} />
        <button
          className="btn btn-primary"
          type="submit"
          onClick={uploadToServer}
        >
          Send to server
        </button>
      </div>
    </div>
  );
}