upimage.js

import React, { useState } from "react"

const writeableNodes = [
  //'http://127.0.0.1:8080/ipfs/',
  'https://ipfs.eternum.io/ipfs/',
  'https://jacl.tech/ipfs/',
];

const publicNodes = [
  //'http://127.0.0.1:8080/ipfs/',
  'https://ipfs.io/ipfs/',
  'https://mona.party/ipfs/', 
  'https://jacl.tech/ipfs/',
  'https://ipfs.telos.miami/ipfs/',
  'https://ipfs.2read.net/ipfs/', 
  'https://ipns.co/ipfs/',
];

export default function UpImage(props) {
  const [dest, setDest] = useState(writeableNodes[0]);
  const [file, setFile] = useState(null);
  const [imgSrc, setImgSrc] = useState('');
  const [ipfsHash, setIpfsHash] = useState('');
  const [warn, setWarn] = useState('');
  function destChanged(ev) {
    const v = ev.target.value;
    setDest(v);
  }
  function fileChanged(ev) {
    const files = ev.target.files;
    if (files.length === 0) return;
    const file = files[0];
    setFile(file);
    const size = file.size;
    const type = file.type;
    if (size >= 100*1024) {
      setWarn('ファイルサイズが100KiB以上あります。');
    } else if (type !== 'image/png') {
      setWarn('PNG形式ではありません。');
    } else {
      setWarn('');
    }
    const reader = new FileReader();
    reader.onload = (ev) => {
      const result = ev.target.result;
      setImgSrc(result);
    }
    reader.readAsDataURL(file);
  }

  function upload(ev) {
    fetch(dest, {
        method: 'POST',
        body: file,
      })
      .then((res) => {
        const ih = res.headers.get('Ipfs-Hash');
        setIpfsHash(ih);
      })
  }
  const opts = writeableNodes.map((up, i) => {
    return (
        <option key={'wn'+i} value={up} label={up} aria-label={up} />
    );
  });
  let links = null;
  if (ipfsHash !== '') {
    links = publicNodes.map((node) => {
      const url = node + ipfsHash;
      return (
        <div key={node}>
          <a href={url}>{url}</a><br />
        </div>
      );
    });
  }

  return (
    <>
      アップロード先
      <br />
      <select onBlur={destChanged}>
        {opts}
      </select>
      <br />

      画像データ(Monaparty用の場合は48x48のPNGファイルでサイズは100KiB未満)
      <br />
      <input type="file" onChange={fileChanged} />
      <br />
      <div style={{color: 'red'}}>
      {warn}
      </div>
      <br />
      <img src={imgSrc} alt='' />
      <br />

      <button onClick={upload}>アップロードする</button>
      <br />
      imageに設定するURL
      <br />
      <input type="text" value={'ipfs://' + ipfsHash} style={{width: '100%'}}
        readOnly={true} />
      <br />
      {links === null ? '' : '確認用リンク'}
      <br />
      {links}
      <br />
    </>
  );
}