Add compression stats, drag-and-drop, accept filter, BrotliSharpLib, and Zstandard

Swimburger · Swimburger · commit 383fbdb5cc1e · 2026-03-03T14:10:03.000-05:00
Compression stats
  - Models/File.cs: add OriginalSize and OutputSize properties
  - App.razor: capture sizes before/after processing in both Compress and
    Decompress paths; display "X → Y" sizes and a "% smaller/larger" badge
    (compress mode only) after each file finishes

  Drag-and-drop file zone
  - Replace plain &lt;InputFile&gt; with a styled drop zone; InputFile is
    positioned absolutely at full opacity:0 to capture both clicks and
    drops; a _dragCount counter (incremented on dragenter, decremented on
    dragleave) drives the active highlight without flickering on child
    elements

  Accept filter
  - File picker is restricted to the active format's extension in
    decompress mode (e.g. .gz, .br, .zst); no restriction in compress mode

  BrotliSharpLib (fixes WASM crash)
  - System.IO.Compression.BrotliStream requires a native library unavailable
    in WebAssembly; replaced with BrotliSharpLib 0.3.3 (pure managed C#);
    added ToBrotliQuality() to map CompressionLevel to Brotli's 0-11 scale

  Zstandard via ZstdSharp.Port 0.8.7
  - Added ZStd to CompressionFormat enum; hostname detection on "zstd";
    extension .zst; ToZstdLevel() maps CompressionLevel to zstd's 1-19
    scale; ZstdSharp.CompressionStream / DecompressionStream wired into
    the existing helper methods

  Tests (15 passing)
  - Stats assertions added to compress and decompress end-to-end tests
  - zstd added to the format loop; formatDisplayNames map handles the
    "zstd" key vs "Zstandard" display name mismatch
diff --git a/App.razor b/App.razor
@@ -50,16 +50,22 @@
 </div>
 }
 
-<div class="mb-3">
+<div class="drop-zone mb-3 @(_dragCount > 0 ? "drop-zone--active" : "")"
+     @ondragenter="@(() => _dragCount++)"
+     @ondragleave="@(() => _dragCount--)"
+     @ondrop="@(() => _dragCount = 0)"
+     @ondragover:preventDefault>
     @if (compressionMode == CompressionMode.Compress)
     {
-        <label class="form-label">Choose files to compress to @FormatName</label>
+        <p class="mb-1 fw-medium">Choose files to compress to @FormatName</p>
     }
     else
     {
-        <label class="form-label">Choose @FormatName files to decompress</label>
+        <p class="mb-1 fw-medium">Choose @FormatName files to decompress</p>
     }
-    <InputFile OnChange="OnFilesChange" multiple class="form-control" />
+    <p class="text-muted small mb-0">or drag and drop here</p>
+    <InputFile OnChange="OnFilesChange" multiple class="drop-zone-input"
+        accept="@(compressionMode == CompressionMode.Decompress ? Extension : "")" />
 </div>
 
 <div class="mb-3">
@@ -97,32 +103,40 @@
         @if(file.Status == "Finished")
         {
             <span class="text-success">✔ Finished</span>
+            <span class="text-muted ms-2 small">@FormatBytes(file.OriginalSize) → @FormatBytes(file.OutputSize)</span>
+            @if (compressionMode == CompressionMode.Compress)
+            {
+                <span class="@RatioBadgeCss(file.OriginalSize, file.OutputSize) ms-1">@RatioText(file.OriginalSize, file.OutputSize)</span>
+            }
         }
     </li>
 }
 </ul>
 
 @code {
-    private enum CompressionFormat { GZip, Brotli, Deflate, ZLib }
+    private enum CompressionFormat { GZip, Brotli, Deflate, ZLib, ZStd }
 
     private CompressionMode compressionMode = CompressionMode.Compress;
     private CompressionLevel compressionLevel = CompressionLevel.Optimal;
     private List<Models.File> files = new List<Models.File>();
     private bool anyFiles => files.Any();
 
     private CompressionFormat _format = CompressionFormat.GZip;
+    private int _dragCount;
     private string FormatName => _format switch
     {
         CompressionFormat.Brotli  => "brotli",
         CompressionFormat.Deflate => "deflate",
         CompressionFormat.ZLib    => "zlib",
+        CompressionFormat.ZStd    => "zstd",
         _                         => "gzip"
     };
     private string Extension => _format switch
     {
         CompressionFormat.Brotli  => ".br",
         CompressionFormat.Deflate => ".deflate",
         CompressionFormat.ZLib    => ".zlib",
+        CompressionFormat.ZStd    => ".zst",
         _                         => ".gz"
     };
 
@@ -134,26 +148,74 @@
             _ when host.Contains("brotli")  => CompressionFormat.Brotli,
             _ when host.Contains("deflate") => CompressionFormat.Deflate,
             _ when host.Contains("zlib")    => CompressionFormat.ZLib,
+            _ when host.Contains("zstd")    => CompressionFormat.ZStd,
             _                               => CompressionFormat.GZip
         };
     }
 
