DEV Community

Ayden
Ayden

Posted on

How to quick start web3.storage

register an account

  • Email
  • Github (recommand)

install the client 

javascript
npm install web3.storage
golang
go get github.com/web3-storage/go-w3s-client
Enter fullscreen mode Exit fullscreen mode

create a client instance 

//get the access token
function getAccessToken(){
    return process.env.TOKEN
}
//creata an instance
function makeStorageClient(){
    return new Web3storage({token:getAccessToken()})
}
Enter fullscreen mode Exit fullscreen mode

preparing files for uploading 

function getFiles(){
    const fileInput = document.querySelector('input[type="file"]')
    return fileInput.files
}
Enter fullscreen mode Exit fullscreen mode

upload files to web3.storage 

//async upload process
async function storageFiles(files){
    const client = makeStorageClient()
    const cid = await client.put(files)
    return cid
}
Enter fullscreen mode Exit fullscreen mode

directory wrapping

after uploading you'll get a cid of the directory and then the entire link gonna be ipfs:///
to make a gateway link :

https://<cid>.ipfs.<gateway-host>/<filename>
https://<gateway-host>/ipfs/<cid>/<filename>
Enter fullscreen mode Exit fullscreen mode

storing ipfs content archives?

if you already have some files you can use putCar client function.I don't want to jump into this here.

how to access data we uploaded above ?

  • using an IPFS http gateway
  • using client library
  • ipfs command line
  • system command line

how to query web3.storage 

async function checkStatus(cid){
    const client = xxxx
    const status = await client.status(cid)
}
Enter fullscreen mode Exit fullscreen mode

return data structure

  • cid
  • created
  • dagSize
  • pins
  • deals

how to list files uploaded to web3.storage 

const client = xxxx
for await (const upload of client.list(){
    console.log(upload.name,upload.cid,upload.dagSize)
})
Enter fullscreen mode Exit fullscreen mode

listing the content of an IPFS directory

Top comments (0)

Read next

douglasporto profile image

Styling Your Site with Next.js and MUI: Creating a Dynamic Theme Switcher

Douglas Porto -

iamthejahid profile image

Keeping Users Up-to-Date: A Guide to Mobile App Version Control

Jahidul Islam -

aliraza profile image

Node.js itself is not single-threaded.

Ali Raza -

anurag31oct profile image

Error: Cannot find module '/path/.next/build-manifest.json'

Anurag Roy -