file size affecting upload order when uploading array of files/images to s3 - NextJS #5308
-
Hello, I'm currently accepting multiple images/files from the frontend and then passing them to the backend(route handler). I store the files in an array - in the order which I would like to upload. However, the code I have right now doesn't seem to upload them "one by one". For example, if I have an array of files like this (assume that the name of the files are also the size of the files): [7mb, 24kb, 100kb], I would loop over this array and expect that the createdAt date is the order of 7mb -> 24kb -> 100kb. So for example, the 7mb -> 2023-10-3 21:00:04 However, the code I have right now would upload them like this: 24kb -> 100kb -> 7mb which is the order of file size (because the small file takes less time to upload even though it's at the end of the array). const uploadImages = async (file: any) => {
const imageName = randomBytes(16).toString("hex")
const command = new PutObjectCommand({
Bucket: process.env.AWS_BUCKET_NAME,
Key: imageName,
ContentType: file.type
})
const preSignedUrl = await getSignedUrl(client, command, {
expiresIn: 1000
})
const upload = await fetch(preSignedUrl, {
method: "PUT",
body: file,
headers: { "Content-Type": file.type }
})
if (upload.ok) return new Response("OK")
}
const photoUrls = photosImagesArray.map((file) => {
uploadImages(file)
}) Q. Would there be some kind of way to wait until the upload of the previous file/image to be completed before starting the upload process of the next one? Much help would be appreciated! I'm using Next 13.5 btw |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 3 replies
-
Hey @hampak map is not waiting for const uploadImages = async(file) => {
const imageName = randomBytes(16).toString("hex")
const command = new PutObjectCommand({
Bucket: process.env.AWS_BUCKET_NAME,
Key: imageName,
ContentType: file.type
})
const preSignedUrl = await getSignedUrl(client, command, {
expiresIn: 1000
})
const upload = await fetch(preSignedUrl, {
method: "PUT",
body: file,
headers: { "Content-Type": file.type }
})
if (upload.ok) return new Response("OK")
};
const uploadAllImages = async(photosImagesArray) => {
for (let i = 0; i < photosImagesArray.length; i++) {
await uploadImages(photosImagesArray[i]);
console.log(`Image at index ${i} has been uploaded.`);
}
};
uploadAllImages(photosImagesArray); @github-actions proposed-answer |
Beta Was this translation helpful? Give feedback.
-
Hello! Reopening this discussion to make it searchable. |
Beta Was this translation helpful? Give feedback.
Hey @hampak map is not waiting for
uploadImages
. You can try something like this: