diff --git a/zip-wheel-explorer.html b/zip-wheel-explorer.html
index 3fccd6b..cf9bd31 100644
--- a/zip-wheel-explorer.html
+++ b/zip-wheel-explorer.html
@@ -87,6 +87,12 @@
.file-item:active {
background: #e8e8e8;
}
+.file-size {
+ color: #999;
+ font-size: 0.75rem;
+ margin-left: 0.5em;
+ white-space: nowrap;
+}
.file-item.selected {
background: #e7f1ff;
border-bottom: none;
@@ -357,8 +363,14 @@
Package File Browser
files.forEach((file, index) => {
const fileEl = document.createElement('div');
fileEl.className = 'file-item';
- fileEl.textContent = file.name;
fileEl.dataset.filename = file.name;
+ const nameSpan = document.createElement('span');
+ nameSpan.textContent = file.name;
+ const sizeSpan = document.createElement('span');
+ sizeSpan.className = 'file-size';
+ sizeSpan.textContent = formatFileSize(file.size);
+ fileEl.appendChild(nameSpan);
+ fileEl.appendChild(sizeSpan);
fileEl.onclick = () => selectFile(file.name, null);
fileListEl.appendChild(fileEl);
});
@@ -377,12 +389,19 @@ Package File Browser
return div.innerHTML;
}
+function formatFileSize(bytes) {
+ if (bytes >= 1048576) return (bytes / 1048576).toFixed(1) + ' MB';
+ if (bytes >= 1024) return (bytes / 1024).toFixed(1) + ' KB';
+ return bytes + ' bytes';
+}
+
async function extractFiles(arrayBuffer, url) {
const files = [];
const zip = await JSZip.loadAsync(arrayBuffer);
for (const [name, file] of Object.entries(zip.files)) {
const content = await file.async('text');
- files.push({ name, content });
+ const rawBytes = await file.async('uint8array');
+ files.push({ name, content, size: rawBytes.byteLength });
}
return files;
}