feat: Add mimeType support; Improve TypedArray support (#19794)

* Add mimeType support; Improve ArrayBuffer support

cli/types/cypress.d.ts

@@ -5683,6 +5683,7 @@ declare namespace Cypress {
      */
     contents: any
     fileName?: string
+    mimeType?: string
     lastModified?: number
   }
 

packages/driver/cypress/integration/commands/actions/selectFile_spec.js

@@ -32,7 +32,7 @@ describe('src/cy/commands/actions/selectFile', () => {
       .then((input) => {
         expect(input[0].files.length).to.eq(1)
         expect(input[0].files[0].name).to.eq('foo.txt')
-        expect(input[0].files[0].type).to.eq('')
+        expect(input[0].files[0].type).to.eq('text/plain')
         expect(input[0].files[0].lastModified).to.be.closeTo(Date.now(), 1000)
       })
 
@@ -54,6 +54,8 @@ describe('src/cy/commands/actions/selectFile', () => {
           fileName: 'bar.json',
         },
         Cypress.Buffer.from('baz'),
+        // 'baz' in ascii
+        Uint8Array.from([98, 97, 122]),
       ])
 
       cy.get('#multiple')
@@ -62,6 +64,7 @@ describe('src/cy/commands/actions/selectFile', () => {
         expect(input[0].files[0].name).to.eq('foo.txt')
         expect(input[0].files[1].name).to.eq('bar.json')
         expect(input[0].files[2].name).to.eq('')
+        expect(input[0].files[3].name).to.eq('')
       })
 
       cy.get('#multiple')
@@ -70,6 +73,7 @@ describe('src/cy/commands/actions/selectFile', () => {
         expect(contents[0]).to.eq('foo')
         expect(contents[1]).to.eq('{"a":"bar"}')
         expect(contents[2]).to.eq('baz')
+        expect(contents[3]).to.eq('baz')
       })
     })
 
@@ -251,6 +255,40 @@ describe('src/cy/commands/actions/selectFile', () => {
       })
     })
 
+    describe('mime types', () => {
+      it('uses empty string for unknown extensions', () => {
+        cy.get('#basic')
+        .selectFile({ contents: '@foo', fileName: 'foo.barbaz' })
+        .then((input) => {
+          expect(input[0].files[0].type).to.eq('')
+        })
+      })
+
+      it('works with several common extensions', () => {
+        [
+          ['png', 'image/png'],
+          ['jpg', 'image/jpeg'],
+          ['zip', 'application/zip'],
+          ['yaml', 'text/yaml'],
+          ['json', 'application/json'],
+        ].forEach(([extension, mimeType]) => {
+          cy.get('#basic')
+          .selectFile({ contents: '@foo', fileName: `foo.${extension}` })
+          .then((input) => {
+            expect(input[0].files[0].type).to.eq(mimeType)
+          })
+        })
+      })
+
+      it('allows users to specify a mimetype', () => {
+        cy.get('#basic')
+        .selectFile({ contents: '@foo', fileName: 'foo.zip', mimeType: 'image/png' })
+        .then((input) => {
+          expect(input[0].files[0].type).to.eq('image/png')
+        })
+      })
+    })
+
     describe('errors', {
       defaultCommandTimeout: 50,
     }, () => {

packages/driver/package.json

@@ -62,6 +62,7 @@
     "md5": "2.3.0",
     "method-override": "3.0.0",
     "methods": "1.1.2",
+    "mime-types": "2.1.27",
     "minimatch": "3.0.4",
     "minimist": "1.2.5",
     "mocha": "7.0.1",

packages/driver/src/cy/commands/actions/selectFile.ts

@@ -1,5 +1,6 @@
 import { basename } from 'path'
 import _ from 'lodash'
+import mime from 'mime-types'
 
 import $dom from '../../../dom'
 import $errUtils from '../../../cypress/error_utils'
@@ -37,8 +38,13 @@ const tryMockWebkit = (item) => {
 const createDataTransfer = (files: Cypress.FileReferenceObject[]): DataTransfer => {
   const dataTransfer = new DataTransfer()
 
-  files.forEach(({ contents, fileName = '', lastModified = Date.now() }) => {
-    const file = new File([contents], fileName, { lastModified })
+  files.forEach(({
+    contents,
+    fileName = '',
+    mimeType = mime.lookup(fileName) || '',
+    lastModified = Date.now(),
+  }) => {
+    const file = new File([contents], fileName, { lastModified, type: mimeType })
 
     dataTransfer.items.add(file)
   })
@@ -150,7 +156,7 @@ export default (Commands, Cypress, cy, state, config) => {
       // We default to the filename on the path, but allow them to override
         fileName: basename(file.contents),
         ...file,
-        contents: Buffer.from(contents),
+        contents: Cypress.Buffer.from(contents),
       }
     })
     .catch((err) => {
@@ -168,7 +174,7 @@ export default (Commands, Cypress, cy, state, config) => {
   }
 
   /*
-   * Turns a user-provided file - a string shorthand, Buffer, or object
+   * Turns a user-provided file - a string shorthand, ArrayBuffer, or object
    * into an object of form {
    *   contents,
    *   fileName?,
@@ -180,7 +186,7 @@ export default (Commands, Cypress, cy, state, config) => {
    */
   const parseFile = (options) => {
     return async (file: any, index: number, filesArray: any[]): Promise<Cypress.FileReferenceObject> => {
-      if (typeof file === 'string' || Buffer.isBuffer(file)) {
+      if (typeof file === 'string' || ArrayBuffer.isView(file)) {
         file = { contents: file }
       }
 
@@ -203,7 +209,7 @@ export default (Commands, Cypress, cy, state, config) => {
         file = handleAlias(file, options) ?? await handlePath(file, options)
       }
 
-      if (!_.isString(file.contents) && !Buffer.isBuffer(file.contents)) {
+      if (!_.isString(file.contents) && !ArrayBuffer.isView(file.contents)) {
         file.contents = JSON.stringify(file.contents)
       }