Trying to upload multiple images, but can get only one uploaded,

LeoJohn

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

Tom

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

LeoJohn

Thank you for your help