-    private Stream CreateCompressStream(Stream output, CompressionLevel level) => _format switch
+    private Stream CreateCompressStream(Stream output, CompressionLevel level)
     {
-        CompressionFormat.Brotli  => new BrotliStream(output, level),
-        CompressionFormat.Deflate => new DeflateStream(output, level),
-        CompressionFormat.ZLib    => new ZLibStream(output, level),
-        _                         => new GZipStream(output, level)
+        if (_format == CompressionFormat.Brotli)
+        {
+            var s = new BrotliSharpLib.BrotliStream(output, CompressionMode.Compress);
+            s.SetQuality(ToBrotliQuality(level));
+            return s;
+        }
+        if (_format == CompressionFormat.ZStd)
+            return new ZstdSharp.CompressionStream(output, ToZstdLevel(level));
+        return _format switch
+        {
+            CompressionFormat.Deflate => new DeflateStream(output, level),
+            CompressionFormat.ZLib    => new ZLibStream(output, level),
+            _                         => new GZipStream(output, level)
+        };
+    }
+
+    private static int ToBrotliQuality(CompressionLevel level) => level switch
+    {
+        CompressionLevel.NoCompression => 0,
+        CompressionLevel.Fastest       => 1,
+        CompressionLevel.SmallestSize  => 11,
+        _                              => 6
+    };
+
+    private static int ToZstdLevel(CompressionLevel level) => level switch
+    {
+        CompressionLevel.NoCompression => 1,
+        CompressionLevel.Fastest       => 1,
+        CompressionLevel.SmallestSize  => 19,
+        _                              => 3
     };
 
     private Stream CreateDecompressStream(Stream input) => _format switch
     {
-        CompressionFormat.Brotli  => new BrotliStream(input, CompressionMode.Decompress),
+        CompressionFormat.Brotli  => new BrotliSharpLib.BrotliStream(input, CompressionMode.Decompress),
         CompressionFormat.Deflate => new DeflateStream(input, CompressionMode.Decompress),
         CompressionFormat.ZLib    => new ZLibStream(input, CompressionMode.Decompress),
+        CompressionFormat.ZStd    => new ZstdSharp.DecompressionStream(input),
         _                         => new GZipStream(input, CompressionMode.Decompress)
     };
 
