Skip to content

Instantly share code, notes, and snippets.

@ohac
Created Dec 27, 2020
Embed
What would you like to do?
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 />
</>
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment