ipfs.hammerle.me/src/index.js

'use strict';

// https://github.com/ipfs/js-ipfs/tree/ipfs%400.55.4/docs/core-api
const IPFS = require('ipfs');

async function create_pin_tag(node, cid) {
    const item = document.createElement('li');
    for await(const file of node.ls(cid)) {
        if(file.name != file.path) {
            item.appendChild(document.createTextNode(file.name));
            item.appendChild(document.createElement('br'));
        }
    }
    // > If you can't decide between CIDv0 and CIDv1, consider choosing CIDv1
    // > for your new project [...]. This is more future-proof and safe for use
    // > in browser contexts.
    // https://docs.ipfs.tech/concepts/content-addressing/#identifier-formats
    Object.entries({
        // .toString() uses base58btc by default in js-ipfs v0.55.4
        // https://web.archive.org/web/20220811092631/https://upload.wikimedia.org/wikipedia/commons/3/38/Original_source_code_bitcoin-version-0.1.0_file_base58.h.png
        'CID v1 base58btc': cid.toV1().toString('base58btc'),
        'CID v1 base32': cid.toV1().toString('base32'),
        'CID v0 base58btc': cid.toV0().toString('base58btc'),
    }).forEach(([label, cid_string]) => {
        item.appendChild(document.createTextNode(label + ": "));
        const link = document.createElement('a');
        link.href = "https://ipfs.io/ipfs/" + cid_string;
        link.innerText = cid_string.toString();
        item.appendChild(link);
        item.appendChild(document.createElement('br'));
    });
    const unpinButton = document.createElement('button');
    unpinButton.innerText = 'unpin';
    unpinButton.onclick = async function() {
        await node.pin.rm(cid);
        unpinButton.remove();
    };
    item.appendChild(unpinButton);
    return item;
}

async function initialize() {
    const node = await IPFS.create();
    const node_info = await node.id();
    console.log('ipfs node id: ' + node_info.id);
    const pinList = document.createElement('ul');
    const fileReader = new FileReader();
    fileReader.onload = async function(event) {
        const file = {
            path: fileSelector.files[0].name,
            content: fileReader.result,
        };
        const pin = await node.add(file, {wrapWithDirectory: true});
        pinList.appendChild(await create_pin_tag(node, pin.cid));
    };
    const fileSelector = document.createElement('input');
    fileSelector.type = 'file';
    fileSelector.onchange = function() {
        // .readAsBinaryString() breaks binary files somehow
        fileReader.readAsArrayBuffer(fileSelector.files[0]);
    };
    document.body.appendChild(fileSelector);
    for await(const { cid, type } of node.pin.ls()) {
        if(type != 'indirect') {
            pinList.appendChild(await create_pin_tag(node, cid));
        }
    }
    document.body.appendChild(pinList);
}

initialize();