feat: Support setting files on inputs (#118)

* feat: Support setting files on inputs

* add tests

* fix tests

* fix again

src/element.ts

@@ -54,6 +54,77 @@ export class Element {
     this.#protocol = protocol;
   }
 
+  /**
+   * Sets a file for a file input
+   *
+   * @param path - The remote path of the file to attach
+   *
+   * @example
+   * ```js
+   * import { resolve } from "https://deno.land/std@0.136.0/path/mod.ts";
+   * const fileInput = await page.querySelector("input[type='file']");
+   * await fileInput.file(resolve("./logo.png"));
+   * ```
+   */
+  public async file(path: string): Promise<void> {
+    return await this.files(path);
+  }
+
+  /**
+   * Sets many files for a file input
+   *
+   * @param files - The list of remote files to attach
+   *
+   * @example
+   * ```js
+   * import { resolve } from "https://deno.land/std@0.136.0/path/mod.ts";
+   * const fileInput = await page.querySelector("input[type='file']");
+   * await fileInput.files(resolve("./logo.png"));
+   * ```
+   */
+  public async files(...files: string[]) {
+    if (files.length > 1) {
+      const isMultiple = await this.#page.evaluate(
+        `${this.#method}('${this.#selector}').hasAttribute('multiple')`,
+      );
+      if (!isMultiple) {
+        throw new Error(
+          "Trying to set files on a file input without the 'multiple' attribute",
+        );
+      }
+    }
+
+    const name = await this.#page.evaluate(
+      `${this.#method}('${this.#selector}').nodeName`,
+    );
+    if (name !== "INPUT") {
+      throw new Error("Trying to set a file on an element that isnt an input");
+    }
+    const type = await this.#page.evaluate(
+      `${this.#method}('${this.#selector}').type`,
+    );
+    if (type !== "file") {
+      throw new Error(
+        'Trying to set a file on an input that is not of type "file"',
+      );
+    }
+
+    const { node } = await this.#protocol.send<
+      ProtocolTypes.DOM.DescribeNodeRequest,
+      ProtocolTypes.DOM.DescribeNodeResponse
+    >("DOM.describeNode", {
+      objectId: this.#objectId,
+    });
+    await this.#protocol.send<ProtocolTypes.DOM.SetFileInputFilesRequest, null>(
+      "DOM.setFileInputFiles",
+      {
+        files: files,
+        objectId: this.#objectId,
+        backendNodeId: node.backendNodeId,
+      },
+    );
+  }
+
   /**
    * Get the value of this element, or set the value
    *

tests/deps.ts

@@ -1,2 +1,3 @@
 export * as Drash from "https://deno.land/x/drash@v2.5.4/mod.ts";
+export { resolve } from "https://deno.land/std@0.136.0/path/mod.ts";
 export { delay } from "https://deno.land/std@0.126.0/async/delay.ts";

tests/server.ts

@@ -23,6 +23,19 @@ class PopupsResource extends Drash.Resource {
   }
 }
 
+class FileInputResource extends Drash.Resource {
+  public paths = ["/file-input"];
+
+  public GET(_r: Drash.Request, res: Drash.Response) {
+    return res.html(`
+        <p></p>
+        <input id="text" type="text" />
+        <input type="file" multiple id="multiple-file" />
+        <input type="file" id="single-file" />
+    `);
+  }
+}
+
 class WaitForRequestsResource extends Drash.Resource {
   public paths = ["/wait-for-requests"];
 
@@ -55,6 +68,7 @@ export const server = new Drash.Server({
     JSResource,
     PopupsResource,
     WaitForRequestsResource,
+    FileInputResource,
   ],
   protocol: "http",
   port: 1447,