I suggest you include theweb3 environment in your growth strategy. Therefore, you should use technical implementations decentralized networks likesubgraph orIPFS.

In this guide, you'll learn how to send image files toIPFS usingipfs-http-client and Nextjs

You can see the demohere or jump to directlyGitHub

Pre-requests

• Node 15 >

Getting started

Create a simple next js app:

npxcreate-next-appipfs

Add IPFS HTTP client library using yarn:

yarnaddipfs-http-client

Create a new constant forIPFS gateway. In this case, we will useInfura API.

constclient=create("https://ipfs.infura.io:5001/api/v0");

Get a random image URL fromUnsplash. You can see more detail inhere.

asyncfunctiongetImage(){fetch(https://source.unsplash.com/500x500/?beach).then((response) => {letimageURL=response.url;setImageURL(imageURL);});}

Or you can use your own fetching solution like custom form data, Cloudinary etc.

Then upload your file to IPFS.

The critical thing is, you should fetch theimage URL as ablob object.

constblobFile=awaitfetch(imageURL).then((r)=>r.blob());

Create a new function asuploadFile

asyncfunctionuploadFile(){constblobFile=awaitfetch(imageURL).then((r)=>r.blob());try{constadded=awaitclient.add(blobFile);consturl=https://ipfs.infura.io/ipfs/${added.path};updateIPFSURL(url);}catch(error){console.log("Error uploading file:",error);}}

Finally, you are ready to fetch and image image object from URL and send to IPFS.

Clone the full repositoryhere and run;

yarndev

You can see the more detailed cases about Web3 from Nader Dabit’s postshere.

Thanks for reading. 👋 Don't forget to subscribe me onMedium orDev.to