fix(upload): implement iterable on input.files (#603)

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(`<input type="file" multiple/>`)
+  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)
+})

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<File> = {
     ...files,
     length: files.length,
     item: (index: number) => files[index],
+    [Symbol.iterator]() {
+      let i = 0
+      return {
+        next: () => ({
+          done: i >= files.length,
+          value: files[i++],
+        }),
+      }
+    },
   }
 
   fireEvent(