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

Question

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

<div class="form-group">
            <label>Important Property Documents Upload</label>
            <input type="file" id="update_importantdocupload" name="update_importantdocupload" class="form-control" placeholder="Upload a Compressed file will necessary documents included." required>
        <div class="form-group">
            <label>Important Property Documents Upload</label>
            <input type="file" id="add_importantdocupload" name="add_importantdocupload" class="form-control file_upload" placeholder="Upload a Compressed file will necessary documents included." required>
        </div>
        
        <div class="form-group">
            <label>Property Cover Image</label>
            <input type="file" id="add_propertycoverimage" name="add_propertycoverimage" class="form-control file_upload" placeholder="Upload a Cover Image" required>
        </div>
        
        <div class="form-group">
            <label>Other Property Images</label>
            <input type="file" id="add_propertyotherimages" name="add_propertyotherimages" class="form-control file_upload" 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!