I'm having trouble in uploading image in react. I use axios for the api request and multer & cloudinary for the file upload.

Update: In my dependency: "axios": "^0.19.0"

Required dependencies in my .js file: import axios from 'axios';

The image upload already worked in my backend using express. But in react it still doesn't work. I've already checked everything and it seems fine. Below is the code:

  const [text, setText] = useState('');
  const [image, setImage] = useState([]);

  const onSubmit = async e => { 
    e.preventDefault();
    let data = new FormData();
    console.log(image + ' ' + 'this is image pathname')
    data.append('image', image);

      axios.post('/api/posts/image', data)
     .then(res => {
        console.log(res.data + 'this is data after api call');
     })
     .catch(err => console.log(err));
  };

return (
   <Fragment>
      <form onSubmit={e => onSubmit(e)} className="create-post-form">
         <input
      type="file"
      placeholder="Write something..." 
      name="image"
      value={image}
          onChange={e => setImage(e.target.value)}
         />
        <br/>
    <button className="btn btn-post">Post</button>
      </form>
  </Fragment>
);

UPDATE Server side code:

app.post('/image', upload.single('image'), async (req, res) => {

    try {
        const result = await cloudinary.v2.uploader.upload(req.file.path);
        res.send(result);
    } catch(err) {
        res.status(500).send('Server Error');
    }
});

Error message: POST http://localhost:3000/api/posts/image 500 (Internal Server Error)

I'm having trouble in uploading image in react. I use axios for the api request and multer & cloudinary for the file upload.

Update: In my dependency: "axios": "^0.19.0"

Required dependencies in my .js file: import axios from 'axios';

The image upload already worked in my backend using express. But in react it still doesn't work. I've already checked everything and it seems fine. Below is the code:

  const [text, setText] = useState('');
  const [image, setImage] = useState([]);

  const onSubmit = async e => { 
    e.preventDefault();
    let data = new FormData();
    console.log(image + ' ' + 'this is image pathname')
    data.append('image', image);

      axios.post('/api/posts/image', data)
     .then(res => {
        console.log(res.data + 'this is data after api call');
     })
     .catch(err => console.log(err));
  };

return (
   <Fragment>
      <form onSubmit={e => onSubmit(e)} className="create-post-form">
         <input
      type="file"
      placeholder="Write something..." 
      name="image"
      value={image}
          onChange={e => setImage(e.target.value)}
         />
        <br/>
    <button className="btn btn-post">Post</button>
      </form>
  </Fragment>
);

UPDATE Server side code:

app.post('/image', upload.single('image'), async (req, res) => {

    try {
        const result = await cloudinary.v2.uploader.upload(req.file.path);
        res.send(result);
    } catch(err) {
        res.status(500).send('Server Error');
    }
});

Error message: POST http://localhost:3000/api/posts/image 500 (Internal Server Error)

• javascript
• axios
• multer
• cloudinary

Share Improve this question Follow edited Jun 24, 2021 at 6:12 CJ Cruz asked Sep 13, 2019 at 15:22 CJ CruzCJ Cruz 9811 gold badge22 silver badges77 bronze badges 9

• What does the error say if you log it on the server? console.error(err) – Cory Danielson Commented Sep 16, 2019 at 18:58
• in you catch code please write console.log(err) and paste what the error said here. – MBehtemam Commented Sep 16, 2019 at 19:46
• No error if i do console.log(err). because the server side is rendering correctly. – CJ Cruz Commented Sep 17, 2019 at 16:12
• Are you using npmjs./package/multer ? Is that how image is being converted to req.file? – Cory Danielson Commented Sep 19, 2019 at 0:56
• You mentioned that the files are being uploaded correctly, so your error might be in how you are sending the response. res.send(result); might be causing the problem. Does the request return a 500 in the your browser dev tools? What actually is result? – Cory Danielson Commented Sep 19, 2019 at 1:06

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 3

first I can't see any headers like this :

const config = {
            headers: { 'content-type': 'multipart/form-data' }
           }

so it should be like this :

   const config = {
            headers: { 'content-type': 'multipart/form-data' }
           }

   axios.post('/api/posts/image', data,config)
     .then(res => {
        console.log(res.data + 'this is data after api call');
     })
     .catch(err => console.log(err));

also I can't see you server code but please check that you have multer in you package and also you express config.