静的HTMLからIPFSにファイルをアップロードする

静的HTMLで HTML　の FILE API で指定されたファイルを IPFS にアップロードする機能を実現します。

静的 HTML の作成

> mkdir simple_web
> cd simple_web
simple_web> code IPFSUploader.html

<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>IPFS Uploader</title>
</head>
<body>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ipfs/0.63.3-70e142ac.0/index.min.js"></script>
 
<script type="text/javascript" language="javascript">
    async function fileSelected(element){
        const fileList = element.files;
        const targetFile = fileList[0];
        const ipfs = await window.Ipfs.create();
        const _result = await ipfs.add(targetFile);
        let resultElement = document.getElementById("result");
        resultElement.innerHTML = '<div><p><a href="ipfs://' + _result.path + '" target="_blank">open</a></p><p><a href="https://ipfs.io/ipfs/' + _result.path + '" target="_blank">open ipfs.io public gateway</a></p></div>';
    }
</script>
 
    <div>
        <input type="file" onChange="fileSelected(this)"/>
        <div id="result"></div>
    </div>
 
</body>
</html>