Parsing HTML entries from zip, alongside relevant assets

[itzcodex24]

Hi all 👋

When a user uploads a zip file, I plan to use the zip.js library to unzip and gather all the files the user has uploaded, as well as pinpoint an entry index.html file.

Assuming the user has also uploaded some .css files, .js files and other static assets: .png, .gif etc.

What would be the best way to combine all of these together and stick them inside an iframe. I have somewhat of a working example here, but I am not happy with this implementation as it requires manipulating the user uploaded files. Please have a look and let me know what you think my best options are:

import * as zip from "../node_modules/@zip.js/zip.js/index.js";

const iframe = document.querySelector('iframe');
const blacklist = ['__MACOSX', 'DS_Store'];

function getMimeType(filename) {
  const extension = filename.split('.').pop().toLowerCase();
  switch (extension) {
    case 'html': return 'text/html';
    case 'css': return 'text/css';
    case 'js': return 'text/javascript';
    case 'png': return 'image/png';
    case 'jpg': case 'jpeg': return 'image/jpeg';
    case 'gif': return 'image/gif';
    case 'svg': return 'image/svg+xml';
    case 'mp4': return 'video/mp4';
    case 'webm': return 'video/webm';
    default: return 'application/octet-stream';
  }
}

function resolvePath(relativePath, baseDir) {
  const baseSegments = baseDir ? baseDir.split('/') : [];
  const relativeSegments = relativePath.split('/');
  
  for (const seg of relativeSegments) {
    if (seg === '..') {
      baseSegments.pop();
    } else if (seg !== '.' && seg !== '') {
      baseSegments.push(seg);
    }
  }
  return baseSegments.join('/');
}

async function startDownload() {
  const res = await fetch(`http://IP:3000/zip.zip`);
  if (!res.ok) return console.error('Download failed');

  const blob = await res.blob();
  if (!blob) return console.error('Invalid blob');

  const reader = new zip.ZipReader(new zip.BlobReader(blob));
  const entries = await reader.getEntries();

  const validEntries = entries.filter(e => 
    !blacklist.some(b => e.filename.includes(b))
  );

  const files = {};
  for (const entry of validEntries) {
    const blobData = await entry.getData(new zip.BlobWriter());
    files[entry.filename] = blobData;
  }

  const htmlEntry = validEntries.find(e => e.filename.includes('index.html'));
  if (!htmlEntry) return console.error('No HTML file found');

  const blobUrls = {};
  for (const [filename, dataBlob] of Object.entries(files)) {
    const mimeType = getMimeType(filename);
    const correctBlob = new Blob([dataBlob], { type: mimeType });
    blobUrls[filename] = URL.createObjectURL(correctBlob);
  }

  const htmlBlob = files[htmlEntry.filename];
  const htmlText = await htmlBlob.text();
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlText, 'text/html');

  const attributes = ['src', 'href'];
  const elements = Array.from(doc.querySelectorAll('*')).filter(el => 
    attributes.some(attr => el.hasAttribute(attr))
  );

  const htmlDir = htmlEntry.filename.split('/').slice(0, -1).join('/');

  elements.forEach(el => {
    attributes.forEach(attr => {
      if (el.hasAttribute(attr)) {
        const value = el.getAttribute(attr);
        const resolvedPath = resolvePath(value, htmlDir);
        if (blobUrls[resolvedPath]) {
          el.setAttribute(attr, blobUrls[resolvedPath]);
        }
      }
    });
  });

  const serializer = new XMLSerializer();
  const modifiedHtml = serializer.serializeToString(doc);
  const modifiedHtmlBlob = new Blob([modifiedHtml], { type: 'text/html' });
  const htmlUrl = URL.createObjectURL(modifiedHtmlBlob);

  iframe.src = htmlUrl;

  await reader.close();
}

startDownload();