ユーザ用ツール

サイト用ツール


blockchain:dappsからipfsにファイルをアップロードする

文書の過去の版を表示しています。


DAppsからIPFSにファイルをアップロードする

React プロジェクトの作成

> mkdir IPFS
> cd IPFS
IPFS> npx create-react-app ipfs-web --template typescript
IPFS> cd .\ipfs-web\
IPFS\ipfs-web> npm install --save ipfs-core ipfs-core-types util

参考

IPFSUploader.tsx の実装

import React, { BaseSyntheticEvent, useState, useEffect } from 'react';
import * as IPFS from 'ipfs-core';
 
function IPFSUploader() {
    const [node, setNode] = useState<any>(null);
    useEffect(() => {
        const connectIPFS = async () => {
            console.log("useEffect");
            let _node = await IPFS.create({ silent: true });
            setNode(_node);
        };
        if(!node){
            console.log("connectIPFS");
            connectIPFS();
        }
    }, []);
 
  const initializeIPFS = async () => {
    console.log("initializeIPFS");
    const node = await IPFS.create({ silent: true });
    const version = await node.version();
    const { cid } = await node.add('hello world! world is fun!!!');
    console.info(version);
    console.info(cid);
    const stream = await node.cat(cid);
    let result = "";
    for await (const chunk of stream) {
      result += chunk.toString()
    }
    console.info(result);
  };
 
  const fileSelected = (event: BaseSyntheticEvent) => {
    console.log("fileSelected");
    console.log(event);
    console.log(event.target.files);
  };
  return (
    <div>
        <button onClick={initializeIPFS}>Initialize IPFS</button>
        <input id="input-file" type="file" onChange={fileSelected}></input>
    </div>
  );
}
 
export default IPFSUploader;
blockchain/dappsからipfsにファイルをアップロードする.1654591380.txt.gz · 最終更新: 2022/06/07 08:43 by dot