Rachid Oudouch
Rachid Oudouch

Reputation: 76

'FIles are Empty' error when uploading files on Strapi Media Library

enter image description here

I am facing an issue with strapi upload provider. Can somebody help here? Where is this issue comming from ?

Upvotes: 5

Views: 3152

Answers (5)

The error has nothing to do with axios per se, as you can upload files to strapi using Fetch API, which is a native library in most of browsers.

I've also had this same problem ('Files are empty'). My problem was that I added a wrong parameter in FormData.append. It should be FILES, in the plural formData.append('files', file);, and not in the singular formData.append('file', file);

Here's the function I was using:

const handleUpload = async (e: any) => {
    e.preventDefault();

    if (file) {
      console.log('Uploading file...');

      const formData = new FormData();
      // The first parameter here in append should be FILES and not FILE
      // as I initially added. That was the mistake.
      formData.append('file', file);

      console.log(file);
      try {
        const result = await fetch('http://localhost:1337/api/upload/', {
          method: 'POST',
          headers: {
            Authorization: `Bearer ${session?.user.jwt}`,
          },
          body: formData,
        });

        const data = await result.json();

        console.log(data);
      } catch (error) {
        console.error(error);
      }
    }
  };

For other examples, see Strapi documentation https://docs.strapi.io/dev-docs/plugins/upload#upload-files

Upvotes: 1

Damian Tokarczyk
Damian Tokarczyk

Reputation: 526

One of my dependency (3rd party e-mail provider to Strapi) has Axios version >1.0. After removed this package upload started working.

Upvotes: 0

Gulshan Prajapati
Gulshan Prajapati

Reputation: 1003

I was also facing the same issue, I don't know how, But when I search on my old Project there no Axios installed, I think Strapi doesn't uses axios package at this time.

I just uninstall the axios package

npm uninstall axios

Delete .cache, build and node_modules folder

Re-install all the package

npm i

After Installation Run you code

Upvotes: 0

this problem is related to the Axios version.

You have to downgrade it to early version and will work properly. You can edit your package.json and change the version:

...
"axios": "^0.21.4",
...

Then, remove your node_modules folder and run

npm install

Upvotes: 0

Tony Lisanti
Tony Lisanti

Reputation: 67

I was having the same issue. I think it's related to the latest version of axios. To get around the issue I uninstalled axios, deleted the .cache and build directories, re-installed an earlier version of axios using "npm i axios@0" then I ran "npm run develop" then I refreshed the admin panel. After doing that, I was able to add files again.

Upvotes: -1

Related Questions