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!
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 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>
</div>
<br>
<button id="test">Append to FormData</button>