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