+    private static string FormatBytes(long bytes)
+    {
+        if (bytes < 1024) return $"{bytes} B";
+        if (bytes < 1024 * 1024) return $"{bytes / 1024.0:F1} KB";
+        return $"{bytes / (1024.0 * 1024):F1} MB";
+    }
+
+    private static string RatioText(long original, long output)
+    {
+        if (original == 0) return "";
+        var pct = (1.0 - (double)output / original) * 100;
+        return pct >= 0 ? $"{pct:F0}% smaller" : $"{-pct:F0}% larger";
+    }
+
+    private static string RatioBadgeCss(long original, long output)
+    {
+        var pct = original > 0 ? (1.0 - (double)output / original) * 100 : 0;
+        return pct >= 0 ? "badge bg-success" : "badge bg-warning text-dark";
+    }
+
     private void OnFilesChange(InputFileChangeEventArgs e)
     {
         files.Clear();
@@ -181,13 +243,16 @@
                     var browserFile = file.BrowserFile;
                     var buffer = new byte[browserFile.Size];
                     await browserFile.OpenReadStream(long.MaxValue).ReadAsync(buffer);
+                    file.OriginalSize = buffer.Length;
                     using (var outputStream = new MemoryStream())
                     {
                         using (var compressionStream = CreateCompressStream(outputStream, compressionLevel))
                         {
                             await compressionStream.WriteAsync(buffer, 0, buffer.Length);
                         }
-                        await BlazorDownloadFileService.DownloadFile(file.NewName, outputStream.ToArray(), "application/octet-stream");
+                        var outputBytes = outputStream.ToArray();
+                        file.OutputSize = outputBytes.Length;
+                        await BlazorDownloadFileService.DownloadFile(file.NewName, outputBytes, "application/octet-stream");
                     }
 
                     file.Status = "Finished";
@@ -220,14 +285,17 @@
                     var browserFile = file.BrowserFile;
                     var buffer = new byte[browserFile.Size];
                     await browserFile.OpenReadStream(long.MaxValue).ReadAsync(buffer);
+                    file.OriginalSize = buffer.Length;
                     using (var inputStream = new MemoryStream(buffer))
                     using (var outputStream = new MemoryStream())
                     {
                         using (var compressionStream = CreateDecompressStream(inputStream))
                         {
                             await compressionStream.CopyToAsync(outputStream);
                         }
-                        await BlazorDownloadFileService.DownloadFile(file.NewName, outputStream.ToArray(), "application/octet-stream");
+                        var outputBytes = outputStream.ToArray();
+                        file.OutputSize = outputBytes.Length;
+                        await BlazorDownloadFileService.DownloadFile(file.NewName, outputBytes, "application/octet-stream");
                     }
 
                     file.Status = "Finished";
diff --git a/BlazorDeCompressor.csproj b/BlazorDeCompressor.csproj
@@ -10,8 +10,10 @@
 
   <ItemGroup>
     <PackageReference Include="BlazorDownloadFile" Version="2.4.0.2" />
+    <PackageReference Include="BrotliSharpLib" Version="0.3.3" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="10.0.2" />
     <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="10.0.2" PrivateAssets="all" />
+    <PackageReference Include="ZstdSharp.Port" Version="0.8.7" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/Models/File.cs b/Models/File.cs
@@ -8,5 +8,7 @@ public class File
         public required string OriginalName { get; set; }
         public string? NewName { get; set; }
         public required string Status { get; set; }
+        public long OriginalSize { get; set; }
+        public long OutputSize { get; set; }
     }
 }
diff --git a/e2e/tests/app.spec.js b/e2e/tests/app.spec.js
@@ -51,8 +51,9 @@ test('compress a file end-to-end', async ({ page }) => {
   const download = await downloadPromise;
   expect(download.suggestedFilename()).toBe('test-input.txt.gz');
 
-  // Verify the status shows Finished
   await expect(page.getByText('✔ Finished')).toBeVisible({ timeout: 10000 });
+  await expect(page.locator('.list-group-item .text-muted')).toBeVisible();
+  await expect(page.locator('.list-group-item .badge').filter({ hasText: /smaller|larger/ })).toBeVisible();
 
   fs.unlinkSync(tmpFile);
 });
