I can't POST FormData Object from user uploaded file with Axios (React, Node.JS)-CodePudding

I'm trying to allow users to upload pictures to my application (React frontend, Node backend). I want to send the uploaded file from the client to the server, then make a request from my server to Firebase cloud functions that will deal with storing the image.

My HTML for the form is as follows:

 <div className='LoafGalleryWrap'>
    <h1 className='banner'>Illustrious Loafs</h1>
    <form>
      <label>Add a loaf to the exhibit:
        <input type='file' onChange={props.fileSelectedHandler} />
        <button onClick={props.fileUploadHandler}>Upload</button>
      </label>
    </form>
    <button onClick={props.toggleDisplayLandingPage}>Back</button>
</div>

I get the file data in my app with the following method. In the console.log, I can see the file data I want to send to my server.

fileUploadHandler(e) {
e.preventDefault();
e.stopPropagation();
let file = this.state.selectedFile;
let formData = new FormData();
formData.append('image', file);
formData.append('name', file.name);

const pic = formData.getAll('image');
console.log(formData)

axios({
  url: 'http://localhost:3001/uploadLoaf',
  method: 'POST',
  data: formData,
  headers: { "Content-Type": "multipart/form-data" }
})
.then(respo => console.log(respo))

}

In my server, when I check the request body, there is nothing there. I log it out and simply get an empty object. I've tried using multer and connect-multipart middlewares but none have been successful in showing the form data. What I am doing is similar to what this article suggest (https://www.geeksforgeeks.org/file-uploading-in-react-js/), but I am at a loss for how to get the data sent in my forms. Any guidance much appreciated.

My server route is as follows:

app.post('/uploadLoaf', (req, res) => {


console.log('uploadLoaf endpoint reached');
  console.log(req.body);
  res.status(201).json('complete')
  // axios.post('https://us-central1-sour-loafs.cloudfunctions.net/uploadFile/', 'upload_file', formData, {
  //     headers: {
  //       'Content-Type': 'multipart/form-data'
  //     }
  // })
  //   .then(result => {
  //     console.log(result);
  //     res.send(result);
  //   })
  //   .catch(err => {
  //     console.log(err);
  //     res.send(err)
  //   })
});

CodePudding user response：

try to replace the axios function you have with this

axios.post("http://localhost:3001/uploadLoaf", formData, { })
      .then(res => { // then print response status
        console.log(res.statusText)
      })

let me know what you use in the backend and what is the result on res function

CodePudding user response：

I managed to access the FormData file data by using Multer's upload function. My imports and server route configured so that I can access the file data is as follows:

    const multer = require("multer");
    const upload = multer({
      limits:{fileSize: 1000000},
      }).single("image");

app.post('/uploadLoaf', (req, res) => {
      upload(req, res, (err) => {
        if (err) {
          res.sendStatus(500);
        }
        console.log(req.file);
        res.send(req.file);
      });
    });

I am now unsure of how to send this file data to the API in the way the API expects, getting an error stating: "Error: could not handle the request\n". But at least I can now see the data from the form.