Trying to upload multiple images, but can get only one uploaded,
const Upload = () => {
async function handleOnSubmit(event: React.FormEvent<HTMLFormElement>) {
event.preventDefault();
const form = event.currentTarget;
const fileInput = form.elements.namedItem('getImage') as HTMLInputElement;
const formData = new FormData();
let arrayFiles;
if (fileInput)
arrayFiles = fileInput.files ? Array.from(fileInput.files) : [];
if (arrayFiles){
for (const file of arrayFiles) {
formData.append('file', file);
}
}
formData.append('upload_preset', 'leave blank here');
console.log(formData.getAll("file"));
const data = await fetch('https://api.cloudinary.com/v1_1/[ i leave blank here ]/image/upload', {
method: 'POST',
body: formData
}).then(r => r.json());
}
return (
<form onSubmit={handleOnSubmit}>
<input name="getImage" type="file" placeholder='pick files' multiple accept='image/jpeg,image/png,image/webp,image/gif,video/mp4,video/quicktime' />
<button type="submit">upload</button>
</form>
)
}
export default Upload
Best Answer
-
Hi @LeoJohn ,
Thanks for reaching out.
It looks like you're making a direct upload to our upload API and the API only supports one upload at a time.
So you will need to loop over all the files and make a separate API call for each file.
More info. here: https://support.cloudinary.com/hc/en-us/articles/202520662-How-can-I-bulk-upload-my-images-
Please also take a look at an example here: https://cloudinary.com/documentation/upload_images#code_explorer_upload_multiple_files_using_a_form_signed
Thomas
0
Answers
-
Thank you for your help
0