DOT's Wiki

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。

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

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

===== 静的 HTML の作成 =====

<code JavaScript>
> mkdir simple_web
> cd simple_web
simple_web> code IPFSUploader.html
</code>

<code 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>
</code>