How can I upload file from React to Express server?

Question

I have some troubleshoot with uploading files from react to server side, can you please show me how it must be made correctly?

Bellow, I'm trying to explain the idea what I'm trying to do...

Here is the frontend how looks like:

uploadFile(e) {
  let file = e.target.files[0];
  axios.post("/uploadFileAPI", file);
}

<input type="file" onChange={this.uploadFile()} />

Here is the backend:

router.post("/uploadFileAPI", (req, res) => {
  console.log(req.body.file); //Just need to console log fetched files here or it's path maybe
});

I hope you get point, what I'm trying to do. Can you please show me an example how it should be implemented properly? Thank you

Biaspoint · Accepted Answer · 2021-05-19 15:38:37Z

7

make the following chages.

<input type="file" onChange={this.uploadFile} />

import axios from 'axios';
uploadFile(event){
  const data = new FormData() ;
  data.append('file', event.target.files[0]);
  axios.post("${apiUrl}/uploadFileAPI", data)
      .then(res => { // then print response status
        console.log(res.statusText)
      })
}

api side

const multer = require('multer');
const storage = multer.diskStorage({
    destination: (req, file, callBack) => {
        callBack(null, 'uploads')
    },
    filename: (req, file, callBack) => {
        callBack(null, `${file.originalname}`)
    }
  })
let upload = multer({ dest: 'uploads/' })
const server = express();
server.post('/uploadFileAPI', upload.single('file'), (req, res, next) => {
    const file = req.file;
    console.log(file.filename);
    if (!file) {
      const error = new Error('No File')
      error.httpStatusCode = 400
      return next(error)
    }
      res.send(file);
  })

to learn about this refer https://www.youtube.com/watch?v=-Hvmj8yXfyU

edited May 19, 2021 at 15:38

Biaspoint

5813 silver badges21 bronze badges

answered Apr 11, 2020 at 10:16

Sayooj V R

2,3652 gold badges14 silver badges23 bronze badges

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

2 Comments

Doniyor Otamurodov Over a year ago

Yeah, but what about the backend?

Sayooj V R Over a year ago

You need to use multer. Updated my answer

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

you are calling the function in the onChange. You need to pass the function reference instead.

<input type="file" onChange={this.uploadFile} /> // remove the parenthesis i.e. ()

EDIT based on comment:

For receiving file at the backend, you can use libraries like multer or express-fileupload . Multer is a popular choice. There are lot of resources available online which helps you both from a frontend and backend perspective. See these for ex:

react-file-upload
Upload a file in React and send it to an Express server

Try it out and come back when you face issues.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 11, 2020 at 9:56

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

1 Comment

Doniyor Otamurodov Over a year ago

But, how can I fetch data from backend?

Collectives™ on Stack Overflow

How can I upload file from React to Express server?

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related