@holochain-open-dev/file-storage 0.0.1 → 0.0.3

package/dist/context.d.ts

@@ -1,3 +1,4 @@
-import { Context } from '@holochain-open-dev/context';
-import { FileStorageService } from './services/file-storage.service';
-export declare const fileStorageServiceContext: Context<FileStorageService>;
+import { FileStorageClient } from './file-storage-client';
+export declare const fileStorageClientContext: {
+    __context__: FileStorageClient;
+};

package/dist/context.js

@@ -1,3 +1,3 @@
-import { createContext } from '@holochain-open-dev/context';
-export const fileStorageServiceContext = createContext('hc_zome_file_storage/file-storage-servce');
+import { createContext } from '@lit-labs/context';
+export const fileStorageClientContext = createContext('hc_zome_file_storage/file-storage-client');
 //# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -1 +1 @@
-{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAW,MAAM,6BAA6B,CAAC;AAGrE,MAAM,CAAC,MAAM,yBAAyB,GACpC,aAAa,CAAC,0CAA0C,CAAC,CAAC","sourcesContent":["import { createContext, Context } from '@holochain-open-dev/context';\nimport { FileStorageService } from './services/file-storage.service';\n\nexport const fileStorageServiceContext: Context<FileStorageService> =\n  createContext('hc_zome_file_storage/file-storage-servce');\n"]}
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,MAAM,CAAC,MAAM,wBAAwB,GACnC,aAAa,CAAoB,0CAA0C,CAAC,CAAC","sourcesContent":["import { createContext } from '@lit-labs/context';\nimport { FileStorageClient } from './file-storage-client';\n\nexport const fileStorageClientContext =\n  createContext<FileStorageClient>('hc_zome_file_storage/file-storage-client');\n"]}

package/dist/definitions/show-image.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/definitions/show-image.js

@@ -0,0 +1,9 @@
+import { __decorate } from "tslib";
+import { ShowImage } from '../elements/show-image';
+import { customElement } from 'lit/decorators.js';
+let SI = class SI extends ShowImage {
+};
+SI = __decorate([
+    customElement('show-image')
+], SI);
+//# sourceMappingURL=show-image.js.map

package/dist/definitions/show-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-image.js","sourceRoot":"","sources":["../../src/definitions/show-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAGlD,IAAM,EAAE,GAAR,MAAM,EAAG,SAAQ,SAAS;CAAI,CAAA;AAAxB,EAAE;IADP,aAAa,CAAC,YAAY,CAAC;GACtB,EAAE,CAAsB","sourcesContent":["import { ShowImage } from '../elements/show-image';\nimport { customElement } from 'lit/decorators.js';\n\n@customElement('show-image')\nclass SI extends ShowImage { }"]}

package/dist/elements/show-image.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+import { FileStorageClient } from '../file-storage-client';
+import { EntryHash } from '@holochain/client';
+import { Task } from '@lit-labs/task';
+import { SlSkeleton } from '@scoped-elements/shoelace';
+declare const ShowImage_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
+/**
+ * @fires file-uploaded - Fired after having uploaded the file
+ * @csspart dropzone - Style the dropzone itself
+ */
+export declare class ShowImage extends ShowImage_base {
+    /** Public attributes */
+    imageHash: EntryHash;
+    /** Dependencies */
+    _client: FileStorageClient;
+    _renderImage: Task<Uint8Array[], [File, Uint8Array]>;
+    renderImage(file: File, data: Uint8Array): import("lit-html").TemplateResult<1>;
+    render(): unknown;
+    static get styles(): import("lit").CSSResult[];
+    static get scopedElements(): {
+        'sl-skeleton': typeof SlSkeleton;
+    };
+}
+export {};

package/dist/elements/show-image.js

@@ -0,0 +1,56 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { hashProperty } from '@holochain-open-dev/elements';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { contextProvided } from '@lit-labs/context';
+import { sharedStyles } from '../shared-styles';
+import { fileStorageClientContext } from '../context';
+import { Task } from '@lit-labs/task';
+import { SlSkeleton } from '@scoped-elements/shoelace';
+import { fromUint8Array } from 'js-base64';
+/**
+ * @fires file-uploaded - Fired after having uploaded the file
+ * @csspart dropzone - Style the dropzone itself
+ */
+export class ShowImage extends ScopedElementsMixin(LitElement) {
+    constructor() {
+        /** Public attributes */
+        super(...arguments);
+        this._renderImage = new Task(this, async ([fileHash]) => {
+            const file = await this._client.downloadFile(fileHash);
+            const data = await file.arrayBuffer();
+            return [file, new Uint8Array(data)];
+        }, () => [this.imageHash]);
+    }
+    renderImage(file, data) {
+        return html `<img src="data:${file.type};base64,${fromUint8Array(data)}" style="flex: 1"></img>`;
+    }
+    render() {
+        return this._renderImage.render({
+            complete: ([f, d]) => this.renderImage(f, d),
+            pending: () => html `<sl-skeleton effect="pulse" style="flex: 1"></sl-skeleton>`
+        });
+    }
+    static get styles() {
+        return [
+            sharedStyles,
+            css `
+        :host {
+          display: flex;
+          flex: 1;
+        }
+      `,
+        ];
+    }
+    static get scopedElements() {
+        return { 'sl-skeleton': SlSkeleton };
+    }
+}
+__decorate([
+    property(hashProperty('image-hash'))
+], ShowImage.prototype, "imageHash", void 0);
+__decorate([
+    contextProvided({ context: fileStorageClientContext })
+], ShowImage.prototype, "_client", void 0);
+//# sourceMappingURL=show-image.js.map

package/dist/elements/show-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"show-image.js","sourceRoot":"","sources":["../../src/elements/show-image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAEtD,OAAO,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAA;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,WAAW,CAAA;AAE1C;;;GAGG;AACH,MAAM,OAAO,SAAU,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAA9D;QACE,wBAAwB;;QASxB,iBAAY,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,EAAE;YACjD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;YACvD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YAEtC,OAAO,CAAC,IAAI,EAAE,IAAI,UAAU,CAAC,IAAI,CAAC,CAAuB,CAAC;QAC5D,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;IA4B7B,CAAC;IA1BC,WAAW,CAAC,IAAU,EAAE,IAAgB;QACtC,OAAO,IAAI,CAAA,kBAAkB,IAAI,CAAC,IAAI,WAAW,cAAc,CAAC,IAAI,CAAC,0BAA0B,CAAC;IAClG,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC;YAC9B,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC;YAC5C,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,4DAA4D;SAChF,CAAC,CAAC;IACL,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;;OAKF;SACF,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,cAAc;QACvB,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,CAAA;IACtC,CAAC;CACF;AAxCuC;IAArC,QAAQ,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;4CAAuB;AAK5D;IADC,eAAe,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;0CAC3B","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { hashProperty } from '@holochain-open-dev/elements';\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { contextProvided } from '@lit-labs/context';\n\nimport { FileStorageClient } from '../file-storage-client';\nimport { sharedStyles } from '../shared-styles';\nimport { fileStorageClientContext } from '../context';\nimport { EntryHash } from '@holochain/client';\nimport { Task } from '@lit-labs/task';\nimport { SlSkeleton } from '@scoped-elements/shoelace'\nimport { fromUint8Array } from 'js-base64'\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\nexport class ShowImage extends ScopedElementsMixin(LitElement) {\n  /** Public attributes */\n\n  @property(hashProperty('image-hash')) imageHash!: EntryHash;\n\n  /** Dependencies */\n\n  @contextProvided({ context: fileStorageClientContext })\n  _client!: FileStorageClient;\n\n  _renderImage = new Task(this, async ([fileHash]) => {\n    const file = await this._client.downloadFile(fileHash);\n    const data = await file.arrayBuffer();\n\n    return [file, new Uint8Array(data)] as [File, Uint8Array];\n  }, () => [this.imageHash]);\n\n  renderImage(file: File, data: Uint8Array) {\n    return html`<img src=\"data:${file.type};base64,${fromUint8Array(data)}\" style=\"flex: 1\"></img>`;\n  }\n\n  render() {\n    return this._renderImage.render({\n      complete: ([f, d]) => this.renderImage(f, d),\n      pending: () => html`<sl-skeleton effect=\"pulse\" style=\"flex: 1\"></sl-skeleton>`\n    });\n  }\n\n  static get styles() {\n    return [\n      sharedStyles,\n      css`\n        :host {\n          display: flex;\n          flex: 1;\n        }\n      `,\n    ];\n  }\n\n  static get scopedElements() {\n    return { 'sl-skeleton': SlSkeleton }\n  }\n}\n"]}

