Unzipit Example User File

by Gregg Tavares

HTML

<input type="file">
<div id="content">

</div>

CSS

img, video { max-width: 200px; padding: 5px; }
pre { margin: 0 }
h2 { font-family: monospace; }

JavaScript

import {unzip, setOptions} from 'https://unpkg.com/[email protected]/dist/unzipit.module.js';

setOptions({
  workerURL: 'https://unpkg.com/[email protected]/dist/unzipit-worker.module.js',
  numWorkers: 2,
});

const contentElem = document.querySelector('#content');

async function handleChange(event) {
  const file = event.target.files[0];
	const {entries} = await unzip(file);
  
  contentElem.innerHTML = '';

  for (const [name, entry] of Object.entries(entries)) {
    const h2 = document.createElement('h2');
    h2.textContent = name;
    contentElem.appendChild(h2);
    
    if (entry.isDirectory) {
    	log('directory entry');
    } else if (looksLikeImage(name)) {
    	const blob = await entry.blob();
      const img = new Image();
      img.src = URL.createObjectURL(blob);
      contentElem.appendChild(img);
    } else if (looksLikeVideo(name)) {
    	const blob = await entry.blob();
      const video = document.createElement('video');
      video.src = URL.createObjectURL(blob);
      contentElem.appendChild(video);
    } else if (looksLikeAudio(name)) {
    	const blob = await entry.blob();
      const audio = document.createElement('audio');
      audio.src = URL.createObjectURL(blob);
      contentElem.appendChild(audio);
    } else if (looksLikeText(name)) {
      const text = await entry.text();
      log(text);
    } else if (looksLikeText(name)) {
      const text = await entry.text();
      log(text);
    } else {
      // just print the sizes
      log('size:', entry.size, 'compressed size:', entry.compressedSize);
    }
  }
}

function looksLikeImage(name) {
  return /\.(jpg|jpeg|png|webp|gif)$/.test(name);
}

function looksLikeVideo(name) {
  return /\.(mp4|mkv|webm|ogv)$/.test(name);
}

function looksLikeAudio(name) {
  return /\.(wav|mp3|ogg)$/.test(name);
}

function looksLikeText(name) {
  return /\.(txt|md|html|css|js)$/.test(name);
}

function log(...args) {
  const elem = document.createElement('pre');
  elem.textContent = args.join(' ');
 ...