Uploading a file from react to remote server

Question

I am trying to upload a file every which way but I cannot get it to work. The client side code looks like this:

 var image = document.getElementById("upload").files[0];

I am grabbing the file in this way , I console log it and it works fine.

  const request = axios.post(PROJECTS_URL, {avatar: image});

I send the post request and get a status 500. When I change the body of the post request to just text, and edit the server to take in text, it works fine.

I have also tried this:

var formData = new FormData();
formData.append("avatar", image, image.name)
const request = axios.post(PROJECTS_URL, formData);

for the server side code I am using multer and it looks like this:

app.post("/api", upload.single("avatar"), (req, res) => {

var entry = new Entry({
    img: req.file.path
})

entry.save().then((data) => {
    res.status(200).send(data)
}, (e) => {
    res.send(e)
})
})

I set up the multer middleware just not including it. I am trying to upload an image to a mongodb database so I can later use the image url on the client side. I am really stuck here and would appreciate any suggestions.

In my console on chrom i see Content-Type: multipart/form-data; boundary=----WebKitFormBoundarye2QF7dzzJWEGUjJE; what is the boundary portion and is it preventing me from submiting the form?

Alright. Have you tried changing your request to [how it is written in this accepted answer](https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data)? Have you gotten it to work with e.g. Postman? — Tholle, Jul 16 '18 at 21:58
When I use postman i get a 200 and it returns the data. I changed the axios request method to match the one shown in the answer and i still get a 500 on the client side react project — George Salamanca, Jul 16 '18 at 22:22
In my console on chrom i see Content-Type: multipart/form-data; boundary=----WebKitFormBoundarye2QF7dzzJWEGUjJE; what is the boundary portion and is it preventing me from submiting the form? — George Salamanca, Jul 16 '18 at 23:22
I'm not sure. If that is the only header that differs from your working Postman request, it might be worth looking into. — Tholle, Jul 16 '18 at 23:26

score 0 · Accepted Answer · answered Jul 17 '18 at 04:54

so the issue was with my server, i was not pushing to git with the uploads file. It helped a lot to look at the logs on heroku and from there i was getting an error message "no such file or directory". I have been using the git commit -am command so regularly that i just forgot to check git status and then i uploaded the uploads file.

Uploading a file from react to remote server

1 Answers1