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)