400 error on uploading a file (Axios Post)

Questions and Answers Frontend-Vue
1

Hi,

I’m having a problem. When I try to make a post request (axios), i’ve got a 400 error.

imageSubmit(){
          console.log(event.target.files[0]);

          axios.post('http://localhost:1337/upload', event.target.files[0])
          .then(response => {
            console.log(response);
          });

        },

Screenshot 2020-10-19 at 20.34.46
Screenshot 2020-10-19 at 20.34.461908×136 31.2 KB

2

I’m guessing that Axios is not sending the files over as multipart/form-data, see our example here: https://strapi.io/documentation/v3.x/plugins/upload.html#code-example

3

In that case your Axios request is sending the object that contains only the information about the file and not the file itself.

Take a look at this example: Uploading images to strapi with react and axios

4

Thanks for your help! I’m still having the same 400 error…

imageSubmit(){

      const formData = new FormData();

      Array.from(this.modifiedData.file).forEach(image => {
        formData.append('file', image);
      });

        axios.post('http://localhost:1337/upload', formData, {
          headers: { 'Content-Type': 'multipart/form-data' },
        })
        .then(response => {
          console.log(response);
        });
      },
5

What framework are you using with that code?

6

I’m using Nuxt.

7

I’ve moved the question over to our Frontend-Vue Q&A area to see if there is anyone using Vue/Nuxt that can give any pointers.

9

Hey @tomyoungbloods,

Could you share the response body from the DevTools network tab? This could provide a reason why you get an 400 (Bad Request) .

10

you should change formData to files because strapi only recognize it.

11

Hi @MattieBelt

{"statusCode":400,"error":"Bad Request","message":"Bad Request","data":{"errors":[{"id":"Upload.status.empty","message":"Files are empty"}]}}

12

I’m still getting the Files are empty message…

13

did you change to formData.append(‘files’, image);

14

I believe your input needs the name “files” on it if it doesn’t.

15

I seem to be getting a 500 error if I simply add the content-type header “multipart-data”. error looks like this: bad content-type header, no multipart boundary

I am however using axios and React.

16

This means you are not sending the file.

1 Like
17

Fascinating! Do you have any idea where I could’ve gone wrong? This is the request:

let formData = new FormData()

formData.append('files', uploadedFile);
console.log(uploadedFile)               //check image below
for (var pair of formData.entries()) {
  console.log(pair[0]+ ', ' + pair[1]); //check image below
} 

axios({
   method: 'post',
   url: baseUrl + 'upload',
   data: formData,
   headers: {} // with or without 'Content-Type': 'multipart/form-data' I can't seem to get a 200 response 
})

image

18

Your code looks ok to me, not sure where is the problem. What strapi version do you use?

Also, take a look at one of my blueprints which uses React & Axios to upload a file:

1 Like
19

I am using Strapi v3.4.6. Thanks for your help! I’ll see what I can do about this.

20

Btw, you can open that sandbox and try to upload a file.
If your strapi localhost is running on 1337 on the same PC, the browser will make a request to your local strapi instance since the requests from this sandbox are client-side.

21

I’ll have a look and see if that makes a difference. I was trying to upload to an https server, maybe thats where the problem might be.