Small zome to create and retrieve files, in holochain RSM.
This module is designed to be included in other DNAs, assuming as little as possible from those. It is packaged as a holochain zome, and an npm package that offers native Web Components that can be used across browsers and frameworks.
Please note that this module is in its early development
- You have only one DNA in which you want to store the files in your happ (this will be changed in the future).
- Create a new folder in the
zomes
of the consuming DNA, with the namefile_storage
. - Add a new
Cargo.toml
in that folder. In its content, paste theCargo.toml
content from any zome. - Change the
name
properties of theCargo.toml
file tofile_storage
. - Add this zome as a dependency in the
Cargo.toml
file:
[dependencies]
hc_zome_file_storage = {git = "https://github.com/holochain-open-dev/file-storage", package = "hc_zome_file_storage"}
- Create a
src
folder besides theCargo.toml
with this content:
extern crate hc_zome_file_storage;
- Add the zome into your
dna.yaml
file, with the namefile_storage
.
- If you want to give the zome a different name you should also initialize the
FileStorageService
with it.
- Compile the DNA with the usual
CARGO_TARGET=target cargo build --release --target wasm32-unknown-unknown
.
-
Install the module with
npm install "https://github.com/holochain-open-dev/file-storage#ui-build"
. -
Import and define the the elements you want to include:
import { AppWebsocket } from "@holochain/conductor-api";
import { ContextProvider } from "@holochain-open-dev/context";
import {
UploadFiles,
fileStorageServiceContext,
FileStorageService,
} from "@holochain-open-dev/file-storage";
import { css, html, LitElement } from "lit";
import { ScopedElementsMixin } from "@open-wc/scoped-elements";
import { ContextProvider } from "@holochain-open-dev/context";
import { AppWebsocket } from "@holochain/conductor-api";
customElements.define(
"file-storage-demo",
class extends ScopedElementsMixin(LitElement) {
async firstUpdated() {
const appWebsocket = await AppWebsocket.connect("ws:https://localhost:8888");
const appInfo = await appWebsocket.appInfo({
installed_app_id: "test-app",
});
const cellId = appInfo.cell_data[0].cell_id;
const service = new FileStorageService(appWebsocket, cellId);
new ContextProvider(this, fileStorageServiceContext, service);
}
render() {
return html`<upload-files></upload-files>`;
}
static get scopedElements() {
return {
"upload-files": UploadFiles,
};
}
}
);
- Include the elements in your html:
<body>
<file-storage-demo></file-storage-demo>
</body>
Take into account that at this point the elements already expect a holochain conductor running at ws:https://localhost:8888
.
You can see a full working example here.
Visit the developer setup.