Duplicate data saving on MongoDB - reactjs

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);
});
}
});
}