400 error on uploading a file (Axios Post)


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


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


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

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

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


      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 => {

What framework are you using with that code?

I’m using Nuxt.

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.

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) .

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

Hi @MattieBelt

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

I’m still getting the Files are empty message…

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

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

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.

This means you are not sending the file.

1 Like

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

   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 


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

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

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.

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.