How to send an image from Unsplash to IPFS?
I suggest you include the web3 environment in your growth strategy. Therefore, you should use technical implementations decentralized networks like subgraph or IPFS.
In this guide, you'll learn how to send image files to IPFS using ipfs-http-client and Nextjs
You can see the demo here or jump to directly GitHub
Pre-requests
- Node 15 >
Getting started
Create a simple next js app:
npx create-next-app ipfs
Add IPFS HTTP client library using yarn:
ipfs-http-client
Create a new constant for IPFS gateway. In this case, we will use Infura API.
const client = create("https://ipfs.infura.io:5001/api/v0");
Get a random image URL from Unsplash. You can see more detail in here.
async function getImage() {
fetch(https://source.unsplash.com/500x500/?beach).then((response) => {
let imageURL = 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 the image URL as a blob object.
const blobFile = await fetch(imageURL).then((r) => r.blob());
Create a new function as uploadFile
async function uploadFile() {
const blobFile = await fetch(imageURL).then((r) => r.blob());
try {
const added = await client.add(blobFile);
const url = 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 repository here and run;
yarn dev
You can see the more detailed cases about Web3 from Nader Dabit’s posts here.
Thanks for reading. 👋 Don't forget to subscribe me on Medium or Dev.to