diff --git a/src/__tests__/upload.js b/src/__tests__/upload.js
index f09a6ae2..bb6a64ee 100644
--- a/src/__tests__/upload.js
+++ b/src/__tests__/upload.js
@@ -163,3 +163,32 @@ test('should call onChange/input bubbling up the event when a file is selected',
expect(onInputInput).toHaveBeenCalledTimes(1)
expect(onInputForm).toHaveBeenCalledTimes(1)
})
+
+test('should not upload file with invalid unaccepted format', () => {
+ const file = new File(['hello'], 'hello.png', {type: 'image/png'})
+
+ const {element} = setup('')
+
+ userEvent.upload(element, file)
+
+ expect(element.files[0]).toBeUndefined()
+ expect(element.files.item(0)).toBeNull()
+ expect(element.files).toHaveLength(0)
+})
+
+test('should not upload multiple files with invalid unaccepted formats', () => {
+ const files = [
+ new File(['hello'], 'hello.txt', {type: 'text/plain'}),
+ new File(['there'], 'there.pdf', {type: 'application/pdf'}),
+ ]
+
+ const {element} = setup(`
+
+ `)
+
+ userEvent.upload(element, files)
+
+ expect(element.files[0]).toBeUndefined()
+ expect(element.files.item(0)).toBeNull()
+ expect(element.files).toHaveLength(0)
+})
diff --git a/src/upload.js b/src/upload.js
index a252b438..db146407 100644
--- a/src/upload.js
+++ b/src/upload.js
@@ -4,16 +4,32 @@ import {blur} from './blur'
import {focus} from './focus'
function upload(element, fileOrFiles, init) {
- if (element.disabled) return
+ const hasFileWithInvalidType =
+ !Array.isArray(fileOrFiles) &&
+ element.accept &&
+ !element.accept.includes(element.type)
+
+ if (hasFileWithInvalidType || element.disabled) return
click(element, init)
const input = element.tagName === 'LABEL' ? element.control : element
- const files = (Array.isArray(fileOrFiles)
- ? fileOrFiles
- : [fileOrFiles]
- ).slice(0, input.multiple ? undefined : 1)
+ let files = []
+
+ if (Array.isArray(fileOrFiles)) {
+ files = element.accept
+ ? fileOrFiles.filter(file => element.accept.includes(file.type))
+ : fileOrFiles
+ } else {
+ files = [fileOrFiles]
+ }
+
+ const hasFilesWithInvalidTypes = files.length === 0
+
+ if (hasFilesWithInvalidTypes) return
+
+ files = files.slice(0, input.multiple ? undefined : 1)
// blur fires when the file selector pops up
blur(element, init)