pin list: prepend filenames

src/index.js

@@ -3,14 +3,21 @@
 // https://github.com/ipfs/js-ipfs/tree/ipfs%400.55.4/docs/core-api
 const IPFS = require('ipfs');
 
-function create_pin_tag(node, cid) {
+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'),
@@ -44,7 +51,7 @@ async function initialize() {
             content: fileReader.result,
         };
         const pin = await node.add(file, {wrapWithDirectory: true});
-        pinList.appendChild(create_pin_tag(node, pin.cid));
+        pinList.appendChild(await create_pin_tag(node, pin.cid));
     };
     const fileSelector = document.createElement('input');
     fileSelector.type = 'file';
@@ -55,7 +62,7 @@ async function initialize() {
     document.body.appendChild(fileSelector);
     for await(const { cid, type } of node.pin.ls()) {
         if(type != 'indirect') {
-            pinList.appendChild(create_pin_tag(node, cid));
+            pinList.appendChild(await create_pin_tag(node, cid));
         }
     }
     document.body.appendChild(pinList);