Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'

Question

I have an uploader that allows a user to upload several pictures. In order to only create or update the images he wants to add/change, I update an object that looks like this:

{main: Blob, "1": Blob, "2":Blob}

So if only needs to update "1" later, the sent object will only contain {"1": Blob}

When clicking on save, it triggers a function that is supposed to append the images to a formData(). Sadly the formData is never updated. I have the following error:

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'.

export async function uploadImages(files, userId) {
  try {
    const images = new FormData();
    files.main && images.append("image", files.main, "main");
    files[1] && images.append("image", files[1], "1");
    files[2] && images.append("image", files[2], "2");

    const res = await ax.post(process.env.SERVER_URL + "/upload-images", {
      images,
      userId,
    });
    return "success"
  } catch (err) {
    return "error"
  }
}

How to fix this? Thanks!

pearcake · Accepted Answer · 2020-09-24 19:35:41Z

3

You should not be able to see FormData object contents in console, because its not serializable. You can check request payload instead, check "Network" tab in your browser dev tools, find your request and look at the bottom of "Headers" tab to see "FormData" log. You will see something like this:

Also, you should set header "Content-Type" to "multipart/form-data" in axios. Here is working example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <input type="file" multiple id="filepicker" />

    <button id="send">Send</button>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.20.0/axios.min.js"></script>
    <script>
      const myformData = new FormData();

      document
        .querySelector('#filepicker')
        .addEventListener('change', function (event) {
          const { files } = event.target;

          Object.values(files).forEach(function (file, index) {
            myformData.append(index, file);
          });
        });

      document.querySelector('#send').addEventListener('click', function () {
        axios({
          method: 'post',
          url: 'http://google.com',
          data: myformData,
          headers: { 'Content-Type': 'multipart/form-data' },
        })
          .then((response) => console.log(response))
          .catch((err) => console.log(err));
      });
    </script>
  </body>
</html>

answered Sep 24, 2020 at 19:35

pearcake

3462 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

HelloWorldEngineer Over a year ago

I actually log the images formData when when receiving the request in my node server. I thought I could see it through req.body.images. By doing your method, I receive the error "Error: Multipart: Boundary not found at new Multipart".

pearcake Over a year ago

I just checked and it works. If you are using Node.js and Express, then you probably missing middleware for handling file uploads, check this answer

HelloWorldEngineer Over a year ago

But I already have bodyparser and multer to handle data parsing, do I need to install busboy as well?!

pearcake Over a year ago

If you already have multer, then you dont need to install busboy (since multer uses busboy as a dependency). It means that there is something wrong with your code logic. You can use code snippet from the answer I linked above, or create a new question, since backend logic is not related to FormData question.

HelloWorldEngineer Over a year ago

Ok I've finally found the mistake: I was trying to access the data through req.body and not req.file... It works now. However, I still need to send the user id as well in the same post request. Would you know how to do it?

|

Roshinie Jayasundara · Accepted Answer · 2021-11-02 12:23:25Z

I faced this issue on my react native app. To solve it I had to convert the image path to a blob. The code for my handle upload function is given below.

const handleUpload = async () => {
    if (selectedImage.localUri !== '') {

        const image_uri =  Platform.OS === 'ios' ? selectedImage.localUri.replace('file://', '') : selectedImage.localUri;

        const response = await fetch(image_uri);
        const blob = await response.blob();

        const formData = new FormData();
        formData.append('image', blob, "xray_image.jpg");
  
        setLoading(true);

        axios.post("https://...", formData)
            .then((result) => {
               console.log(result);
            })
            .catch((err) => {
                console.log(err);
              
            });

    } else {
        console.log("Select a file error message");
    }
};

vicky gupta · Accepted Answer · 2020-09-24 17:44:10Z

0

export async function uploadImages(files, userId) {
  try {
    const images = new FormData();
    for(const file of files){
        images.append("image", file);
    }
    const res = await ax.post(process.env.SERVER_URL + "/upload-images", {
      images,
      userId,
    });
    return "success"
  } catch (err) {
    return "error"
  }
}

answered Sep 24, 2020 at 17:44

vicky gupta

462 bronze badges

1 Comment

HelloWorldEngineer Over a year ago

The formData is still empty.

MD SHAYON · Accepted Answer · 2021-04-06 10:01:13Z

-4

you have to pass the extension along with the name

files[1] && images.append("image", files[1], "custom-name.jpg");

answered Apr 6, 2021 at 10:01

MD SHAYON

8,11156 silver badges43 bronze badges

Collectives™ on Stack Overflow

Failed to execute 'append' on 'FormData': parameter 2 is not of type 'Blob'

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related