Get multiple file uploads from multiple inputs and appending them to form data-CodePudding

A Form in my HTML page has the following 3 fields that can be used to upload 3 separate files.

<div >
            <label>Important Property Documents Upload</label>
            <input type="file" id="update_importantdocupload" name="update_importantdocupload"  placeholder="Upload a Compressed file will necessary documents included." required>
        <div >
            <label>Important Property Documents Upload</label>
            <input type="file" id="add_importantdocupload" name="add_importantdocupload"  placeholder="Upload a Compressed file will necessary documents included." required>
        </div>
        
        <div >
            <label>Property Cover Image</label>
            <input type="file" id="add_propertycoverimage" name="add_propertycoverimage"  placeholder="Upload a Cover Image" required>
        </div>
        
        <div >
            <label>Other Property Images</label>
            <input type="file" id="add_propertyotherimages" name="add_propertyotherimages"  placeholder="Compress All Property Images and Upload" required>
        </div>

And after the files are uploaded, I was using the following Javascript code to get the uploaded files and append them to the rest of the form data. (Classes had to be used because only 1 API code has been drafted to upload files)

    let formData = new FormData();

for (let file of document.getElementsByClassName('file_upload').files) {
    formData.append("files", file);
}

But this throws an error that this is not iterable.

What is the best method to go about this?

Thanks in advance!

CodePudding user response：

getElementsByClassName returns an array-like object of all child elements which have all of the given class name(s). ^ref

The important keyword is array-like... To iterate that, you need a real array. So you can use Array.from().

And then, for each elements, you want the first file of the files array.

I also used FormData.getAll() just to console.log the result...

document.getElementById("test").addEventListener("click", function() {

  let formData = new FormData();

  for (let inputElement of Array.from(document.getElementsByClassName('file_upload'))) {
    formData.append("files", inputElement.files[0]);
  }

  console.log(formData.getAll("files"))

})

<div >
  <label>Important Property Documents Upload</label>
  <input type="file" id="update_importantdocupload" name="update_importantdocupload"  placeholder="Upload a Compressed file will necessary documents included." required>
  <div >
    <label>Important Property Documents Upload</label>
    <input type="file" id="add_importantdocupload" name="add_importantdocupload"  placeholder="Upload a Compressed file will necessary documents included." required>
  </div>

  <div >
    <label>Property Cover Image</label>
    <input type="file" id="add_propertycoverimage" name="add_propertycoverimage"  placeholder="Upload a Cover Image" required>
  </div>

  <div >
    <label>Other Property Images</label>
    <input type="file" id="add_propertyotherimages" name="add_propertyotherimages"  placeholder="Compress All Property Images and Upload" required>
  </div>

</div>

<br>
<button id="test">Append to FormData</button>