@@ -76,6 +77,7 @@ test('decompress a file end-to-end', async ({ page }) => {
   expect(download.suggestedFilename()).toBe('test-decompress.txt');
 
   await expect(page.getByText('✔ Finished')).toBeVisible({ timeout: 10000 });
+  await expect(page.locator('.list-group-item .text-muted')).toBeVisible();
 
   fs.unlinkSync(srcFile);
   fs.unlinkSync(gzFile);
@@ -85,7 +87,9 @@ test('decompress a file end-to-end', async ({ page }) => {
 // which reads window.compressionFormat. We spoof it here via addInitScript.
 // Blazor component behaviour (labels, file extension) uses NavigationManager and requires
 // a real hostname match, so those paths are covered by manual / deployment testing.
-for (const format of ['brotli', 'deflate', 'zlib']) {
+const formatDisplayNames = { zstd: 'Zstandard' };
+for (const format of ['brotli', 'deflate', 'zlib', 'zstd']) {
+  const displayName = formatDisplayNames[format] || format;
   test.describe(`${format} mode`, () => {
     test.beforeEach(async ({ page }) => {
       await page.addInitScript((f) => { window.compressionFormat = f; }, format);
@@ -94,12 +98,12 @@ for (const format of ['brotli', 'deflate', 'zlib']) {
     });
 
     test(`page title and heading reflect ${format}`, async ({ page }) => {
-      await expect(page).toHaveTitle(new RegExp(format, 'i'));
-      await expect(page.getByRole('heading', { name: new RegExp(`Online ${format} de/compressor`, 'i') })).toBeVisible();
+      await expect(page).toHaveTitle(new RegExp(displayName, 'i'));
+      await expect(page.getByRole('heading', { name: new RegExp(`Online ${displayName} de/compressor`, 'i') })).toBeVisible();
     });
 
     test(`intro paragraph mentions ${format}`, async ({ page }) => {
-      await expect(page.locator('#intro-paragraph')).toContainText(new RegExp(format, 'i'));
+      await expect(page.locator('#intro-paragraph')).toContainText(new RegExp(displayName, 'i'));
     });
   });
 }
diff --git a/wwwroot/index.html b/wwwroot/index.html
@@ -63,6 +63,30 @@
             top: 0.5rem;
         }
 
+        .drop-zone {
+            position: relative;
+            border: 2px dashed #dee2e6;
+            border-radius: 0.5rem;
+            padding: 1.5rem;
+            text-align: center;
+            cursor: pointer;
+            transition: border-color 0.15s ease, background-color 0.15s ease;
+        }
+
+        .drop-zone--active {
+            border-color: #0d6efd;
+            background-color: rgba(13, 110, 253, 0.05);
+        }
+
+        .drop-zone-input {
+            position: absolute;
+            inset: 0;
+            opacity: 0;
+            cursor: pointer;
+            width: 100%;
+            height: 100%;
+        }
+
 
         @media (min-width: 1200px) {
 
@@ -144,7 +168,7 @@ <h1 class="display-4">Online GZIP de/compressor</h1>
     <script>
     (function () {
       const hostname = window.location.hostname;
-      const formats = ['brotli', 'deflate', 'zlib'];
+      const formats = ['brotli', 'deflate', 'zlib', 'zstd'];
       const detected = formats.find(f => hostname.includes(f)) || 'gzip';
       if (!window.compressionFormat) window.compressionFormat = detected;
       const format = window.compressionFormat;
@@ -169,6 +193,12 @@ <h1 class="display-4">Online GZIP de/compressor</h1>
           desc:    'Use this online ZLib tool to compress and decompress files right in the browser',
           heading: 'Online ZLib de/compressor',
           para:    'This tool can compress and decompress files using the ZLib algorithm. The files are compressed/decompressed right inside of your browser without transmitting the files to a server.'
+        },
+        zstd: {
+          title:   'Zstandard decompress/compress files from your browser',
+          desc:    'Use this online Zstandard tool to compress and decompress files right in the browser',
+          heading: 'Online Zstandard de/compressor',
+          para:    'This tool can compress and decompress files using the Zstandard algorithm. The files are compressed/decompressed right inside of your browser without transmitting the files to a server.'
         }
       };
 

Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,7 @@ public class File`
`8`	`8`	`public required string OriginalName { get; set; }`
`9`	`9`	`public string? NewName { get; set; }`
`10`	`10`	`public required string Status { get; set; }`
	`11`	`+ public long OriginalSize { get; set; }`
	`12`	`+ public long OutputSize { get; set; }`
`11`	`13`	`}`
`12`	`14`	`}`