diff --git a/src/__tests__/upload.js b/src/__tests__/upload.js
index f83c5a57..39cea8ca 100644
--- a/src/__tests__/upload.js
+++ b/src/__tests__/upload.js
@@ -219,3 +219,19 @@ test('should not trigger input event when selected files are the same', () => {
expect(eventWasFired('input')).toBe(true)
expect(element.files).toHaveLength(0)
})
+
+test('input.files implements iterable', () => {
+ const {element, getEvents} = setup(``)
+ const files = [
+ new File(['hello'], 'hello.png', {type: 'image/png'}),
+ new File(['there'], 'there.png', {type: 'image/png'}),
+ ]
+
+ userEvent.upload(element, files)
+ const eventTargetFiles = getEvents('input')[0].target.files
+
+ expect(eventTargetFiles).toBe(element.files)
+ expect(eventTargetFiles).not.toEqual(files)
+
+ expect(Array.from(eventTargetFiles)).toEqual(files)
+})
diff --git a/src/upload.ts b/src/upload.ts
index a799206c..0cae629e 100644
--- a/src/upload.ts
+++ b/src/upload.ts
@@ -47,10 +47,19 @@ function upload(
// the event fired in the browser isn't actually an "input" or "change" event
// but a new Event with a type set to "input" and "change"
// Kinda odd...
- const inputFiles: FileList = {
+ const inputFiles: FileList & Iterable = {
...files,
length: files.length,
item: (index: number) => files[index],
+ [Symbol.iterator]() {
+ let i = 0
+ return {
+ next: () => ({
+ done: i >= files.length,
+ value: files[i++],
+ }),
+ }
+ },
}
fireEvent(