This content originally appeared on DEV Community and was authored by Ibelick
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. */
};
This content originally appeared on DEV Community and was authored by Ibelick
Ibelick | Sciencx (2022-04-12T20:02:41+00:00) Tiny react hook to upload files into IPFS. Retrieved from https://www.scien.cx/2022/04/12/tiny-react-hook-to-upload-files-into-ipfs/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.