package/dist/elements/upload-files.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { FileStorageService } from '../services/file-storage.service';
+import { FileStorageClient } from '../file-storage-client';
 declare const UploadFiles_base: typeof LitElement & import("@open-wc/dedupe-mixin").Constructor<import("@open-wc/scoped-elements/types/src/types").ScopedElementsHost>;
 /**
  * @fires file-uploaded - Fired after having uploaded the file
@@ -10,7 +10,7 @@ export declare class UploadFiles extends UploadFiles_base {
     oneFile: boolean;
     acceptedFiles: string | undefined;
     /** Dependencies */
-    _service: FileStorageService;
+    _client: FileStorageClient;
     /** Private properties */
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;

package/dist/elements/upload-files.js

@@ -3,10 +3,10 @@ import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ScopedElementsMixin } from '@open-wc/scoped-elements';
 import { DropzoneElement } from '@scoped-elements/dropzone';
-import { contextProvided } from '@holochain-open-dev/context';
-import { sharedStyles } from '../sharedStyles';
+import { contextProvided } from '@lit-labs/context';
+import { sharedStyles } from '../shared-styles';
 import { HolochainDropzone } from '../holochain-dropzone';
-import { fileStorageServiceContext } from '../context';
+import { fileStorageClientContext } from '../context';
 /**
  * @fires file-uploaded - Fired after having uploaded the file
  * @csspart dropzone - Style the dropzone itself
@@ -20,10 +20,10 @@ export class UploadFiles extends ScopedElementsMixin(LitElement) {
     }
     /** Private properties */
     firstUpdated() {
-        const service = this._service;
+        const client = this._client;
         this.defineScopedElement('drop-zone', class extends DropzoneElement {
             buildDropzone(dropzoneElement, options) {
-                return new HolochainDropzone(dropzoneElement, service, options);
+                return new HolochainDropzone(dropzoneElement, client, options);
             }
         });
     }
