Using Filestorage

SKALE Filestorage is the only onchain and decentralized filestorage in blockchain. The following walks through an example of how to use filestorage on your sChain.

Filestorage capacity is dependent on each SKALE Chain. Different size chains and configurations result in different allocations to filestorage, which is a capped resource. Filestorage is ideal for storing static data (i.e one off sets of metadata or images) but not for data that may grow exponentially (i.e user uploads).

Preparing Files

The following example will be showcasing how to store a static website in filestorage.

Requirements

You will need:

An RPC Endpoint
A private key (with sFUEL) that has been provided with storage space
Files (see next section)

1. Prepare Files

Anything that builds into HTML, CSS, JS, and media files will work. If you haven’t already built a site, you can use the below:

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="styles.css">
<html>
    <body>
        <h1>SKALE Filestorage Demo</h1>
        <p>My first decentralized website!</p>
        <a href="https://skale.space" target="_blank" rel="noreferrer">SKALE Website</a>
    </body>
</html>

body {
    background-color: #ccc;
}

2. Upload to your SKALE Chain

Setup your project as follows:

Run the following in your terminal:

mkdir skale-fs-website \
&& cd skale-fs-website \
&& npm init -y \
&& npm install @skalenetwork/filestorage.js dotenv \
&& touch index.js .env \
&& mkdir test-skale \
&& cd test-skale

If you are using your own static site, copy the site into the folder called test-skale. If you are using the example above, run the following in your terminal:

touch index.html styles.css

Once complete, copy the above files into their respective files.

3. Setup

Open the index.js file and copy in the following:

#! /usr/bin/env node

const Filestorage = require('@skalenetwork/filestorage.js');
const fs = require('fs');
const Web3 = require('web3');
const dotenv = require("dotenv");

dotenv.config();

// If not using the SDK, replace the endpoint below with your SKALE Chain endpoint
let filestorage = new Filestorage('http://localhost:15000');

// If not using the SDK, replace with the SKALE Chain owner key and address.
let privateKey = process.env.PRIVATE_KEY || '<SKALE CHAIN OWNER KEY>';
let address = process.env.ADDRESS || '<SKALE CHAIN OWNER ADDRESS>';

let directoryPath = 'test-skale';

// Bytes of filestorage space to allocate to an address
// reservedSpace must be >= sum of uploaded files
const reservedSpace = 3 * 10 ** 8;

const files = fs.readdirSync(directoryPath);

async function upload() {
    // Owner must reserve space to an address
    await filestorage.reserveSpace(address, address, reservedSpace, privateKey);
    for(let i = 0; i < files.length; ++i)  {
        let content;
        let contentPath;
        content = await fs.readFileSync(directoryPath + '/' + files[i]);
        contentPath = await filestorage.uploadFile(address, files[i], content, privateKey);
    }
}

upload();

Open the .env file and copy in the following:

PRIVATE_KEY=YOUR_PRIVATE_KEY
RPC_URL=RPC_URL_OF_SKALE_CHAIN

4. Executing

When executing, this is done via the standard RPC_URL endpoint of your sChain. This was added to your .env file above. To execute, run the following:

node index.js

Upon executing, Filestorage.js is taking the files and turning them into EVM chunks which are then sent as transactions up to the SKALE Chain.

6. Access your website

The following is your endpoint:

# Reverse Proxy Endpoint = mainnet.skalenodes.com
# SKALE Chain Name = honorable-steel-rasalhague
# Filestorage Full Path = uploader address + path + file name + file extension
# Example: https://network.skalenodes.com/fs/chubby-sadr/77333da3492c4BBB9ccf3Ea5bb63d6202f86cda8/index.html
http(s)://REVERSE_PROXY_ENDPOINT/fs/SKALE_CHAIN_NAME/[FILESTORAGE_FULL_PATH]

If connecting directly to a single node on the sChain, the following is your endpoint:

# Node Domain Name = validator.com
# SKALE Chain Name = elated-tan-skat
# Filestorage Full Path = uploader address + path + file name + file extension
# Example: https://node1.validator.com/fluffy-marsupial/77333da3492c4BBB9ccf3Ea5bb63d6202f86cda8/index.html
http(s)://NODE_DOMAIN_NAME/SKALE_CHAIN_NAME/FILESTORAGE_FULL_PATH

Checkout Filestorage.js for a deeper dive into the available functions.