Duplicate data saving on MongoDB

Question

Hello I'm having a problem on my function save on my react project.

onSubmit={async (data, { setSubmitting, resetForm }) => {
                for (var i = 0; i < selectedImageFiles.length; i++) {
                    const urlLink = await generateUploadUrl(selectedImageFiles[i].type);

                    const to_base64 = (file) =>
                        new Promise((resolve, reject) => {
                            const reader = new FileReader();
                            reader.readAsDataURL(file);
                            reader.onload = () => resolve(reader.result);
                            reader.onerror = (error) => reject(error);
                        });

                    let blob = await to_base64(selectedImageFiles[i]);
                    let binary = atob(blob.split(",")[1]);

                    let array = [];
                    for (var x = 0; x < binary.length; x++) {
                        array.push(binary.charCodeAt(x));
                    }

                    let blobData = new Blob([new Uint8Array(array)], {
                        type: selectedImageFiles[i].type,
                    });

                    const uploadImageLink = await uploadImage(urlLink, blobData);
                    const newUploadImageLink = uploadImageLink.url.split("?")[0];

                    let productData = {
                        ...data,
                        shopId: userShop._id,
                        images: selectedImageFiles,
                        category: collectCategoryId()[0],
                    };

                    addProduct(productData, userShop._id, newUploadImageLink).then(
                        (response) => {
                            if (response.status === 200) {
                                response.json().then((result) => {
                                    setSubmitting(false);                                   });
                            } else {
                                response.json().then((result) => {
                                    setSubmitting(false);
                                });
                            }
                        }
                    );
                }
            }}
        >

When I upload 2 files it also create 2 files on my database with same image link on both.

What I want is to create 1 data on database then the images.url must be different link from what I uploaded.

data number 1 that is inserted

{
    "_id": {
        "$oid": "62395b2faff15038acab7d0e"
    },
    "images": [{
        "url": "https://devs.s3.ap-southeast-1.amazonaws.com/1647926063980.png",
    }, {
        "url": "https://devs.s3.ap-southeast-1.amazonaws.com/1647926063980.png",
    }],
}

data number 2 that is inserted

{
    "_id": {
        "$oid": "62395b2faff15038acab7d0e"
    },
    "images": [{
        "url": "https://devs.s3.ap-southeast-1.amazonaws.com/1647926063313.jpg",
    }, {
        "url": "https://devs.s3.ap-southeast-1.amazonaws.com/1647926063313.jpg",
    }],
}

this is my addProduct

export const addProduct = async (productData, shopId, url) => {
        const ls = new SecureLS({ encodingType: "aes" });
    
        const token = ls.get("token");
    
        const formdata = new FormData();
    
        // console.log(productData.name);
    
        for (let index = 0; index < productData.images.length; index++) {
            formdata.append("file", productData.images[index]);
        }
    
        formdata.append("category", productData.category);
        formdata.append("name", productData.name);
        formdata.append("quantity", productData.quantity);
        formdata.append("price", productData.price);
        formdata.append("description", productData.description);
        formdata.append("ingredients", productData.ingredients);
        formdata.append("url", url);
    
        return await fetch(`${API}/product/${shopId}`, {
            method: "POST",
            headers: {
                Authorization: `Bearer ${token}`,
            },
            body: formdata,
        })
            .then((response) => {
                return response;
            })
            .catch((err) => {
                //console.log(err)
                return err;
            });
    };

Answer 1

maybe something like this you need to be re debug and check addProduct last parameter :

onSubmit = async (data, { setSubmitting, resetForm }) => {
    let filesUrls = [];
    for (var i = 0; i < selectedImageFiles.length; i++) {
      const urlLink = await generateUploadUrl(selectedImageFiles[i].type);

      const to_base64 = (file) =>
        new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = (error) => reject(error);
        });

      let blob = await to_base64(selectedImageFiles[i]);
      let binary = atob(blob.split(",")[1]);

      let array = [];
      for (var x = 0; x < binary.length; x++) {
        array.push(binary.charCodeAt(x));
      }

      let blobData = new Blob([new Uint8Array(array)], {
        type: selectedImageFiles[i].type,
      });

      const uploadImageLink = await uploadImage(urlLink, blobData);
      const newUploadImageLink = uploadImageLink.url.split("?")[0];

      filesUrls.push(newUploadImageLink);


    }

    let productData = {
      ...data,
      shopId: userShop._id,
      images: filesUrls,
      category: collectCategoryId()[0],
    };
    addProduct(productData, userShop._id).then(
      (response) => {
        if (response.status === 200) {
          response.json().then((result) => {
            setSubmitting(false);
          });
        } else {
          response.json().then((result) => {
            setSubmitting(false);
          });
        }
      });
  }