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

6726 ワード
react ipfs web3 javascript テキストリンク
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
    HTTP完全マニュアル第3章
    2つのActivity間でIntentによるデータの相互(双方向)転送