ZipDrop: Why I Built a Browser-Based File Compressor

Sometimes you build things because you need them. ZipDrop is one of those projects.

The Problem

You ever have one of those moments where you just need to zip a few files and every solution is terrible?

• **System zip utilities** - Work fine until they randomly don't
• **WinRAR** - It's 2025, why am I still seeing "40 day trial" popups?
• **7-Zip** - Good but overkill for quick tasks
• **Cloud services** - I don't want to upload my files to some random server

I had a folder that kept failing to compress through normal means. Instead of troubleshooting, I thought "how hard could it be to do this in the browser?"

Enter ZipDrop

ZipDrop is a simple browser-based file compressor. Drag files in, get a zip out. Everything happens client-side - your files never leave your machine.

How It Works

The magic is the JSZip library:

import JSZip from 'jszip';

async function createZip(files) {
  const zip = new JSZip();
  
  for (const file of files) {
    zip.file(file.name, file);
  }
  
  const blob = await zip.generateAsync({ type: 'blob' });
  return blob;
}

The File API lets us read files the user drops, and we can trigger a download with:

function downloadBlob(blob, filename) {
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = filename;
  a.click();
  URL.revokeObjectURL(url);
}

The Tech Stack

• **React** with TypeScript
• **Vite** for blazing fast builds
• **JSZip** for the actual compression
• **CSS** - No framework, just custom styles

Deployed to GitHub Pages because why pay for hosting for a static site?

Features I Added

• Drag and drop (obviously)
• Folder support
• Progress indication for large files
• Maintains directory structure

Try It Out

The live app is at chrishacia.github.io/ZipDrop

Source code: github.com/chrishacia/ZipDrop

Sometimes the best projects are the ones that solve your own problems. What tools have you built for yourself?

Back to Journal