@holochain-open-dev/file-storage 0.300.0-dev.0 → 0.300.0-rc

package/dist/file-storage-client.d.ts

@@ -1,8 +1,8 @@
-import type { AppAgentClient } from "@holochain/client";
+import type { AppClient } from "@holochain/client";
 import { EntryHash } from "@holochain/client";
 import { FileMetadata } from "./types";
 export declare class FileStorageClient {
-    client: AppAgentClient;
+    client: AppClient;
     roleName: string;
     zomeName: string;
     /**
@@ -10,7 +10,7 @@ export declare class FileStorageClient {
      * @param roleName
      * @param zomeName the zome name of the file_storage zome in the given cell
      */
-    constructor(client: AppAgentClient, roleName: string, zomeName?: string);
+    constructor(client: AppClient, roleName: string, zomeName?: string);
     /**
      * Upload a file to the file_storage zome, splitting it into chunks
      *

package/dist/file-storage-client.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-storage-client.js","sourceRoot":"","sources":["../src/file-storage-client.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n  AppAgentCallZomeRequest,\n  AppAgentClient,\n} from \"@holochain/client\";\nimport { EntryHash } from \"@holochain/client\";\nimport { FileMetadata } from \"./types\";\n\nexport class FileStorageClient {\n  /**\n   * @param client connection to the holochain backend\n   * @param roleName\n   * @param zomeName the zome name of the file_storage zome in the given cell\n   */\n  constructor(\n    public client: AppAgentClient,\n    public roleName: string,\n    public zomeName: string = \"file_storage\"\n  ) {}\n\n  /**\n   * Upload a file to the file_storage zome, splitting it into chunks\n   *\n   * @param file file to split and upload\n   * @param chunkSize chunk size to split the file, default 256 KB\n   */\n  async uploadFile(\n    file: File,\n    onProgress:\n      | undefined\n      | ((percentatgeProgress: number, bytesSent: number) => void) = undefined,\n    chunkSize: number = 256 * 1024\n  ): Promise<EntryHash> {\n    const blobs = this._splitFile(file, chunkSize);\n    const numberOfChunks = blobs.length;\n    const bytesPerChunk = blobs[0].size;\n\n    let uploadedChunks = 0;\n\n    const onChunkUploaded = () => {\n      if (onProgress) {\n        uploadedChunks++;\n        onProgress(\n          ((uploadedChunks + 1) * 1.0) / numberOfChunks,\n          bytesPerChunk * (uploadedChunks + 1)\n        );\n      }\n    };\n\n    const chunksHashes: Array<EntryHash> = await Promise.all(\n      blobs.map(async (blob) => {\n        const chunkHash = await this._createChunk(blob);\n\n        onChunkUploaded();\n        return chunkHash;\n      })\n    );\n\n    const fileToCreate = {\n      name: file.name,\n      size: file.size,\n      file_type: file.type,\n      last_modified: file.lastModified * 1000,\n      chunks_hashes: chunksHashes,\n    };\n    const hash = await this._callZome(\"create_file_metadata\", fileToCreate);\n\n    return hash;\n  }\n\n  /**\n   * Downloads the whole file with the given hash\n   * @param fileHash\n   */\n  async downloadFile(fileHash: EntryHash): Promise<File> {\n    const metadata = await this.getFileMetadata(fileHash);\n\n    const fetchChunksPromises = metadata.chunks_hashes.map((hash) =>\n      this.fetchChunk(hash)\n    );\n\n    const chunks = await Promise.all(fetchChunksPromises);\n\n    const file = new File(chunks, metadata.name, {\n      lastModified: Math.floor(metadata.last_modifed / 1000),\n      type: metadata.file_type,\n    });\n\n    return file;\n  }\n\n  /**\n   * Gets only the metadata of the file with the given hash\n   * This is specially useful if you want to fetch the chunks one by one\n   * @param fileHash the hash of the file\n   */\n  async getFileMetadata(fileHash: EntryHash): Promise<FileMetadata> {\n    return await this._callZome(\"get_file_metadata\", fileHash);\n  }\n\n  /**\n   * Fetch the chunk identified with the given hash\n   * This is useful if used with the chunk hashes received with `getFileMetadata`\n   * @param fileChunkHash\n   */\n  async fetchChunk(fileChunkHash: EntryHash): Promise<Blob> {\n    const bytes = await this._callZome(\"get_file_chunk\", fileChunkHash);\n\n    return new Blob([new Uint8Array(bytes)]);\n  }\n\n  /** Private helpers */\n\n  private _splitFile(file: File, chunkSize: number): Blob[] {\n    let offset = 0;\n    const chunks: Blob[] = [];\n\n    while (file.size > offset) {\n      const chunk = file.slice(offset, offset + chunkSize);\n      offset += chunkSize;\n      chunks.push(chunk);\n    }\n\n    return chunks;\n  }\n\n  private async _createChunk(chunk: Blob): Promise<EntryHash> {\n    const bytes = await chunk.arrayBuffer();\n\n    return this._callZome(\"create_file_chunk\", new Uint8Array(bytes));\n  }\n\n  private _callZome(fn_name: string, payload: any) {\n    const req: AppAgentCallZomeRequest = {\n      role_name: this.roleName,\n      zome_name: this.zomeName,\n      fn_name,\n      payload,\n    };\n    return this.client.callZome(req);\n  }\n}\n"]}
+{"version":3,"file":"file-storage-client.js","sourceRoot":"","sources":["../src/file-storage-client.ts"],"names":[],"mappings":"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","sourcesContent":["import type { AppCallZomeRequest, AppClient } from \"@holochain/client\";\nimport { EntryHash } from \"@holochain/client\";\nimport { FileMetadata } from \"./types\";\n\nexport class FileStorageClient {\n  /**\n   * @param client connection to the holochain backend\n   * @param roleName\n   * @param zomeName the zome name of the file_storage zome in the given cell\n   */\n  constructor(\n    public client: AppClient,\n    public roleName: string,\n    public zomeName: string = \"file_storage\"\n  ) {}\n\n  /**\n   * Upload a file to the file_storage zome, splitting it into chunks\n   *\n   * @param file file to split and upload\n   * @param chunkSize chunk size to split the file, default 256 KB\n   */\n  async uploadFile(\n    file: File,\n    onProgress:\n      | undefined\n      | ((percentatgeProgress: number, bytesSent: number) => void) = undefined,\n    chunkSize: number = 256 * 1024\n  ): Promise<EntryHash> {\n    const blobs = this._splitFile(file, chunkSize);\n    const numberOfChunks = blobs.length;\n    const bytesPerChunk = blobs[0].size;\n\n    let uploadedChunks = 0;\n\n    const onChunkUploaded = () => {\n      if (onProgress) {\n        uploadedChunks++;\n        onProgress(\n          ((uploadedChunks + 1) * 1.0) / numberOfChunks,\n          bytesPerChunk * (uploadedChunks + 1)\n        );\n      }\n    };\n\n    const chunksHashes: Array<EntryHash> = await Promise.all(\n      blobs.map(async (blob) => {\n        const chunkHash = await this._createChunk(blob);\n\n        onChunkUploaded();\n        return chunkHash;\n      })\n    );\n\n    const fileToCreate = {\n      name: file.name,\n      size: file.size,\n      file_type: file.type,\n      last_modified: file.lastModified * 1000,\n      chunks_hashes: chunksHashes,\n    };\n    const hash = await this._callZome(\"create_file_metadata\", fileToCreate);\n\n    return hash;\n  }\n\n  /**\n   * Downloads the whole file with the given hash\n   * @param fileHash\n   */\n  async downloadFile(fileHash: EntryHash): Promise<File> {\n    const metadata = await this.getFileMetadata(fileHash);\n\n    const fetchChunksPromises = metadata.chunks_hashes.map((hash) =>\n      this.fetchChunk(hash)\n    );\n\n    const chunks = await Promise.all(fetchChunksPromises);\n\n    const file = new File(chunks, metadata.name, {\n      lastModified: Math.floor(metadata.last_modifed / 1000),\n      type: metadata.file_type,\n    });\n\n    return file;\n  }\n\n  /**\n   * Gets only the metadata of the file with the given hash\n   * This is specially useful if you want to fetch the chunks one by one\n   * @param fileHash the hash of the file\n   */\n  async getFileMetadata(fileHash: EntryHash): Promise<FileMetadata> {\n    return await this._callZome(\"get_file_metadata\", fileHash);\n  }\n\n  /**\n   * Fetch the chunk identified with the given hash\n   * This is useful if used with the chunk hashes received with `getFileMetadata`\n   * @param fileChunkHash\n   */\n  async fetchChunk(fileChunkHash: EntryHash): Promise<Blob> {\n    const bytes = await this._callZome(\"get_file_chunk\", fileChunkHash);\n\n    return new Blob([new Uint8Array(bytes)]);\n  }\n\n  /** Private helpers */\n\n  private _splitFile(file: File, chunkSize: number): Blob[] {\n    let offset = 0;\n    const chunks: Blob[] = [];\n\n    while (file.size > offset) {\n      const chunk = file.slice(offset, offset + chunkSize);\n      offset += chunkSize;\n      chunks.push(chunk);\n    }\n\n    return chunks;\n  }\n\n  private async _createChunk(chunk: Blob): Promise<EntryHash> {\n    const bytes = await chunk.arrayBuffer();\n\n    return this._callZome(\"create_file_chunk\", new Uint8Array(bytes));\n  }\n\n  private _callZome(fn_name: string, payload: any) {\n    const req: AppCallZomeRequest = {\n      role_name: this.roleName,\n      zome_name: this.zomeName,\n      fn_name,\n      payload,\n    };\n    return this.client.callZome(req);\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holochain-open-dev/file-storage",
-  "version": "0.300.0-dev.0",
+  "version": "0.300.0-rc",
   "description": "File storage utilities to store and retrieve files in a holochain DHT",
   "author": "guillem.cordoba@gmail.com",
   "license": "MIT",
@@ -10,18 +10,19 @@
     ".": "./dist/index.js",
     "./dist/*": "./dist/*"
   },
-  "files": ["dist"],
+  "files": ["dist", "src"],
   "scripts": {
     "start": "vite --clearScreen false --port $UI_PORT",
     "build": "npm run lint && tsc",
     "lint": "eslint --ext .ts,.html src --ignore-path .gitignore",
     "analyze": "cem analyze --litelement --exclude dist",
-    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore"
+    "format": "eslint --ext .ts,.html src --fix --ignore-path .gitignore",
+    "prepare": "tsc"
   },
   "dependencies": {
-    "@holochain-open-dev/elements": "^0.300.0-dev.0",
-    "@holochain-open-dev/utils": "^0.300.0-dev.0",
-    "@holochain/client": "^0.17.0-dev.7",
+    "@holochain-open-dev/elements": "^0.300.0-rc",
+    "@holochain-open-dev/utils": "^0.300.0-rc",
+    "@holochain/client": "^0.17.0-rc",
     "@lit-labs/task": "^2.0.0",
     "@lit/context": "^1.0.0",
     "@lit/localize": "^0.12.0",

package/src/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from "@lit/context";
+import { FileStorageClient } from "./file-storage-client";
+
+export const fileStorageClientContext = createContext<FileStorageClient>(
+  "hc_zome_file_storage/file-storage-client"
+);

package/src/elements/file-storage-context.ts

@@ -0,0 +1,23 @@
+import { css, html, LitElement } from "lit";
+import { provide } from "@lit/context";
+import { property, customElement } from "lit/decorators.js";
+
+import { fileStorageClientContext } from "../context.js";
+import { FileStorageClient } from "../file-storage-client.js";
+
+@customElement("file-storage-context")
+export class FileStorageContext extends LitElement {
+  @provide({ context: fileStorageClientContext })
+  @property({ type: Object })
+  client!: FileStorageClient;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = css`
+    :host {
+      display: contents;
+    }
+  `;
+}

package/src/elements/show-image.ts

@@ -0,0 +1,93 @@
+import { css, html, LitElement } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { hashProperty, sharedStyles } from "@holochain-open-dev/elements";
+import { consume } from "@lit/context";
+
+import "@shoelace-style/shoelace/dist/components/skeleton/skeleton.js";
+import "@holochain-open-dev/elements/dist/elements/display-error.js";
+
+import { EntryHash } from "@holochain/client";
+import { Task } from "@lit-labs/task";
+import { fromUint8Array } from "js-base64";
+import { localized, msg } from "@lit/localize";
+
+import { FileStorageClient } from "../file-storage-client";
+import { fileStorageClientContext } from "../context";
+import { getImage, storeImage } from "../local-storage";
+
+/**
+ * @fires file-uploaded - Fired after having uploaded the file
+ * @csspart dropzone - Style the dropzone itself
+ */
+@localized()
+@customElement("show-image")
+export class ShowImage extends LitElement {
+  /** Public attributes */
+
+  /**
+   * REQUIRED. The hash of the image to be rendered
+   */
+  @property(hashProperty("image-hash")) imageHash!: EntryHash;
+
+  /**
+   * @internal
+   */
+  @consume({ context: fileStorageClientContext })
+  client!: FileStorageClient;
+
+  /**
+   * @internal
+   */
+  _renderImage = new Task(
+    this,
+    async ([fileHash]) => {
+      const image = await getImage(fileHash);
+      if (image) {
+        return image;
+      }
+
+      const file = await this.client.downloadFile(fileHash);
+      const data = await file.arrayBuffer();
+
+      const imageB64 = `data:${file.type};base64,${fromUint8Array(
+        new Uint8Array(data)
+      )}`;
+
+      storeImage(fileHash, imageB64);
+
+      return imageB64;
+    },
+    () => [this.imageHash]
+  );
+
+  renderImage(data: string) {
+    return html`<div style="flex:1"><img src="${data}" style="object-fit: cover; overflow: hidden; width: 100%; height: 100%"></img></div>`;
+  }
+
+  render() {
+    return this._renderImage.render({
+      complete: (d) => this.renderImage(d),
+      pending: () =>
+        html`<sl-skeleton
+          style="flex: 1; --border-radius: 0"
+          effect="pulse"
+        ></sl-skeleton> `,
+      error: (e: any) =>
+        html`<display-error
+          .headline=${msg("Error fetching the image")}
+          .error=${e}
+        ></display-error>`,
+    });
+  }
+
+  static get styles() {
+    return [
+      sharedStyles,
+      css`
+        :host {
+          display: flex;
+        }
+      `,
+    ];
+  }
+}

package/src/elements/upload-files.ts

@@ -0,0 +1,154 @@
+import { css, html } from "lit";
+import { customElement, property, query } from "lit/decorators.js";
+
+import { DropzoneElement, DropzoneOptions } from "@scoped-elements/dropzone";
+import { consume } from "@lit/context";
+import {
+  FormField,
+  FormFieldController,
+  sharedStyles,
+} from "@holochain-open-dev/elements";
+import { localized } from "@lit/localize";
+
+import { FileStorageClient } from "../file-storage-client.js";
+import { fileStorageClientContext } from "../context.js";
+import { HolochainDropzone } from "../holochain-dropzone.js";
+import { EntryHash } from "@holochain/client";
+
+/**
+ * @fires file-uploaded - Fired after having uploaded the file
+ * @csspart dropzone - Style the dropzone itself
+ */
+@localized()
+@customElement("upload-files")
+export class UploadFiles extends DropzoneElement implements FormField {
+  /**
+   * The name of the field if this element is used inside a form
+   * Required only if the element is used inside a form
+   */
+  @property()
+  name!: string;
+
+  /**
+   * Whether this field is required if this element is used inside a form
+   */
+  @property()
+  required = false;
+
+  /**
+   * Whether this field is disabled if this element is used inside a form
+   */
+  @property()
+  disabled = false;
+
+  /**
+   * The default value that this element will take if it is resetted in a form
+   */
+  @property()
+  defaultValue!: EntryHash | Array<EntryHash>;
+
+  /** Public attributes */
+
+  /**
+   * Whether this element should allow only file to be uploaded
+   */
+  @property({ type: Boolean, attribute: "one-file" }) oneFile = false;
+
+  /**
+   * The type of files accepted by this element
+   * Learn how to use this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+   */
+  @property({ type: String, attribute: "accepted-files" }) acceptedFiles:
+    | string
+    | undefined = undefined;
+
+  /**
+   * @internal
+   */
+  @consume({ context: fileStorageClientContext })
+  _client!: FileStorageClient;
+
+  /**
+   * @internal
+   */
+  _controller = new FormFieldController(this);
+
+  async firstUpdated() {
+    super.firstUpdated();
+
+    this.reset();
+  }
+
+  async reset() {
+    this.clear();
+    if (this.defaultValue) {
+      if (Array.isArray(this.defaultValue)) {
+        for (const fileHash of this.defaultValue) {
+          const image = await this._client.downloadFile(fileHash);
+          this.dropzone.addFile(image as any);
+        }
+      } else {
+        const image = await this._client.downloadFile(this.defaultValue);
+        this.dropzone.addFile(image as any);
+      }
+    }
+  }
+
+  /**
+   * @internal
+   */
+  get value() {
+    if (this.oneFile)
+      return this.dropzone.files[0]
+        ? (this.dropzone.files[0] as any).hash
+        : undefined;
+    return this.dropzone.files.map((file) => (file as any).hash);
+  }
+
+  /**
+   * @internal
+   */
+  @query("#hidden-input")
+  private _input!: HTMLInputElement;
+
+  reportValidity() {
+    const invalid = this.required !== false && this.value === undefined;
+    if (invalid) {
+      this._input.setCustomValidity(`Uploading a file is required`);
+      this._input.reportValidity();
+    }
+
+    return !invalid;
+  }
+
+  buildDropzone(dropzoneElement: HTMLElement, options: DropzoneOptions) {
+    return new HolochainDropzone(
+      dropzoneElement,
+      this._client,
+      options
+    ) as any as Dropzone;
+  }
+
+  render() {
+    return html`
+      <div style="position: relative; flex: 1; display: flex">
+        <input
+          id="hidden-input"
+          style="width:0; height: 0; position: absolute; z-index: -1; left: 50%; top: 20%"
+        />
+        ${super.render()}
+      </div>
+    `;
+  }
+  static get styles() {
+    return [
+      DropzoneElement.styles,
+      sharedStyles,
+      css`
+        :host {
+          display: flex;
+        }
+      `,
+    ];
+  }
+}

package/src/file-storage-client.ts

@@ -0,0 +1,138 @@
+import type { AppCallZomeRequest, AppClient } from "@holochain/client";
+import { EntryHash } from "@holochain/client";
+import { FileMetadata } from "./types";
+
+export class FileStorageClient {
+  /**
+   * @param client connection to the holochain backend
+   * @param roleName
+   * @param zomeName the zome name of the file_storage zome in the given cell
+   */
+  constructor(
+    public client: AppClient,
+    public roleName: string,
+    public zomeName: string = "file_storage"
+  ) {}
+
+  /**
+   * Upload a file to the file_storage zome, splitting it into chunks
+   *
+   * @param file file to split and upload
+   * @param chunkSize chunk size to split the file, default 256 KB
+   */
+  async uploadFile(
+    file: File,
+    onProgress:
+      | undefined
+      | ((percentatgeProgress: number, bytesSent: number) => void) = undefined,
+    chunkSize: number = 256 * 1024
+  ): Promise<EntryHash> {
+    const blobs = this._splitFile(file, chunkSize);
+    const numberOfChunks = blobs.length;
+    const bytesPerChunk = blobs[0].size;
+
+    let uploadedChunks = 0;
+
+    const onChunkUploaded = () => {
+      if (onProgress) {
+        uploadedChunks++;
+        onProgress(
+          ((uploadedChunks + 1) * 1.0) / numberOfChunks,
+          bytesPerChunk * (uploadedChunks + 1)
+        );
+      }
+    };
+
+    const chunksHashes: Array<EntryHash> = await Promise.all(
+      blobs.map(async (blob) => {
+        const chunkHash = await this._createChunk(blob);
+
+        onChunkUploaded();
+        return chunkHash;
+      })
+    );
+
+    const fileToCreate = {
+      name: file.name,
+      size: file.size,
+      file_type: file.type,
+      last_modified: file.lastModified * 1000,
+      chunks_hashes: chunksHashes,
+    };
+    const hash = await this._callZome("create_file_metadata", fileToCreate);
+
+    return hash;
+  }
+
+  /**
+   * Downloads the whole file with the given hash
+   * @param fileHash
+   */
+  async downloadFile(fileHash: EntryHash): Promise<File> {
+    const metadata = await this.getFileMetadata(fileHash);
+
+    const fetchChunksPromises = metadata.chunks_hashes.map((hash) =>
+      this.fetchChunk(hash)
+    );
+
+    const chunks = await Promise.all(fetchChunksPromises);
+
+    const file = new File(chunks, metadata.name, {
+      lastModified: Math.floor(metadata.last_modifed / 1000),
+      type: metadata.file_type,
+    });
+
+    return file;
+  }
+
+  /**
+   * Gets only the metadata of the file with the given hash
+   * This is specially useful if you want to fetch the chunks one by one
+   * @param fileHash the hash of the file
+   */
+  async getFileMetadata(fileHash: EntryHash): Promise<FileMetadata> {
+    return await this._callZome("get_file_metadata", fileHash);
+  }
+
+  /**
+   * Fetch the chunk identified with the given hash
+   * This is useful if used with the chunk hashes received with `getFileMetadata`
+   * @param fileChunkHash
+   */
+  async fetchChunk(fileChunkHash: EntryHash): Promise<Blob> {
+    const bytes = await this._callZome("get_file_chunk", fileChunkHash);
+
+    return new Blob([new Uint8Array(bytes)]);
+  }
+
+  /** Private helpers */
+
+  private _splitFile(file: File, chunkSize: number): Blob[] {
+    let offset = 0;
+    const chunks: Blob[] = [];
+
+    while (file.size > offset) {
+      const chunk = file.slice(offset, offset + chunkSize);
+      offset += chunkSize;
+      chunks.push(chunk);
+    }
+
+    return chunks;
+  }
+
+  private async _createChunk(chunk: Blob): Promise<EntryHash> {
+    const bytes = await chunk.arrayBuffer();
+
+    return this._callZome("create_file_chunk", new Uint8Array(bytes));
+  }
+
+  private _callZome(fn_name: string, payload: any) {
+    const req: AppCallZomeRequest = {
+      role_name: this.roleName,
+      zome_name: this.zomeName,
+      fn_name,
+      payload,
+    };
+    return this.client.callZome(req);
+  }
+}

package/src/holochain-dropzone.ts

@@ -0,0 +1,41 @@
+import { Dropzone, DropzoneOptions } from "@scoped-elements/dropzone";
+import { FileStorageClient } from "./file-storage-client";
+
+export class HolochainDropzone extends Dropzone {
+  fileStorageClient: FileStorageClient;
+  constructor(
+    el: HTMLElement,
+    fileStorageClient: FileStorageClient,
+    options: DropzoneOptions
+  ) {
+    options.url = "https://holochain.org/"; // just to bypass the check.
+    super(el, options);
+    this.fileStorageClient = fileStorageClient;
+  }
+
+  uploadFiles(files: Dropzone.DropzoneFile[]) {
+    this._uploadFilesToHolochain(files);
+  }
+
+  async _uploadFilesToHolochain(
+    dropzoneFiles: Dropzone.DropzoneFile[]
+  ): Promise<void> {
+    for (const file of dropzoneFiles) {
+      try {
+        this.emit("sending", file, undefined, undefined);
+        const hash = await this.fileStorageClient.uploadFile(
+          file,
+          (percentatge, bytesSent) => {
+            this.emit("uploadprogress", file, percentatge * 100, bytesSent);
+          }
+        );
+        this.emit("success", file, undefined);
+        (file as any).hash = hash;
+        this.emit("complete", file);
+      } catch (e) {
+        console.error(e);
+        this.emit("error", file, e as any);
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./file-storage-client.js";
+export * from "./holochain-dropzone.js";
+export * from "./types.js";
+export * from "./context.js";

package/src/local-storage.ts

@@ -0,0 +1,45 @@
+import { encodeHashToBase64, EntryHash } from "@holochain/client";
+import { createStore, del, entries, get, set } from "idb-keyval";
+
+const store = createStore("HC_ZOME_FILE_STORAGE", "IMAGES");
+
+interface CachedImage {
+  image: string;
+  lastRead: number;
+}
+
+export async function storeImage(imageHash: EntryHash, image: string) {
+  await set(
+    imageHash,
+    {
+      image,
+      lastRead: Date.now(),
+    },
+    store
+  );
+  clearOldItems();
+}
+
+export async function getImage(
+  imageHash: EntryHash
+): Promise<string | undefined> {
+  const image: CachedImage | undefined = await get(imageHash, store);
+
+  if (!image) return undefined;
+
+  storeImage(imageHash, image.image);
+
+  return image.image;
+}
+
+const IMAGE_CLEAR_MS = 7 * 24 * 60 * 60 * 1000; // 3 days
+
+async function clearOldItems() {
+  const images = await entries<EntryHash, CachedImage>(store);
+
+  for (const [imageHash, image] of images) {
+    if (Date.now() - image.lastRead > IMAGE_CLEAR_MS) {
+      await del(imageHash, store);
+    }
+  }
+}

package/src/mocks.ts

@@ -0,0 +1,37 @@
+import {
+  EntryHashMap,
+  ZomeMock,
+  hash,
+  HashType,
+} from "@holochain-open-dev/utils";
+import { HoloHash } from "@holochain/client";
+import { FileMetadata } from "./types";
+
+export class FileStorageZomeMock extends ZomeMock {
+  metadata = new EntryHashMap();
+  chunks = new EntryHashMap();
+
+  create_file_metadata(fileMetadata: FileMetadata) {
+    const newId = hash(fileMetadata, HashType.ENTRY);
+
+    this.metadata.set(newId, fileMetadata);
+
+    return newId;
+  }
+
+  get_file_metadata(fileHash: HoloHash) {
+    return this.metadata.get(fileHash);
+  }
+
+  create_file_chunk(fileChunk: Uint8Array) {
+    const newId = hash(fileChunk, HashType.ENTRY);
+
+    this.chunks.set(newId, fileChunk);
+
+    return newId;
+  }
+
+  get_file_chunk(fileChunkHash: HoloHash) {
+    return this.chunks.get(fileChunkHash);
+  }
+}

package/src/types.ts

@@ -0,0 +1,9 @@
+import { EntryHash } from "@holochain/client";
+
+export interface FileMetadata {
+  name: string;
+  last_modifed: number;
+  size: number;
+  file_type: string;
+  chunks_hashes: Array<EntryHash>;
+}