uploader.js

import React, { useState } from "react"

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

const publicNodes = [
  '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 Uploader(props) {
  const [dest, setDest] = useState(writeableNodes[0]);
  const [asset, setAsset] = useState('');
  const [description, setDescription] = useState('');
  const [image, setImage] = useState('');
  const [website, setWebsite] = useState('');
  const [pgpsig, setPgpsig] = useState('');
  function makeJson() {
    const js = { asset: asset };
    if (description !== '') js.description = description;
    if (image !== '') js.image = image;
    if (website !== '') js.website = website;
    if (pgpsig !== '') js.pgpsig = pgpsig;
    return js;
  }
  const [jsonStr, setJsonStr] = useState(JSON.stringify(makeJson()));

  const [ipfsHash, setIpfsHash] = useState('');
  function destChanged(ev) {
    const v = ev.target.value;
    setDest(v);
  }
  function assetChanged(ev) {
    const v = ev.target.value;
    setAsset(v);
    const js = makeJson();
    js.asset = v;
    setJsonStr(JSON.stringify(js));
  }
  function descChanged(ev) {
    const v = ev.target.value;
    setDescription(v);
    const js = makeJson();
    if (v === '') {
      delete js.description;
    } else {
      js.description = v;
    }
    setJsonStr(JSON.stringify(js));
  }
  function imageChanged(ev) {
    const v = ev.target.value;
    setImage(v);
    const js = makeJson();
    if (v === '') {
      delete js.image;
    } else {
      js.image = v;
    }
    setJsonStr(JSON.stringify(js));
  }
  function websiteChanged(ev) {
    const v = ev.target.value;
    setWebsite(v);
    const js = makeJson();
    if (v !== '') js.website = v;
    if (v === '') {
      delete js.website;
    } else {
      js.website = v;
    }
    setJsonStr(JSON.stringify(js));
  }
  function pgpsigChanged(ev) {
    const v = ev.target.value;
    setPgpsig(v);
    const js = makeJson();
    if (v === '') {
      delete js.pgpsig;
    } else {
      js.pgpsig = v;
    }
    setJsonStr(JSON.stringify(js));
  }
  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 (
    <>
      アップロード先
      <select onBlur={destChanged}>
        {opts}
      </select>
      <br />

      asset
      <br />
      <input type="text" defaultValue="" onChange={assetChanged}
        placeholder="A9999999999999999999" />
      <br />

      description (Optional)
      <br />
      <input type="text" defaultValue="" onChange={descChanged}
        placeholder="2048 characters max"
        style={{width: '100%'}} />
      <br />

      image (Optional)
      <br />
      <input type="text" defaultValue="" onChange={imageChanged}
        placeholder="ipfs://... 48x48, RGB or RGBA PNG. less than 100KiB"
        style={{width: '100%'}} />
      <br />

      website (Optional)
      <br />
      <input type="text" defaultValue="" onChange={websiteChanged}
        placeholder="https://..."
        style={{width: '100%'}} />
      <br />

      pgpsig (Optional)
      <br />
      <input type="text" defaultValue="" onChange={pgpsigChanged}
        placeholder="https://..."
        style={{width: '100%'}} />
      <br />

      アップロード内容(編集不可)
      <br />
      <textarea name="kanso" rows="4" cols="40" value={jsonStr}
        readOnly={true} />
      <br />
      <button onClick={() => {
                        fetch(dest, {
                            method: 'POST',
                            body: jsonStr,
                          })
                          .then((res) => {
                            const ih = res.headers.get('Ipfs-Hash');
                            setIpfsHash(ih);
                          })
                      }}>
                アップロードする
      </button>
      <br />
      Descriptionに設定するURL
      <br />
      <input type="text" value={'ipfs://' + ipfsHash} style={{width: '100%'}}
        readOnly={true} />
      <br />
      {links === null ? '' : '確認用リンク'}
      <br />
      {links}
      <br />
    </>
  );
}