React で Web アプリケーションを実装し、HTML の FILE API で指定されたファイルを IPFS にアップロードする機能を実現します。

> 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

「ipfs-core」は JavaScript で IPFS を操作するためのライブラリ js-ipfs の一部です。

• js-ipfs-examples

IPFS にファイルをアップロードする機能を提供する IPFSUploader.tsx コンポーネントを実装します。

IPFS\ipfs-web> mkdir src\components
IPFS\ipfs-web> code src\components\IPFSUploader.tsx

import React, { BaseSyntheticEvent, useState, useEffect } from 'react';
import type { IPFS } from 'ipfs-core-types';
import * as IPFSCore from 'ipfs-core';
 
let ipfs: IPFS;
 
function IPFSUploader() {
    const [isIpfsReady, setIpfsReady] = useState(Boolean(ipfs))
    const [version, setVersion] = useState("");
    const [cid, setCID] = useState("");
 
    useEffect(() => {
        startIpfs();
        return function cleanup () {
            if (ipfs && ipfs.stop) {
                console.log('Stopping IPFS');
                ipfs.stop().catch((err: any) => console.error(err));
                //ipfs = undefined;
                setIpfsReady(false);
            }
        }
    }, []);
 
    const startIpfs = async () => {
        if(ipfs){
            console.log('IPFS already started');
        /*
        } else if (window.ipfs && window.ipfs.enable) {
            console.log('Found window.ipfs')
            ipfs = await window.ipfs.enable({ commands: ['id'] })
        */
        } else {
            ipfs = await IPFSCore.create();
            console.log("IPFS Started");
            const _version = await ipfs.version();
            setVersion(_version.version);
        }
        setIpfsReady(Boolean(ipfs));
    };
    const fileSelected = async (event: BaseSyntheticEvent) => {
        if(!isIpfsReady) return;
 
        const targetFile = event.target.files[0];
        const _result = await ipfs.add(targetFile);
        //const _result = await ipfs.add('Hello world');
        setCID(_result.path);
    };
 
  return (
    <div>
        <h1>IPFS File Uploader</h1>
        <p>IPFS(ipfs-core) Version: { version }</p>
        <input id="input-file" type="file" onChange={fileSelected}></input>
        <div>
            <p>Uploaded File CID: { cid }</p>
            <p><a href={`ipfs://${cid}`} target="_blank">open browser</a></p>
            <p><a href={`https://ipfs.io/ipfs/${cid}`} target="_blank">open ipfs.io public gateway</a></p>
        </div>
    </div>
  );
}
 
export default IPFSUploader;

IPFS\ipfs-web> code src\App.tsx

不要な記述を削除し、IPFSUploader コンポーネントを追加します。

import React from 'react';
import './App.css';
import IPFSUploader from './components/IPFSUploader';
 
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <IPFSUploader/>
      </header>
    </div>
  );
}
 
export default App;

IPFS\ipfs-web> npm start