can't send data file to backend reactjs

Question

hi guys i try to send data input file from react js to nodejs , but i got undefined

here the client

const [myFile, setmyFile] = useState("");

  const onFileUpload = () => {
    try {
      const data = new FormData();
      data.append("file", myFile);
      Axios.post(url + "uploads", data).then((res) => {
        console.log(res.statusText);
      });
    } catch (error) {
      console.error("Error while uploading image to server", error);
    }
  };

<div>
        <h1>GeeksforGeeks</h1>
        <h3>File Upload using React!</h3>
        <div>
          <input
            type="file"
            onChange={(event) => {
              setmyFile(event.target.files[0]);
            }}
          />
          <button onClick={onFileUpload}>Upload!</button>
        </div>
        {/* {fileData()} */}
      </div>

here the server

app.post("/uploads", async (req, res, next) => {
  console.log(req.file);
});

can someone help me :D

I suggest you use a package like multer to handle files in the server. npmjs.com/package/multer — Shree Charan
– Shree Charan, Commented Nov 9, 2020 at 3:59

topdev87 · Accepted Answer · 2020-11-09 03:59:46Z

1

Use multer npm

const multer  = require('multer')
const upload = multer({
  dest: 'uploads/'
})

app.post("/uploads", upload.single('file'), async (req, res, next) => {
  console.log(req.file);
});

answered Nov 9, 2020 at 3:59

topdev87

8,7913 gold badges11 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

can't send data file to backend reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related