storj/browser

A Vue component for managing files on Storj, via gateway-mt.

Development

Use Iris.

Integration

Install

Right now, storj/browser is not published to npm, so you have to install it from the git repo. This can be done by referencing a specific commit and adding it to your package.json.

"dependencies": {
    ...
    "browser": "git+https://github.com/storj/browser#e2f7fd2b7a8502c41ca13b5fa0987df659e58efa",
},

npm install

Add Vuex module

In order to use the file browser, we need to add the files module to our app store.

• Import the files module in src/store/index.js

import { files } from "browser";

• Add it to the modules

export default new Vuex.Store({
  state: {
      ...
  },
  mutations: {
      ...
  },
  actions: {
      ...
  },
  modules: {
    files
  }
})

Create page to instantiate FileBrowser

• In src/views/MyFileBrowserPage.vue, import the css

<style scoped>
    @import "../node_modules/browser/dist/browser.css";
</style>

• Instantiate the FileBrowser component inside a <div> with class file-browser.

<template>
    <div class="home">
        <div class="file-browser">
            <file-browser></file-browser>
        </div>
    </div>
</template>

• Initialize the store with gateway-mt credentials and an already-existing bucket

<script>
    import { FileBrowser } from "browser";

    export default {
        name: "FileBrowserPage",
        data: () => ({
            displayCredentials: true,
            endpoint: "gateway.tardigradeshare.io",
            accessKey: "",
            secretKey: "",
            bucket: "",
            browserRoot: "/"
        }),
        created() {
            this.$store.commit("files/init", {
                endpoint: this.endpoint,
                accessKey: this.accessKey,
                secretKey: this.secretKey,
                bucket: this.bucket,
                browserRoot: this.browserRoot
            });
        }
    };
</script>

Add MyFileBrowserPage.vue to your router

• In src/router/index.js, add MyFileBrowserPage with a wildcard for all sub-paths.

import MyFileBrowserPage from "../views/MyFileBrowserPage.vue";

const routes = [
    {
        path: "/",
        name: "Home",
        component: MyFileBrowserPage,
        children: [
            {
                path: "*",
                component: MyFileBrowserPage
            }
        ]
    }
];