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

airabbit profile image

Optimizing AI Agents API Calls in n8n: Building a Simple Caching Mechanism

AIRabbit -

jeanisonline profile image

The internet with Cypress: Real-World Scenarios from Heroku’s “The Internet” Playground

Jean Paiva -

signadot profile image

Multitenancy Is Fundamental to Shift-Left Testing

Signadot -

arbisoftcompany profile image

e-Conomy SEA 2024: Southeast Asia’s Digital Growth Takes Off

Arbisoft -