fix(JSHandle): Fixes file upload

src/JSHandle.js

@@ -15,6 +15,7 @@
  */
 
 const {helper, assert, debugError} = require('./helper');
+const path = require('path');
 
 function createJSHandle(context, remoteObject) {
   const frame = context.frame();
@@ -311,38 +312,11 @@ class ElementHandle extends JSHandle {
    * @param {!Array<string>} filePaths
    */
   async uploadFile(...filePaths) {
-    const isMultiple = await this.evaluate(element => element.multiple);
-    assert(filePaths.length <= 1 || isMultiple, 'Multiple file uploads only work with <input type=file multiple>');
-    // These imports are only needed for `uploadFile`, so keep them
-    // scoped here to avoid paying the cost unnecessarily.
-    const path = require('path');
-    const mime = require('mime-types');
-    const fs = require('fs');
-    const readFileAsync = helper.promisify(fs.readFile);
-
-    const promises = filePaths.map(filePath => readFileAsync(filePath));
-    const files = [];
-    for (let i = 0; i < filePaths.length; i++) {
-      const buffer = await promises[i];
-      const filePath = path.basename(filePaths[i]);
-      const file = {
-        name: filePath,
-        content: buffer.toString('base64'),
-        mimeType: mime.lookup(filePath),
-      };
-      files.push(file);
-    }
-    await this.evaluateHandle(async(element, files) => {
-      const dt = new DataTransfer();
-      for (const item of files) {
-        const response = await fetch(`data:${item.mimeType};base64,${item.content}`);
-        const file = new File([await response.blob()], item.name);
-        dt.items.add(file);
-      }
-      element.files = dt.files;
-      element.dispatchEvent(new Event('input', { bubbles: true }));
-      element.dispatchEvent(new Event('change', { bubbles: true }));
-    }, files);
+    const files = filePaths.map(filePath => path.resolve(filePath));
+    const { objectId } = this._remoteObject;
+    const { node } = await this._client.send('DOM.describeNode', { objectId });
+    const { backendNodeId } = node;
+    await this._client.send('DOM.setFileInputFiles', { objectId, files, backendNodeId });
   }
 
   async tap() {

test/input.spec.js

@@ -38,6 +38,7 @@ describe('input tests', function() {
       }, input);
       await input.uploadFile(filePath);
       expect(await page.evaluate(e => e.files[0].name, input)).toBe('file-to-upload.txt');
+      expect(await page.evaluate(e => e.files[0].type, input)).toBe('text/plain');
       expect(await page.evaluate(() => window._inputEvents)).toEqual(['input', 'change']);
       expect(await page.evaluate(e => {
         const reader = new FileReader();