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');

function create_pin_tag(node, cid) {
    const item = document.createElement('li');
    const link = document.createElement('a');
    link.href = "https://dweb.link/ipfs/" + cid.toString();
    link.innerText = cid.toString();
    item.appendChild(link);
    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(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(create_pin_tag(node, cid));
        }
    }
    document.body.appendChild(pinList);
}

initialize();