File Storage
Storing files on the blockchain is possible within the SKALE Network. You can use SKALE to host your text, image, HTML, and other file formats through the file-storage npm package.
See the file storage demo on Github.
Please note: the code samples below are for version 0.2.5
npm i @skalenetwork/filestorage.js
Instantiate the Client
To instantiate the client you only need to pass the SKALE endpoint into the constructor.
const Filestorage = require('@skalenetwork/filestorage.js/src/index');let filestorage = new Filestorage("[YOUR_SKALE_CHAIN_ENDPOINT]");
Upload Files
Uploading files can be accomplished by using the uploadFile method available within the NPM package.
//Input field to add to your HTML<input onChange={(e) => upload(e)}type="file" id="files" / >//JavaScript function for handling the file uploadasync function upload(event){event.preventDefault();//create web3 connectionconst web3Provider = new Web3.providers.HttpProvider("[YOUR_SKALE_CHAIN_ENDPOINT]");let web3 = new Web3(web3Provider);//get filestorage instancelet filestorage = new Filestorage(web3, true);//provide your account & private key//note this must include the 0x prefixlet privateKey = '0x' + '[YOUR_PRIVATE_KEY]';let account = "[YOUR_ACCOUNT_ADDRESS]";//get file data from file upload input fieldlet file = document.getElementById('files').files[0];let reader = new FileReader();//file storage method to upload filereader.onload = async function(e) {const arrayBuffer = reader.resultconst bytes = new Uint8Array(arrayBuffer);let link = filestorage.uploadFile(account,file.name,bytes,privateKey);};reader.readAsArrayBuffer(file);}
Show Files
Displaying files can be accomplished by using the listDirectory method available within the NPM package.
async function getFiles(){//create web3 connectionconst web3Provider = new Web3.providers.HttpProvider("[YOUR_SKALE_CHAIN_ENDPOINT]");let web3 = new Web3(web3Provider);//get filestorage instancelet filestorage = new Filestorage(web3, true);//provide your account & private keylet account = "[YOUR_ACCOUNT_ADDRESS]";let files = await filestorage.listDirectory(web3.utils.stripHexPrefix(account));}
Download Files
Downloading files can be accomplished by using the FilestorageClient.downloadToFile or the downloadToBuffer method available within the NPM package.
async function downloadFileToDesktop(link) {//create web3 connectionconst web3Provider = new Web3.providers.HttpProvider("[YOUR_SKALE_CHAIN_ENDPOINT]");let web3 = new Web3(web3Provider);//get filestorage instancelet filestorage = new Filestorage(web3, true);await filestorage.downloadToFile(link);}async function downloadFileToVariable(link) {//create web3 connectionconst web3Provider = new Web3.providers.HttpProvider("[YOUR_SKALE_CHAIN_ENDPOINT]");let web3 = new Web3(web3Provider);//get filestorage instancelet filestorage = new FilestorageClient(web3, true);let file = await filestorage.downloadToBuffer(link);file = 'data:image/png;base64,' + file.toString('base64');}
Delete Files
Deleting files can be accomplished by using the deleteFile method available within the NPM package.
async function deleteFile(fileName) {//create web3 connectionconst web3Provider = new Web3.providers.HttpProvider("[YOUR_SKALE_CHAIN_ENDPOINT]");let web3 = new Web3(web3Provider);//get filestorage instancelet filestorage = new Filestorage(web3, true);//provide your account & private key//note this must include the 0x prefixlet privateKey = '[YOUR_PRIVATE_KEY]';let account = "[YOUR_ACCOUNT_ADDRESS]";await filestorage.deleteFile(account, fileName, privateKey);