webwriter-chart/src/helper-components/FileUploadButton.ts

ww-chart is an interactive data visualization widget for the WebWriter tool that implements various charts and diagrams for static and exploratory data visualization.

import { LitElementWw } from "@webwriter/lit";
import { css, html } from "lit";
import { customElement, property } from "lit/decorators.js";

@customElement("wwci-file-upload-button")
export class FileUploadButton extends LitElementWw {
  static styles = css`
    .file-upload-button {
      display: inline-block;
      padding: 10px 20px;
      background-color: hsl(240 5.3% 26.1%);
      color: #fff;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .file-upload {
      display: none;
    }
  `;

  @property({ type: String })
  accessor buttonText = "load external data";

  render() {
    return html`
      <label for="file" class="file-upload-button">${this.buttonText}</label>
      <input
        type="file"
        id="file"
        class="file-upload"
        accept=".csv"
        @change=${async (e: any) => {
          await this._handleFileSelect(e);
          //@ts-ignore
          this.shadowRoot.getElementById("file").value = "";
        }}
      />
    `;
  }

  private _handleFileSelect(e: Event) {
    this.dispatchEvent(
      new CustomEvent("wwcifileinput", {
        detail: { value: e },
        composed: true,
      })
    );
  }
}
declare global {
  interface HTMLElementTagNameMap {
    "wwci-file-upload-button": FileUploadButton;
  }
}