小さな反応フックをIPFSにファイルをアップロードする


For hellocurator 我々は、ユーザーがアプリケーションを介して画像をアップロードできるようにしたい.分散記憶に対する選択の解はipfsである.
IPFSは、ファイル、ウェブサイト、アプリケーションとデータを保存して、アクセスするための分散システムです.
読書をお勧めしますdoc あなたが概念についてもっと知りたいならば.
我々のアプリは次に書かれているので.JSは、カスタムフックとの反応を使用します.しかし、他のJavaScriptフレームワークと機能を取ることができます.

暗号


私たちはipfs-http-client 図書館.
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;
基本的な機能は3行のコードをとります.
  • ゲートウェイを持つクライアントを作成します.異なる種類のgateway を返します.私たちの例では、infuraで無料のものを使用します.しかし、他のサービスを使用するか、自分自身を作成することができます.
  • ファイルまたはデータをIPFSにインポートする
  • 保存したファイルのパスを取得する
  • 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. */
    };
    
    GitHub Gist
    Post on my website