@@ -54,6 +54,6 @@ __decorate([
     property({ type: String, attribute: 'accepted-files' })
 ], UploadFiles.prototype, "acceptedFiles", void 0);
 __decorate([
-    contextProvided({ context: fileStorageServiceContext })
-], UploadFiles.prototype, "_service", void 0);
+    contextProvided({ context: fileStorageClientContext })
+], UploadFiles.prototype, "_client", void 0);
 //# sourceMappingURL=upload-files.js.map

package/dist/elements/upload-files.js.map

@@ -1 +1 @@
-{"version":3,"file":"upload-files.js","sourceRoot":"","sources":["../../src/elements/upload-files.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,6BAA6B,CAAC;AAI9D,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAEvD;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAhE;QACE,wBAAwB;;QAE4B,YAAO,GAAG,KAAK,CAAC;QACX,kBAAa,GAEtD,SAAS,CAAC;IA4C5B,CAAC;IArCC,yBAAyB;IAEzB,YAAY;QACV,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC;QAE9B,IAAI,CAAC,mBAAmB,CACtB,WAAW,EACX,KAAM,SAAQ,eAAe;YAC3B,aAAa,CAAC,eAA4B,EAAE,OAAwB;gBAClE,OAAO,IAAI,iBAAiB,CAAC,eAAe,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;YAClE,CAAC;SACF,CACF,CAAC;IAEJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;yBACN,IAAI,CAAC,aAAa;yBAClB,CAAC,CAAc,EAAE,EAAE,CAClC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;KAEzC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;OAIF;SACF,CAAC;IACJ,CAAC;CACF;AA/CqD;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAAiB;AACX;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAE9B;AAK1B;IADC,eAAe,CAAC,EAAE,OAAO,EAAE,yBAAyB,EAAE,CAAC;6CAC1B","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { DropzoneElement } from '@scoped-elements/dropzone';\nimport { contextProvided } from '@holochain-open-dev/context';\nimport { DropzoneOptions } from 'dropzone';\n\nimport { FileStorageService } from '../services/file-storage.service';\nimport { sharedStyles } from '../sharedStyles';\nimport { HolochainDropzone } from '../holochain-dropzone';\nimport { fileStorageServiceContext } from '../context';\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\nexport class UploadFiles extends ScopedElementsMixin(LitElement) {\n  /** Public attributes */\n\n  @property({ type: Boolean, attribute: 'one-file' }) oneFile = false;\n  @property({ type: String, attribute: 'accepted-files' }) acceptedFiles:\n    | string\n    | undefined = undefined;\n\n  /** Dependencies */\n\n  @contextProvided({ context: fileStorageServiceContext })\n  _service!: FileStorageService;\n\n  /** Private properties */\n\n  firstUpdated() {\n    const service = this._service;\n\n    this.defineScopedElement(\n      'drop-zone',\n      class extends DropzoneElement {\n        buildDropzone(dropzoneElement: HTMLElement, options: DropzoneOptions) {\n          return new HolochainDropzone(dropzoneElement, service, options);\n        }\n      }\n    );\n\n  }\n\n  render() {\n    return html`\n      <drop-zone\n        .oneFile=${this.oneFile}\n        .acceptedFiles=${this.acceptedFiles}\n        @file-uploaded=${(e: CustomEvent) =>\n          (e.detail.hash = e.detail.file.hash)}\n      ></drop-zone>\n    `;\n  }\n\n  static get styles() {\n    return [\n      sharedStyles,\n      css`\n        :host {\n          display: contents;\n        }\n      `,\n    ];\n  }\n}\n"]}
+{"version":3,"file":"upload-files.js","sourceRoot":"","sources":["../../src/elements/upload-files.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,0BAA0B,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAEtD;;;GAGG;AACH,MAAM,OAAO,WAAY,SAAQ,mBAAmB,CAAC,UAAU,CAAC;IAAhE;QACE,wBAAwB;;QAE4B,YAAO,GAAG,KAAK,CAAC;QACX,kBAAa,GAEtD,SAAS,CAAC;IA4C5B,CAAC;IArCC,yBAAyB;IAEzB,YAAY;QACV,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC;QAE5B,IAAI,CAAC,mBAAmB,CACtB,WAAW,EACX,KAAM,SAAQ,eAAe;YAC3B,aAAa,CAAC,eAA4B,EAAE,OAAwB;gBAClE,OAAO,IAAI,iBAAiB,CAAC,eAAe,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;YACjE,CAAC;SACF,CACF,CAAC;IAEJ,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;mBAEI,IAAI,CAAC,OAAO;yBACN,IAAI,CAAC,aAAa;yBAClB,CAAC,CAAc,EAAE,EAAE,CACpC,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;;KAEvC,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,YAAY;YACZ,GAAG,CAAA;;;;OAIF;SACF,CAAC;IACJ,CAAC;CACF;AA/CqD;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;4CAAiB;AACX;IAAxD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC;kDAE9B;AAK1B;IADC,eAAe,CAAC,EAAE,OAAO,EAAE,wBAAwB,EAAE,CAAC;4CAC3B","sourcesContent":["import { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { ScopedElementsMixin } from '@open-wc/scoped-elements';\nimport { DropzoneElement } from '@scoped-elements/dropzone';\nimport { contextProvided } from '@lit-labs/context';\nimport { DropzoneOptions } from 'dropzone';\n\nimport { FileStorageClient } from '../file-storage-client';\nimport { sharedStyles } from '../shared-styles';\nimport { HolochainDropzone } from '../holochain-dropzone';\nimport { fileStorageClientContext } from '../context';\n\n/**\n * @fires file-uploaded - Fired after having uploaded the file\n * @csspart dropzone - Style the dropzone itself\n */\nexport class UploadFiles extends ScopedElementsMixin(LitElement) {\n  /** Public attributes */\n\n  @property({ type: Boolean, attribute: 'one-file' }) oneFile = false;\n  @property({ type: String, attribute: 'accepted-files' }) acceptedFiles:\n    | string\n    | undefined = undefined;\n\n  /** Dependencies */\n\n  @contextProvided({ context: fileStorageClientContext })\n  _client!: FileStorageClient;\n\n  /** Private properties */\n\n  firstUpdated() {\n    const client = this._client;\n\n    this.defineScopedElement(\n      'drop-zone',\n      class extends DropzoneElement {\n        buildDropzone(dropzoneElement: HTMLElement, options: DropzoneOptions) {\n          return new HolochainDropzone(dropzoneElement, client, options);\n        }\n      }\n    );\n\n  }\n\n  render() {\n    return html`\n      <drop-zone\n        .oneFile=${this.oneFile}\n        .acceptedFiles=${this.acceptedFiles}\n        @file-uploaded=${(e: CustomEvent) =>\n        (e.detail.hash = e.detail.file.hash)}\n      ></drop-zone>\n    `;\n  }\n\n  static get styles() {\n    return [\n      sharedStyles,\n      css`\n        :host {\n          display: contents;\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/{services/file-storage.service.d.ts → file-storage-client.d.ts}

@@ -1,6 +1,7 @@
 import type { CellClient } from '@holochain-open-dev/cell-client';
-import { FileMetadata } from '../types';
-export declare class FileStorageService {
+import { EntryHash } from '@holochain/client';
+import { FileMetadata } from './types';
+export declare class FileStorageClient {
     protected cellClient: CellClient;
     protected zomeName: string;
     /**
@@ -15,24 +16,24 @@ export declare class FileStorageService {
      * @param file file to split and upload
      * @param chunkSize chunk size to split the file, default 256 KB
      */
-    uploadFile(file: File, onProgress?: undefined | ((percentatgeProgress: number, bytesSent: number) => void), chunkSize?: number): Promise<string>;
+    uploadFile(file: File, onProgress?: undefined | ((percentatgeProgress: number, bytesSent: number) => void), chunkSize?: number): Promise<EntryHash>;
     /**
      * Downloads the whole file with the given hash
      * @param fileHash
      */
-    downloadFile(fileHash: string): Promise<File>;
+    downloadFile(fileHash: EntryHash): Promise<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
      */
-    getFileMetadata(fileHash: string): Promise<FileMetadata>;
+    getFileMetadata(fileHash: EntryHash): Promise<FileMetadata>;
     /**
      * Fetch the chunk identified with the given hash
      * This is useful if used with the chunk hashes received with `getFileMetadata`
      * @param fileChunkHash
      */
-    fetchChunk(fileChunkHash: string): Promise<Blob>;
+    fetchChunk(fileChunkHash: EntryHash): Promise<Blob>;
     /** Private helpers */
     private _splitFile;
     private _createChunk;

package/dist/{services/file-storage.service.js → file-storage-client.js}

@@ -1,4 +1,4 @@
-export class FileStorageService {
+export class FileStorageClient {
     /**
      * @param appWebsocket connection to the holochain backend
      * @param cellId the cell to which to upload the file
@@ -29,9 +29,9 @@ export class FileStorageService {
         const fileToCreate = {
             name: file.name,
             size: file.size,
-            fileType: file.type,
-            lastModified: file.lastModified,
-            chunksHashes,
+            file_type: file.type,
+            last_modified: file.lastModified,
+            chunks_hashes: chunksHashes,
         };
         const hash = await this._callZome('create_file_metadata', fileToCreate);
         return hash;
@@ -42,11 +42,11 @@ export class FileStorageService {
      */
     async downloadFile(fileHash) {
         const metadata = await this.getFileMetadata(fileHash);
-        const fetchChunksPromises = metadata.chunksHashes.map(hash => this.fetchChunk(hash));
+        const fetchChunksPromises = metadata.chunks_hashes.map(hash => this.fetchChunk(hash));
         const chunks = await Promise.all(fetchChunksPromises);
         const file = new File(chunks, metadata.name, {
-            lastModified: metadata.lastModifed,
-            type: metadata.fileType,
+            lastModified: metadata.last_modifed,
+            type: metadata.file_type,
         });
         return file;
     }
@@ -86,4 +86,4 @@ export class FileStorageService {
         return this.cellClient.callZome(this.zomeName, fnName, payload);
     }
 }
-//# sourceMappingURL=file-storage.service.js.map
+//# sourceMappingURL=file-storage-client.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-storage-client.js","sourceRoot":"","sources":["../src/file-storage-client.ts"],"names":[],"mappings":"AAIA,MAAM,OAAO,iBAAiB;IAC5B;;;;OAIG;IACH,YACY,UAAsB,EACtB,WAAmB,cAAc;QADjC,eAAU,GAAV,UAAU,CAAY;QACtB,aAAQ,GAAR,QAAQ,CAAyB;IACzC,CAAC;IAEL;;;;;OAKG;IACH,KAAK,CAAC,UAAU,CACd,IAAU,EACV,aAEiE,SAAS,EAC1E,YAAoB,GAAG,GAAG,IAAI;QAE9B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;QAC/C,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAC;QACpC,MAAM,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAEpC,MAAM,YAAY,GAAqB,EAAE,CAAC;QAC1C,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACrC,MAAM,SAAS,GAAG,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;YACpD,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC7B,IAAI,UAAU,EAAE;gBACd,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,cAAc,EAAE,aAAa,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;aACvE;SACF;QAED,MAAM,YAAY,GAAG;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,SAAS,EAAE,IAAI,CAAC,IAAI;YACpB,aAAa,EAAE,IAAI,CAAC,YAAY;YAChC,aAAa,EAAE,YAAY;SAC5B,CAAC;QACF,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,sBAAsB,EAAE,YAAY,CAAC,CAAC;QAExE,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,YAAY,CAAC,QAAmB;QACpC,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAC;QAEtD,MAAM,mBAAmB,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAC5D,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CACtB,CAAC;QAEF,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAEtD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC,IAAI,EAAE;YAC3C,YAAY,EAAE,QAAQ,CAAC,YAAY;YACnC,IAAI,EAAE,QAAQ,CAAC,SAAS;SACzB,CAAC,CAAC;QAEH,OAAO,IAAI,CAAC;IACd,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,eAAe,CAAC,QAAmB;QACvC,OAAO,MAAM,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,QAAQ,CAAC,CAAC;IAC7D,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,UAAU,CAAC,aAAwB;QACvC,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,SAAS,CAAC,gBAAgB,EAAE,aAAa,CAAC,CAAC;QAEpE,OAAO,IAAI,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;IAC3C,CAAC;IAED,sBAAsB;IAEd,UAAU,CAAC,IAAU,EAAE,SAAiB;QAC9C,IAAI,MAAM,GAAG,CAAC,CAAC;QACf,MAAM,MAAM,GAAW,EAAE,CAAC;QAE1B,OAAO,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE;YACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;YACrD,MAAM,IAAI,SAAS,CAAC;YACpB,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SACpB;QAED,OAAO,MAAM,CAAC;IAChB,CAAC;IAEO,KAAK,CAAC,YAAY,CAAC,KAAW;QACpC,MAAM,KAAK,GAAG,MAAM,KAAK,CAAC,WAAW,EAAE,CAAC;QAExC,OAAO,IAAI,CAAC,SAAS,CAAC,mBAAmB,EAAE,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC;IACpE,CAAC;IAEO,SAAS,CAAC,MAAc,EAAE,OAAY;QAC5C,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;IAClE,CAAC;CACF","sourcesContent":["import type { CellClient } from '@holochain-open-dev/cell-client';\nimport { EntryHash } from '@holochain/client';\nimport { FileMetadata } from './types';\n\nexport class FileStorageClient {\n  /**\n   * @param appWebsocket connection to the holochain backend\n   * @param cellId the cell to which to upload the file\n   * @param zomeName the zome name of the file_storage zome in the given cell\n   */\n  constructor(\n    protected cellClient: CellClient,\n    protected 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    const chunksHashes: Array<EntryHash> = [];\n    for (let i = 0; i < blobs.length; i++) {\n      const chunkHash = await this._createChunk(blobs[i]);\n      chunksHashes.push(chunkHash);\n      if (onProgress) {\n        onProgress(((i + 1) * 1.0) / numberOfChunks, bytesPerChunk * (i + 1));\n      }\n    }\n\n    const fileToCreate = {\n      name: file.name,\n      size: file.size,\n      file_type: file.type,\n      last_modified: file.lastModified,\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: metadata.last_modifed,\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(fnName: string, payload: any): Promise<any> {\n    return this.cellClient.callZome(this.zomeName, fnName, payload);\n  }\n}\n"]}

package/dist/holochain-dropzone.d.ts

@@ -1,8 +1,8 @@
 import Dropzone, { DropzoneOptions } from 'dropzone';
-import { FileStorageService } from './services/file-storage.service';
+import { FileStorageClient } from './file-storage-client';
 export declare class HolochainDropzone extends Dropzone {
-    fileStorageService: FileStorageService;
-    constructor(el: HTMLElement, fileStorageService: FileStorageService, options: DropzoneOptions);
+    fileStorageClient: FileStorageClient;
+    constructor(el: HTMLElement, fileStorageClient: FileStorageClient, options: DropzoneOptions);
     uploadFiles(files: Dropzone.DropzoneFile[]): void;
     _uploadFilesToHolochain(dropzoneFiles: Dropzone.DropzoneFile[]): Promise<void>;
 }

package/dist/holochain-dropzone.js

@@ -1,9 +1,9 @@
 import Dropzone from 'dropzone';
 export class HolochainDropzone extends Dropzone {
-    constructor(el, fileStorageService, options) {
+    constructor(el, fileStorageClient, options) {
         options.url = 'https://holochain.org/'; // just to bypass the check.
         super(el, options);
-        this.fileStorageService = fileStorageService;
+        this.fileStorageClient = fileStorageClient;
     }
     uploadFiles(files) {
         this._uploadFilesToHolochain(files);
@@ -12,7 +12,7 @@ export class HolochainDropzone extends Dropzone {
         for (const file of dropzoneFiles) {
             try {
                 this.emit('sending', file, undefined, undefined);
-                const hash = await this.fileStorageService.uploadFile(file, (percentatge, bytesSent) => {
+                const hash = await this.fileStorageClient.uploadFile(file, (percentatge, bytesSent) => {
                     this.emit('uploadprogress', file, percentatge * 100, bytesSent);
                 });
                 this.emit('success', file, undefined);

package/dist/holochain-dropzone.js.map

@@ -1 +1 @@
-{"version":3,"file":"holochain-dropzone.js","sourceRoot":"","sources":["../src/holochain-dropzone.ts"],"names":[],"mappings":"AAAA,OAAO,QAA6B,MAAM,UAAU,CAAC;AAGrD,MAAM,OAAO,iBAAkB,SAAQ,QAAQ;IAE7C,YACE,EAAe,EACf,kBAAsC,EACtC,OAAwB;QAExB,OAAO,CAAC,GAAG,GAAG,wBAAwB,CAAC,CAAC,4BAA4B;QACpE,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QACnB,IAAI,CAAC,kBAAkB,GAAG,kBAAkB,CAAC;IAC/C,CAAC;IAED,WAAW,CAAC,KAA8B;QACxC,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,CAAC,uBAAuB,CAC3B,aAAsC;QAEtC,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE;YAChC,IAAI;gBACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;gBACjD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,UAAU,CACnD,IAAI,EACJ,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE;oBACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,WAAW,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC;gBAClE,CAAC,CACF,CAAC;gBACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;gBACtC,aAAa;gBACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aAC7B;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAG,CAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAChD;SACF;IACH,CAAC;CACF","sourcesContent":["import Dropzone, { DropzoneOptions } from 'dropzone';\nimport { FileStorageService } from './services/file-storage.service';\n\nexport class HolochainDropzone extends Dropzone {\n  fileStorageService: FileStorageService;\n  constructor(\n    el: HTMLElement,\n    fileStorageService: FileStorageService,\n    options: DropzoneOptions\n  ) {\n    options.url = 'https://holochain.org/'; // just to bypass the check.\n    super(el, options);\n    this.fileStorageService = fileStorageService;\n  }\n\n  uploadFiles(files: Dropzone.DropzoneFile[]) {\n    this._uploadFilesToHolochain(files);\n  }\n\n  async _uploadFilesToHolochain(\n    dropzoneFiles: Dropzone.DropzoneFile[]\n  ): Promise<void> {\n    for (const file of dropzoneFiles) {\n      try {\n        this.emit('sending', file, undefined, undefined);\n        const hash = await this.fileStorageService.uploadFile(\n          file,\n          (percentatge, bytesSent) => {\n            this.emit('uploadprogress', file, percentatge * 100, bytesSent);\n          }\n        );\n        this.emit('success', file, undefined);\n        // @ts-ignore\n        file.hash = hash;\n        this.emit('complete', file);\n      } catch (e) {\n        console.error(e);\n        this.emit('error', file, (e as any).data.data);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"holochain-dropzone.js","sourceRoot":"","sources":["../src/holochain-dropzone.ts"],"names":[],"mappings":"AAAA,OAAO,QAA6B,MAAM,UAAU,CAAC;AAGrD,MAAM,OAAO,iBAAkB,SAAQ,QAAQ;IAE7C,YACE,EAAe,EACf,iBAAoC,EACpC,OAAwB;QAExB,OAAO,CAAC,GAAG,GAAG,wBAAwB,CAAC,CAAC,4BAA4B;QACpE,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;QACnB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;IAC7C,CAAC;IAED,WAAW,CAAC,KAA8B;QACxC,IAAI,CAAC,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACtC,CAAC;IAED,KAAK,CAAC,uBAAuB,CAC3B,aAAsC;QAEtC,KAAK,MAAM,IAAI,IAAI,aAAa,EAAE;YAChC,IAAI;gBACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;gBACjD,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAClD,IAAI,EACJ,CAAC,WAAW,EAAE,SAAS,EAAE,EAAE;oBACzB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,IAAI,EAAE,WAAW,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC;gBAClE,CAAC,CACF,CAAC;gBACF,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,EAAE,SAAS,CAAC,CAAC;gBACtC,aAAa;gBACb,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;gBACjB,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;aAC7B;YAAC,OAAO,CAAC,EAAE;gBACV,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;gBACjB,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,EAAG,CAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;aAChD;SACF;IACH,CAAC;CACF","sourcesContent":["import Dropzone, { DropzoneOptions } from 'dropzone';\nimport { FileStorageClient } from './file-storage-client';\n\nexport class HolochainDropzone extends Dropzone {\n  fileStorageClient: FileStorageClient;\n  constructor(\n    el: HTMLElement,\n    fileStorageClient: FileStorageClient,\n    options: DropzoneOptions\n  ) {\n    options.url = 'https://holochain.org/'; // just to bypass the check.\n    super(el, options);\n    this.fileStorageClient = fileStorageClient;\n  }\n\n  uploadFiles(files: Dropzone.DropzoneFile[]) {\n    this._uploadFilesToHolochain(files);\n  }\n\n  async _uploadFilesToHolochain(\n    dropzoneFiles: Dropzone.DropzoneFile[]\n  ): Promise<void> {\n    for (const file of dropzoneFiles) {\n      try {\n        this.emit('sending', file, undefined, undefined);\n        const hash = await this.fileStorageClient.uploadFile(\n          file,\n          (percentatge, bytesSent) => {\n            this.emit('uploadprogress', file, percentatge * 100, bytesSent);\n          }\n        );\n        this.emit('success', file, undefined);\n        // @ts-ignore\n        file.hash = hash;\n        this.emit('complete', file);\n      } catch (e) {\n        console.error(e);\n        this.emit('error', file, (e as any).data.data);\n      }\n    }\n  }\n}\n"]}

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from './elements/upload-files';
-export * from './services/file-storage.service';
+export * from './elements/show-image';
+export * from './file-storage-client';
 export * from './holochain-dropzone';
 export * from './types';
 export * from './context';

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from './elements/upload-files';
-export * from './services/file-storage.service';
+export * from './elements/show-image';
+export * from './file-storage-client';
 export * from './holochain-dropzone';
 export * from './types';
 export * from './context';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,iCAAiC,CAAC;AAChD,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC","sourcesContent":["export * from './elements/upload-files';\nexport * from './services/file-storage.service';\nexport * from './holochain-dropzone';\nexport * from './types';\nexport * from './context';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC","sourcesContent":["export * from './elements/upload-files';\nexport * from './elements/show-image';\nexport * from './file-storage-client';\nexport * from './holochain-dropzone';\nexport * from './types';\nexport * from './context';\n"]}

package/dist/{sharedStyles.js → shared-styles.js}

@@ -13,4 +13,4 @@ export const sharedStyles = css `
     justify-content: center;
   }
 `;
-//# sourceMappingURL=sharedStyles.js.map
+//# sourceMappingURL=shared-styles.js.map

package/dist/shared-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared-styles.js","sourceRoot":"","sources":["../src/shared-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAa9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const sharedStyles = css`\n  .column {\n    display: flex;\n    flex-direction: column;\n  }\n  .row {\n    display: flex;\n    flex-direction: row;\n  }\n  .center-content {\n    align-items: center;\n    justify-content: center;\n  }\n`;\n"]}

package/dist/types.d.ts

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

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface FileMetadata {\n  name: string;\n  lastModifed: number;\n  size: number;\n  fileType: string;\n  creatorPubKey: string;\n  chunksHashes: Array<string>;\n}\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { EntryHash } from \"@holochain/client\";\n\nexport interface FileMetadata {\n  name: string;\n  last_modifed: number;\n  size: number;\n  file_type: string;\n  chunks_hashes: Array<EntryHash>;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@holochain-open-dev/file-storage",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "File storage utilities to store files in holochain DHT",
   "author": "guillem.cordoba@gmail.com",
   "license": "MIT",
@@ -8,68 +8,60 @@
   "module": "dist/index.js",
   "exports": {
     ".": "./dist/index.js",
-    "./upload-files": "./dist/definitions/upload-files.js"
+    "./upload-files": "./dist/definitions/upload-files.js",
+    "./show-image": "./dist/definitions/show-image.js"
   },
   "files": [
     "dist"
   ],
-
   "scripts": {
-    "start": "npm run build && concurrently -k --names tsc,dev-server \"npm run build-watch\" \"web-dev-server --config demo/web-dev-server.config.mjs\"",
+    "start": "npm run build && concurrently -k --names tsc,dev-server \"npm run build-watch\" \"web-dev-server --config web-dev-server.config.mjs\"",
     "build": "tsc",
     "build-watch": "tsc -w --preserveWatchOutput",
-    "test": "npm run build && web-test-runner --coverage --puppeteer",
-    "test-debug": "npm run build && DEBUG=true web-test-runner --coverage --puppeteer",
-    "test-watch": "web-test-runner --watch --puppeteer",
-    "e2e": "CONDUCTOR_URL=ws://localhost:8888 concurrently -k -s first \"npm:test\" \"npm:start-holochain\"",
-    "analyze": "wca analyze src --format json --outFile custom-elements.json",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore",
     "format": "eslint --ext .ts,.html . --fix --ignore-path .gitignore"
   },
   "dependencies": {
-    "@holochain/client": "^0.3.2",
-    "@holochain-open-dev/cell-client": "^0.3.2",
-    "@holochain-open-dev/context": "^0.0.3",
-    "@open-wc/scoped-elements": "^2.0.1",
+    "@holochain/client": "^0.9.3",
+    "@holochain-open-dev/elements": "^0.0.4",
+    "@lit-labs/context": "^0.1.3",
+    "@lit-labs/task": "^2.0.0",
+    "@open-wc/scoped-elements": "^2.1.0",
     "@scoped-elements/dropzone": "^0.0.3",
     "@scoped-elements/material-web": "^0.0.19",
     "lit": "^2.2.0"
   },
   "devDependencies": {
-    "@open-wc/eslint-config": "^2.1.0",
-    "@open-wc/testing": "^3.0.0-next.5",
-    "@open-wc/testing-karma": "^4.0.9",
-    "@rollup/plugin-commonjs": "^15.1.0",
-    "@rollup/plugin-node-resolve": "^9.0.0",
-    "@rollup/plugin-replace": "^2.4.2",
-    "@rollup/plugin-typescript": "^8.2.1",
-    "@types/dropzone": "^5.7.0",
-    "@types/node": "13.11.1",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
-    "@web/dev-server": "0.0.13",
-    "@web/dev-server-rollup": "^0.2.9",
-    "@web/test-runner": "^0.7.41",
-    "@web/test-runner-puppeteer": "^0.6.4",
-    "buffer": "^5.6.0",
-    "concurrently": "^5.1.0",
-    "deepmerge": "^3.2.0",
-    "es-dev-server": "^1.23.0",
-    "eslint": "^6.8.0",
-    "eslint-config-prettier": "^6.15.0",
-    "gh-pages": "^3.1.0",
-    "husky": "^1.0.0",
-    "lint-staged": "^10.0.0",
-    "prettier": "^2.0.4",
+    "@babel/preset-env": "^7.15.0",
+    "@open-wc/building-rollup": "^1.10.0",
+    "@open-wc/eslint-config": "^4.3.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "18.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.4",
+    "@rollup/plugin-replace": "^3.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@types/dropzone": "^5.7.4",
+    "@typescript-eslint/eslint-plugin": "^5.43.0",
+    "@typescript-eslint/parser": "^5.43.0",
+    "@web/dev-server": "0.1.21",
+    "@web/dev-server-rollup": "^0.3.10",
+    "@web/rollup-plugin-html": "^1.9.1",
+    "@web/rollup-plugin-import-meta-assets": "^1.0.7",
+    "babel-plugin-template-html-minifier": "^4.1.0",
+    "bestzip": "^2.2.0",
+    "concurrently": "^6.2.1",
+    "deepmerge": "^4.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.3.2",
+    "prettier-plugin-organize-imports": "^3.2.0",
     "rimraf": "^3.0.2",
-    "rollup": "^2.32.0",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-node-globals": "^1.4.0",
-    "rollup-plugin-postcss": "^3.1.8",
-    "rollup-plugin-postcss-lit": "^1.0.1",
-    "tslib": "^1.11.0",
-    "typescript": "~4.2.4",
-    "web-component-analyzer": "^1.1.6"
+    "rollup": "^2.56.2",
+    "rollup-plugin-terser": "^7.0.2",
+    "run-singleton-cli": "^0.0.7",
+    "tslib": "^2.3.1",
+    "typescript": "^4.9.0"
   },
   "eslintConfig": {
     "extends": [

package/dist/services/file-storage.service.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"file-storage.service.js","sourceRoot":"","sources":["../../src/services/file-storage.service.ts"],"names":[],"mappings":"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","sourcesContent":["import type { CellClient } from '@holochain-open-dev/cell-client';\nimport { FileMetadata } from '../types';\n\nexport class FileStorageService {\n  /**\n   * @param appWebsocket connection to the holochain backend\n   * @param cellId the cell to which to upload the file\n   * @param zomeName the zome name of the file_storage zome in the given cell\n   */\n  constructor(\n    protected cellClient: CellClient,\n    protected 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<string> {\n    const blobs = this._splitFile(file, chunkSize);\n    const numberOfChunks = blobs.length;\n    const bytesPerChunk = blobs[0].size;\n\n    const chunksHashes: Array<string> = [];\n    for (let i = 0; i < blobs.length; i++) {\n      const chunkHash = await this._createChunk(blobs[i]);\n      chunksHashes.push(chunkHash);\n      if (onProgress) {\n        onProgress(((i + 1) * 1.0) / numberOfChunks, bytesPerChunk * (i + 1));\n      }\n    }\n\n    const fileToCreate = {\n      name: file.name,\n      size: file.size,\n      fileType: file.type,\n      lastModified: file.lastModified,\n      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: string): Promise<File> {\n    const metadata = await this.getFileMetadata(fileHash);\n\n    const fetchChunksPromises = metadata.chunksHashes.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: metadata.lastModifed,\n      type: metadata.fileType,\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: string): 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: string): 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<string> {\n    const bytes = await chunk.arrayBuffer();\n\n    return this._callZome('create_file_chunk', new Uint8Array(bytes));\n  }\n\n  private _callZome(fnName: string, payload: any): Promise<any> {\n    return this.cellClient.callZome(this.zomeName, fnName, payload);\n  }\n}\n"]}

package/dist/sharedStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"sharedStyles.js","sourceRoot":"","sources":["../src/sharedStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;CAa9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const sharedStyles = css`\n  .column {\n    display: flex;\n    flex-direction: column;\n  }\n  .row {\n    display: flex;\n    flex-direction: row;\n  }\n  .center-content {\n    align-items: center;\n    justify-content: center;\n  }\n`;\n"]}