For hellocurator we want to let users upload an image through our application. The solution of choice for decentralized storing is IPFS.
IPFS is a distributed system for storing and accessing files, websites, applications, and data.
I recommend reading the doc if you want to know more about the concepts.
Since our app is written in Next.js, we will use React with a custom hook. But you can take the functionality with any other JavaScript framework.
The code
We will use the ipfs-http-client library.
npm i ipfs-http-client
import { create } from "ipfs-http-client";
import { ImportCandidate } from "ipfs-core-types/src/utils";
const client = create({ url: "https://ipfs.infura.io:5001/api/v0" });
const useIpfs = () => {
const upload = async (file: ImportCandidate) => {
try {
const added = await client.add(file);
const url = `https://ipfs.infura.io/ipfs/${added.path}`;
return url;
} catch (error) {
console.error("Error uploading file: ", error);
}
};
return {
upload,
};
};
export default useIpfs;
The basic functionality takes 3 lines of code:
- create a client with a gateway. There are different types of gateway for IFPS. For our example, we use a free one by infura.io, but you can use other services or create your own.
- Import a file or data into IPFS
- Get the path of the stored file
You can use this hook for storing anything you want on IPFS.
const onSubmit: SubmitHandler<FormValues> = async (data) => {
const image = data.image[0];
/* upload an image */
const imageUrl = await upload(image);
/* upload a file */
const fileUrl = await upload(data.file);
/* upload a text */
const textUrl = await upload("hello!");
/* upload a JSON */
const jsonUrl = await upload(
JSON.stringify({
title: "hellocurator",
description: "We’re happy to introduce hellocurator",
})
);
/* etc. */
};
Top comments (0)