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

jahend412 profile image

Delving Back Into React: Building a Website for a Local Construction Company

Josh Endemann -

gattacca profile image

Addi(c)tion numérique

Guillaume Boitelle -

ariston_itservices profile image

How AI and Automation Are Reshaping On-Demand Services

Ariston IT Services -

m7md2112 profile image

Efficient Rendering with useVirtualizedList: A Guide to Virtualized Scrolling in React

Muhammad Mustafa -