ZIP Viewer / Extractor
View contents of ZIP archives and selectively extract files locally.
The ZIP Viewer / Extractor lets you inspect an archive and pull individual files out of it without ever touching a server. Drop a .zip onto the dashed card (or click "Select ZIP File"), watch "Parsing Archive...", and a success toast reports "Loaded {n} items from {filename}". The "Archive Contents" table lists Name, Size, and Action per entry; directories show "--" for size and have no extract button, while each file row gets a download icon titled "Extract file".
System junk — __MACOSX/ paths and .DS_Store — is filtered out automatically so Finder metadata never clutters the list. Extraction streams just that one file through an object URL using only its final path segment (nested paths are flattened to the filename), and "Close Archive" clears everything so you can drop the next zip. Invalid drops raise "Please drop a valid .zip file." without wiping current state. The dropzone promises: "Your files are processed securely in your browser. Nothing is ever uploaded to a server."
How it works
JSZip.loadAsync(file) parses the archive; zip.forEach walks entries and skips any relativePath starting with __MACOSX/ or containing .DS_Store, plus directories (entry.dir). Uncompressed sizes come from JSZip's internal _data.uncompressedSize via a typed escape hatch, so they can show 0 until that metadata is present. Drag-and-drop validates MIME application/zip or a .zip extension before accepting.
For extraction, entry.file.async("blob") produces a Blob that becomes an object URL attached to a temporary <a download> using only the filename's basename — so saving "docs/readme.md" downloads as readme.md. Success shows a toast; failures raise "Failed to extract file." Bad archive bytes surface as "Failed to parse the ZIP file. Please ensure it is a valid archive." Everything — parse and extract — happens locally in JSZip in the browser.
How to use
- Drag a .zip onto the dashed dropzone (heading "Drop your ZIP archive here") or click "Select ZIP File".
- Wait for "Parsing Archive..." — a success toast reads "Loaded {n} items from {filename}".
- Browse the "Archive Contents" table (headers: Name, Size, Action).
- Notice system junk (__MACOSX/, .DS_Store) is already filtered out of the listing.
- Click the download icon (title "Extract file") on any file row — only that single file downloads.
- Directories show size "--" and have no extract button (skipped via entry.dir).
- Click "Close Archive" to clear entries, then drop another zip to start over.
Tips
- Extraction downloads files individually using only the final path segment — nested folders are flattened to the filename in your Downloads.
- Invalid drops show "Please drop a valid .zip file." without clearing the currently loaded archive, so a mis-drop costs nothing.
- Sizes come from JSZip's internal uncompressedSize and may show 0 until that metadata is available on the entry.
- There is no "extract all" — directories are skipped entirely (entry.dir), so pull files one by one.
ZIP Viewer / Extractor FAQ
Is the archive uploaded?
No — the dropzone subtext says "Your files are processed securely in your browser. Nothing is ever uploaded to a server."
Why don't I see __MACOSX files?
They are filtered during listing: entries matching !relativePath.startsWith("__MACOSX/") && !relativePath.includes(".DS_Store") are dropped.
Can I extract a whole folder?
Not directly — directories are skipped with if (entry.dir) return, so you extract files individually with each row's "Extract file" button.
What error do I get for a bad file?
"Failed to parse the ZIP file. Please ensure it is a valid archive." (and non-zip drops show "Please drop a valid .zip file.").
Credits
- JSZip — ZIP load/extract implemented with JSZip in ZipExtractorPage.tsx