ui/demo/index.html

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <meta charset="utf-8" />
    <style>
      html {
        font-family: "Roboto", sans-serif;
      }
      body {
        background: #fafafa;
      }
      html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        display: flex;
      }
    </style>
  </head>
  <body>
    <file-storage-demo style="display: flex; flex: 1"></file-storage-demo>

    <script type="module">
      import "@shoelace-style/shoelace/dist/themes/light.css";
      import { FileStorageClient, fileStorageClientContext } from "../src";
      import "../src/elements/upload-files.ts";
      import "../src/elements/show-image.ts";
      import { css, html, LitElement } from "lit";
      import { ContextProvider } from "@lit/context";
      import { AppAgentWebsocket } from "@holochain/client";
      import { onSubmit } from "@holochain-open-dev/elements";

      customElements.define(
        "file-storage-demo",
        class extends LitElement {
          static properties = {
            hash: { type: Object },
            loaded: { type: Boolean },
          };

          async firstUpdated() {
            const hcclient = await AppAgentWebsocket.connect("", "");

            const client = new FileStorageClient(
              hcclient,
              "file_storage_provider"
            );

            new ContextProvider(this, fileStorageClientContext, client);
            this.loaded = true;
            this.requestUpdate();
          }

          render() {
            if (!this.loaded) return html`Loading...`;
            return html`
              <form ${onSubmit((data) => {
                console.log(data);
                this.shadowRoot.querySelector("form").reset();
              })} style="display: flex; flex-direction: column; flex: 1">
                <upload-files
                  id="uf"
                  .oneFile=${true}
                  required
                  name="file_hash"
                  style="max-width: 20px; max-height:20px"
                  @file-uploaded=${(e) => {
                    this.hash = e.detail.file.hash;
                  }}
                ></upload-files>
                ${
                  this.hash
                    ? html`
                        <div
                          style="display: flex; flex-direction: row; flex: 1"
                        >
                          <show-image
                            .imageHash=${this.hash}
                            style="width: 500px; height: 500px"
                          ></show-image>

                          <upload-files
                            .defaultValue=${this.hash}
                            style="flex: 1"
                            .oneFile=${true}
                            name="file_hash"
                          ></upload-files>
                        </div>
                      `
                    : html``
                }
                <input type="submit"></input>
              </form>
            `;
          }
        }
      );
    </script>
  </body>
</html>