From 097689c6f50133649fe8880bd5c0f867b926b9c9 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Mon, 21 Sep 2026 12:58:12 +0330
Subject: [PATCH 1/8] improve theme infra of BitFileUpload #13323

---
 .../Inputs/FileUpload/BitFileUpload.razor     |   10 +-
 .../Inputs/FileUpload/BitFileUpload.razor.cs  |  142 ++-
 .../Inputs/FileUpload/BitFileUpload.scss      |  311 +++--
 .../FileUpload/BitFileUploadClassStyles.cs    |   12 +
 .../Inputs/FileUpload/BitFileUploadParams.cs  | 1014 +++++++++++++++++
 .../FileUpload/_BitFileUploadItem.razor       |   29 +-
 .../FileUpload/_BitFileUploadItem.razor.cs    |   86 +-
 .../Inputs/FileUpload/BitFileUploadDemo.razor |  759 ++++++------
 .../FileUpload/BitFileUploadDemo.razor.cs     |  575 ++++++++--
 .../FileUpload/BitFileUploadDemo.razor.scss   |   22 +
 .../Inputs/FileUpload/BitFileUploadTests.cs   |  332 ++++++
 11 files changed, 2685 insertions(+), 607 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor
index cb74776f7f2..5a9c58bf5b6 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor
@@ -13,7 +13,8 @@
     }
     else if (_ShowLabelButton)
     {
-        <button @onclick="Browse"
+        <button @ref="_labelRef"
+                @onclick="Browse"
                 type="button"
                 id="@_buttonId"
                 disabled="@(IsEnabled is false)"
@@ -57,7 +58,12 @@
        away with them rather than staying behind as an empty landmark in the accessibility tree. *@
     @if (HideFileView is false && Files.Any(f => f.Status != BitFileUploadStatus.Removed))
     {
-        <div role="list" style="@Styles?.FileList" class="bit-upl-fl @Classes?.FileList">
+        @* the list is named, so that a screen reader user arriving at it is told what it holds rather than
+           only that it is a list of so many items. *@
+        <div role="list"
+             aria-label="@(FileListAriaLabel.HasValue() ? FileListAriaLabel : null)"
+             style="@Styles?.FileList"
+             class="bit-upl-fl @Classes?.FileList">
             @* a removed file is not part of the list anymore, so it is left out of it here rather than
                leaving an empty listitem behind for a custom template that renders nothing for it. *@
             @foreach (var file in Files.Where(f => f.Status != BitFileUploadStatus.Removed))
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
index bcab21db0a9..04257437750 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
@@ -1,4 +1,5 @@
-using System.Globalization;
+using System.Diagnostics.CodeAnalysis;
+using System.Globalization;
 using System.Text;
 using System.Text.Encodings.Web;
 
@@ -32,6 +33,16 @@ public partial class BitFileUpload : BitComponentBase
     private string _buttonId = default!;
     private string _descriptionId = default!;
     private ElementReference _inputRef;
+    private ElementReference _labelRef;
+    // The button of which file the focus is to be put on after the next render, with the neighbour to fall
+    // back to. An action taken from inside a file item - removing it, starting, pausing or canceling its
+    // upload - takes the very button that was pressed out of the DOM, and without this the focus would go
+    // with it and land back on the document body, dropping a keyboard user at the top of the page.
+    private bool _pendingFocus;
+    private string? _pendingFocusFileId;
+    private string? _pendingFocusFallbackFileId;
+    private BitFileUploadFocusTarget _pendingFocusTarget;
+    private readonly Dictionary<string, _BitFileUploadItem> _itemRefs = [];
     private List<BitFileInfo> _files = [];
     private List<BitFileInfo> _uploadQueue = [];
     private long _internalChunkSize = MIN_CHUNK_SIZE;
@@ -46,6 +57,19 @@ public partial class BitFileUpload : BitComponentBase
 
 
 
+    /// <summary>
+    /// Gets or sets the cascading parameters for the file upload component.
+    /// </summary>
+    /// <remarks>
+    /// This property receives its value from an ancestor component via Blazor's cascading parameter mechanism.
+    /// <br />
+    /// The intended use is to allow shared configuration or settings to be applied to multiple file upload components through the <see cref="BitParams"/> component.
+    /// </remarks>
+    [CascadingParameter(Name = BitFileUploadParams.ParamName)]
+    public BitFileUploadParams? CascadingParameters { get; set; }
+
+
+
     /// <summary>
     /// Accepted file types for the file browser using MIME types or file extensions (e.g., "image/*", ".pdf,.doc").
     /// Applied to the underlying HTML input element's accept attribute.
@@ -249,6 +273,13 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public Func<BitFileInfo, string?>? FileValidator { get; set; }
 
+    /// <summary>
+    /// The accessible name of the file list, so that a screen reader user landing on it is told what the list
+    /// they are in holds instead of only how many items it has. Set it to an empty string to leave the list
+    /// unnamed. The default value is "Selected files".
+    /// </summary>
+    [Parameter] public string FileListAriaLabel { get; set; } = "Selected files";
+
     /// <summary>
     /// Custom Razor template rendering each item of the file list in place of the built-in one, receiving
     /// the file as its context with its name, size, progress, speed and status all available. It is only
@@ -1120,8 +1151,11 @@ protected override Task OnInitializedAsync()
         return base.OnInitializedAsync();
     }
 
+    [DynamicDependency(DynamicallyAccessedMemberTypes.All, typeof(BitFileUploadParams))]
     protected override async Task OnParametersSetAsync()
     {
+        CascadingParameters?.UpdateParameters(this);
+
         await base.OnParametersSetAsync();
 
         if (_dropZoneRef is null) return;
@@ -1131,7 +1165,11 @@ protected override async Task OnParametersSetAsync()
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
-        if (firstRender is false) return;
+        if (firstRender is false)
+        {
+            await RestorePendingFocus();
+            return;
+        }
 
         _dotnetObj = DotNetObjectReference.Create(this);
 
@@ -1154,6 +1192,61 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
 
 
+    // The built-in file items report themselves here so that the focus can be handed to a button of another
+    // item once the button that was pressed is gone. A custom FileViewTemplate registers nothing, which is
+    // exactly right: the focus then falls back to the browse button rather than into markup this component
+    // knows nothing about.
+    internal void RegisterItem(string fileId, _BitFileUploadItem item) => _itemRefs[fileId] = item;
+
+    internal void UnregisterItem(string fileId, _BitFileUploadItem item)
+    {
+        if (_itemRefs.TryGetValue(fileId, out var registered) && ReferenceEquals(registered, item))
+        {
+            _itemRefs.Remove(fileId);
+        }
+    }
+
+    internal async Task HandleItemUpload(BitFileInfo file)
+    {
+        // the upload button is replaced by the pause and cancel pair of a running file.
+        RequestFocus(file, BitFileUploadFocusTarget.Pause);
+
+        await Upload(file);
+    }
+
+    internal async Task HandleItemPause(BitFileInfo file)
+    {
+        // the pause button is replaced by the resume (upload) button of a paused file.
+        RequestFocus(file, BitFileUploadFocusTarget.Upload);
+
+        await PauseUpload(file);
+    }
+
+    internal async Task HandleItemCancel(BitFileInfo file)
+    {
+        // the cancel button is replaced by the retry (upload) button of a canceled file.
+        RequestFocus(file, BitFileUploadFocusTarget.Upload);
+
+        await CancelUpload(file);
+    }
+
+    internal async Task HandleItemRemove(BitFileInfo file)
+    {
+        // the whole item goes away with its remove button, so the focus moves to the item that takes its
+        // place - or to the one before it at the end of the list. A removal that fails leaves the item
+        // where it was, and the focus then stays on the very button that was pressed.
+        var visible = _files.Where(f => f.Status != BitFileUploadStatus.Removed).ToList();
+        var index = visible.IndexOf(file);
+        var neighbor = index < 0 ? null
+                     : index + 1 < visible.Count ? visible[index + 1]
+                     : index > 0 ? visible[index - 1]
+                     : null;
+
+        RequestFocus(file, BitFileUploadFocusTarget.Remove, neighbor);
+
+        await RemoveFile(file);
+    }
+
     internal bool IsFileTypeNotAllowed(BitFileInfo file)
     {
         if (AllowsAllFileTypes(AllowedExtensions)) return false;
@@ -1188,6 +1281,49 @@ private void RequestRender()
         StateHasChanged();
     }
 
+    private void RequestFocus(BitFileInfo file, BitFileUploadFocusTarget target, BitFileInfo? fallback = null)
+    {
+        _pendingFocus = true;
+        _pendingFocusTarget = target;
+        _pendingFocusFileId = file.FileId;
+        _pendingFocusFallbackFileId = fallback?.FileId;
+    }
+
+    private async Task RestorePendingFocus()
+    {
+        if (_pendingFocus is false) return;
+
+        // a removal on its way to the server keeps its item in place, with a spinner where the button that
+        // was pressed used to be, and renders again when it settles. moving the focus on already would take
+        // it away from an item that is still there - and away from the failure message if the removal fails.
+        if (IsRemoving) return;
+
+        _pendingFocus = false;
+
+        var target = _pendingFocusTarget;
+        var fileId = _pendingFocusFileId;
+        var fallbackId = _pendingFocusFallbackFileId;
+
+        _pendingFocusFileId = null;
+        _pendingFocusFallbackFileId = null;
+
+        try
+        {
+            // the item the action was taken on comes first: it is still there whenever the action left it in
+            // place, and the focus then belongs on the button that took over from the one that was pressed.
+            if (fileId is not null && _itemRefs.TryGetValue(fileId, out var item) && await item.TryFocus(target)) return;
+
+            if (fallbackId is not null && _itemRefs.TryGetValue(fallbackId, out var neighbor) && await neighbor.TryFocus(target)) return;
+
+            if (_ShowLabelButton && IsEnabled)
+            {
+                await _labelRef.FocusAsync();
+            }
+        }
+        catch (JSDisconnectedException) { } // we can ignore this exception here
+        catch (JSException) { } // an element taken out of the DOM between the render and this call cannot be focused
+    }
+
     private static bool IsCountedInOverallProgress(BitFileInfo file)
     {
         return file.Status is not BitFileUploadStatus.NotAllowed and not BitFileUploadStatus.Removed;
@@ -2070,7 +2206,7 @@ private static string AddQueryString(string? url, Dictionary<string, string> que
         return sb.ToString();
     }
 
-    private void OnSetChunkSize()
+    internal void OnSetChunkSize()
     {
         _internalChunkSize = ChunkSize.HasValue is false || AutoChunkSize
                                 ? MIN_CHUNK_SIZE
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
index 6e84abbc7a6..0d054690031 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
@@ -1,15 +1,77 @@
 @import "../../../Styles/functions.scss";
 
+// Public CSS variables, read off the root and never declared here, so a value set on :root re-skins every
+// file upload and one set on the Style of an instance re-skins that one alone:
+//   --bit-FileUpload-max-width                  widest the whole control grows                 (default: spacing(43.75))
+//   --bit-FileUpload-gap                        room between the browse button, the
+//                                               description and the file list                 (default: spacing(0.5))
+//
+//   --bit-FileUpload-label-color                browse button text at rest                     (default: per variant, from the Color role)
+//   --bit-FileUpload-label-background           browse button fill at rest                     (default: per variant, from the Color role)
+//   --bit-FileUpload-label-border-color         browse button rule at rest                     (default: per variant, from the Color role)
+//   --bit-FileUpload-label-hover-color          browse button text on hover                    (default: per variant)
+//   --bit-FileUpload-label-hover-background     browse button fill on hover, and its rule
+//                                               in the Fill variant                            (default: the role's hover color)
+//   --bit-FileUpload-label-active-background    browse button fill while pressed, and its
+//                                               rule in the Fill variant                       (default: the role's active color)
+//   --bit-FileUpload-label-radius               browse button corner radius                    (default: $shp-radius-button)
+//   --bit-FileUpload-label-min-height           browse button height floor                     (default: per size, $siz-ctrl-*)
+//   --bit-FileUpload-label-padding              browse button padding                          (default: per size, $siz-ctrl-pad-*)
+//   --bit-FileUpload-label-font-size            browse button text size                        (default: per size, from the type ramp)
+//   --bit-FileUpload-label-font-weight          browse button text weight                      (default: $tg-fw-light)
+//   --bit-FileUpload-focus-color                keyboard focus ring color                      (default: the role's focus color)
+//
+//   --bit-FileUpload-description-color          hint text under the browse button              (default: $clr-fg-sec)
+//   --bit-FileUpload-description-font-size      hint text size                                 (default: per size)
+//
+//   --bit-FileUpload-item-color                 file item text                                 (default: $clr-fg-pri)
+//   --bit-FileUpload-item-background            file item surface                              (default: transparent)
+//   --bit-FileUpload-item-border-color          file item rule                                 (default: $clr-brd-pri)
+//   --bit-FileUpload-item-hover-border-color    file item rule on hover                        (default: $clr-brd-pri-hover)
+//   --bit-FileUpload-item-radius                file item corner radius                        (default: $shp-radius-surface)
+//   --bit-FileUpload-item-padding               padding around the name, size and progress     (default: spacing(1) spacing(2))
+//   --bit-FileUpload-item-font-size             file name size                                 (default: per size)
+//
+//   --bit-FileUpload-success-color              status line of a completed file                (default: $clr-suc)
+//   --bit-FileUpload-error-color                status line of a failed or rejected file       (default: $clr-err)
+//   --bit-FileUpload-paused-color               status line of a paused or canceled file       (default: the Color role's main color)
+//
+//   --bit-FileUpload-preview-size               image thumbnail side                           (default: per size)
+//   --bit-FileUpload-preview-radius             image thumbnail corner radius                  (default: $shp-radius-control)
+//
+//   --bit-FileUpload-progress-color             filled part of the progress bar                (default: the Color role's main color)
+//   --bit-FileUpload-progress-track-color       unfilled part of the progress bar              (default: $clr-bg-sec)
+//   --bit-FileUpload-progress-height            progress bar thickness                         (default: $siz-track-sm)
+//   --bit-FileUpload-progress-radius            progress bar corner radius                     (default: $shp-radius-full)
+//
+//   --bit-FileUpload-action-color               upload/pause/cancel/remove glyph at rest       (default: $clr-fg-pri)
+//   --bit-FileUpload-action-hover-color         the same glyph on hover                        (default: the Color role's main color)
+//   --bit-FileUpload-action-hover-background    tint behind the hovered action button          (default: the role's main color at 10%)
+//   --bit-FileUpload-action-size                action button width                            (default: per size, $siz-ctrl-*)
+//   --bit-FileUpload-action-icon-size           action button glyph size                       (default: per size, $siz-icon-*)
+//   --bit-FileUpload-spinner-color              arc of the removal spinner                     (default: the Color role's main color)
+//
+//   --bit-FileUpload-drop-color                 browse button text while a file is dragged
+//                                               over the component                             (default: the role's on-color)
+//   --bit-FileUpload-drop-background            its fill in the same state                     (default: the role's hover color)
+//   --bit-FileUpload-drop-border-color          its rule in the same state                     (default: the role's on-color)
+//   --bit-FileUpload-drop-border-style          its rule style in the same state               (default: dashed)
+//
+//   --bit-FileUpload-disabled-color             text of a disabled component                   (default: $clr-fg-dis)
+//   --bit-FileUpload-disabled-background        fill of a disabled browse button                (default: $clr-bg-dis)
+//   --bit-FileUpload-disabled-border-color      rule of a disabled browse button                (default: $clr-brd-dis)
+
 .bit-upl {
     display: flex;
     flex-flow: column nowrap;
-    max-width: spacing(43.75);
     font-family: $tg-font-family;
+    gap: var(--bit-FileUpload-gap, #{spacing(0.5)});
+    max-width: var(--bit-FileUpload-max-width, #{spacing(43.75)});
 
     &.bit-dis {
-        color: $clr-fg-dis;
-        border-color: $clr-brd-dis;
-        background-color: $clr-bg-dis;
+        color: var(--bit-FileUpload-disabled-color, #{$clr-fg-dis});
+        border-color: var(--bit-FileUpload-disabled-border-color, #{$clr-brd-dis});
+        background-color: var(--bit-FileUpload-disabled-background, #{$clr-bg-dis});
 
         //the browse button carries the role color while enabled, but a disabled file upload reads as a
         //neutral form field whatever its role and variant (see the disabled conventions in
@@ -18,7 +80,7 @@
         //since which of the two is painted at all is exactly what the variants disagree on.
         .bit-upl-lbl {
             cursor: default;
-            color: $clr-fg-dis;
+            color: var(--bit-FileUpload-disabled-color, #{$clr-fg-dis});
             pointer-events: none;
         }
     }
@@ -44,16 +106,32 @@
     outline: 0;
     display: flex;
     cursor: pointer;
-    font-weight: $tg-fw-light;
     user-select: none;
     align-items: center;
+    box-sizing: border-box;
     justify-content: center;
-    border-radius: $shp-radius-control;
+    font-family: $tg-font-family;
     border-width: $shp-border-width;
     border-style: $shp-border-style;
-    min-height: var(--bit-upl-lbl-height);
-    font-size: var(--bit-upl-lbl-fontsize);
-    padding: var(--bit-upl-lbl-padding);
+    letter-spacing: $tg-ctrl-letter-spacing;
+    text-transform: $tg-ctrl-text-transform;
+    -webkit-tap-highlight-color: transparent;
+    border-radius: var(--bit-FileUpload-label-radius, #{$shp-radius-button});
+    font-weight: var(--bit-FileUpload-label-font-weight, #{$tg-fw-light});
+    // The control height of the size class, as a floor rather than a height, so the button still lines up
+    // with the other controls of its size and stays above the 24px minimum pointer target of WCAG 2.2 (SC 2.5.8).
+    min-height: var(--bit-FileUpload-label-min-height, var(--bit-upl-lbl-height));
+    font-size: var(--bit-FileUpload-label-font-size, var(--bit-upl-lbl-fontsize));
+    padding: var(--bit-FileUpload-label-padding, var(--bit-upl-lbl-padding));
+    transition: color $mot-duration-short $mot-easing,
+                border-color $mot-duration-short $mot-easing,
+                background-color $mot-duration-short $mot-easing;
+
+    // The browse button is the only thing in the component that opens the file dialog, so a keyboard user
+    // who cannot see where the focus is cannot upload anything at all (WCAG 2.4.7 / 2.4.11).
+    &:focus-visible {
+        @include focus-ring(var(--bit-FileUpload-focus-color, var(--bit-upl-clr-focus)));
+    }
 
     i {
         margin-inline-end: spacing(0.625);
@@ -63,26 +141,27 @@
 //Fill - the default: a solid block of the role color labelled in the role's on-color.
 .bit-upl-fil {
     .bit-upl-lbl {
-        color: var(--bit-upl-clr-txt);
-        border-color: var(--bit-upl-clr);
-        background-color: var(--bit-upl-clr);
+        color: var(--bit-FileUpload-label-color, var(--bit-upl-clr-txt));
+        border-color: var(--bit-FileUpload-label-border-color, var(--bit-FileUpload-label-background, var(--bit-upl-clr)));
+        background-color: var(--bit-FileUpload-label-background, var(--bit-upl-clr));
 
         @media (hover: hover) {
             &:hover {
-                border-color: var(--bit-upl-clr-hover);
-                background-color: var(--bit-upl-clr-hover);
+                color: var(--bit-FileUpload-label-hover-color, var(--bit-FileUpload-label-color, var(--bit-upl-clr-txt)));
+                border-color: var(--bit-FileUpload-label-hover-background, var(--bit-upl-clr-hover));
+                background-color: var(--bit-FileUpload-label-hover-background, var(--bit-upl-clr-hover));
             }
         }
 
         &:active {
-            border-color: var(--bit-upl-clr-active);
-            background-color: var(--bit-upl-clr-active);
+            border-color: var(--bit-FileUpload-label-active-background, var(--bit-upl-clr-active));
+            background-color: var(--bit-FileUpload-label-active-background, var(--bit-upl-clr-active));
         }
     }
 
     &.bit-dis .bit-upl-lbl {
-        border-color: $clr-brd-dis;
-        background-color: $clr-bg-dis;
+        border-color: var(--bit-FileUpload-disabled-border-color, #{$clr-brd-dis});
+        background-color: var(--bit-FileUpload-disabled-background, #{$clr-bg-dis});
     }
 }
 
@@ -90,52 +169,52 @@
 //variant once a pointer lands on it.
 .bit-upl-otl {
     .bit-upl-lbl {
-        color: var(--bit-upl-clr);
-        border-color: var(--bit-upl-clr);
-        background-color: transparent;
+        color: var(--bit-FileUpload-label-color, var(--bit-upl-clr));
+        border-color: var(--bit-FileUpload-label-border-color, var(--bit-upl-clr));
+        background-color: var(--bit-FileUpload-label-background, transparent);
 
         @media (hover: hover) {
             &:hover {
-                color: var(--bit-upl-clr-txt);
-                background-color: var(--bit-upl-clr-hover);
+                color: var(--bit-FileUpload-label-hover-color, var(--bit-upl-clr-txt));
+                background-color: var(--bit-FileUpload-label-hover-background, var(--bit-upl-clr-hover));
             }
         }
 
         &:active {
-            color: var(--bit-upl-clr-txt);
-            background-color: var(--bit-upl-clr-active);
+            color: var(--bit-FileUpload-label-hover-color, var(--bit-upl-clr-txt));
+            background-color: var(--bit-FileUpload-label-active-background, var(--bit-upl-clr-active));
         }
     }
 
     &.bit-dis .bit-upl-lbl {
-        border-color: $clr-brd-dis;
-        background-color: transparent;
+        border-color: var(--bit-FileUpload-disabled-border-color, #{$clr-brd-dis});
+        background-color: var(--bit-FileUpload-label-background, transparent);
     }
 }
 
 //Text: neither rule nor fill at rest, for an uploader that should not outweigh the fields around it.
 .bit-upl-txt {
     .bit-upl-lbl {
-        color: var(--bit-upl-clr);
-        border-color: transparent;
-        background-color: transparent;
+        color: var(--bit-FileUpload-label-color, var(--bit-upl-clr));
+        border-color: var(--bit-FileUpload-label-border-color, transparent);
+        background-color: var(--bit-FileUpload-label-background, transparent);
 
         @media (hover: hover) {
             &:hover {
-                color: var(--bit-upl-clr-txt);
-                background-color: var(--bit-upl-clr-hover);
+                color: var(--bit-FileUpload-label-hover-color, var(--bit-upl-clr-txt));
+                background-color: var(--bit-FileUpload-label-hover-background, var(--bit-upl-clr-hover));
             }
         }
 
         &:active {
-            color: var(--bit-upl-clr-txt);
-            background-color: var(--bit-upl-clr-active);
+            color: var(--bit-FileUpload-label-hover-color, var(--bit-upl-clr-txt));
+            background-color: var(--bit-FileUpload-label-active-background, var(--bit-upl-clr-active));
         }
     }
 
     &.bit-dis .bit-upl-lbl {
-        border-color: transparent;
-        background-color: transparent;
+        border-color: var(--bit-FileUpload-label-border-color, transparent);
+        background-color: var(--bit-FileUpload-label-background, transparent);
     }
 }
 
@@ -145,22 +224,24 @@
 //that the drop state outranks the per-variant :hover rules above, which are otherwise as specific.
 .bit-upl.bit-upl-drg {
     .bit-upl-lbl {
-        border-style: dashed;
-        color: var(--bit-upl-clr-txt);
-        border-color: var(--bit-upl-clr-txt);
-        background-color: var(--bit-upl-clr-hover);
+        border-style: var(--bit-FileUpload-drop-border-style, dashed);
+        color: var(--bit-FileUpload-drop-color, var(--bit-upl-clr-txt));
+        border-color: var(--bit-FileUpload-drop-border-color, var(--bit-upl-clr-txt));
+        background-color: var(--bit-FileUpload-drop-background, var(--bit-upl-clr-hover));
     }
 }
 
 .bit-upl-dsc {
-    color: $clr-fg-sec;
-    margin-top: spacing(0.5);
-    font-size: var(--bit-upl-fs-fontsize);
+    color: var(--bit-FileUpload-description-color, #{$clr-fg-sec});
+    font-size: var(--bit-FileUpload-description-font-size, var(--bit-upl-fs-fontsize));
 }
 
 .bit-upl-fl {
     padding: 0;
     margin: 0;
+    display: flex;
+    flex-flow: column nowrap;
+    gap: var(--bit-FileUpload-gap, #{spacing(0.5)});
 }
 
 .bit-upl-itm {
@@ -169,16 +250,17 @@
     font-weight: $tg-fw-light;
     align-items: center;
     flex-flow: row nowrap;
-    margin-top: spacing(0.375);
-    border-radius: $shp-radius-surface;
     justify-content: space-between;
-    color: $clr-fg-pri;
-    font-size: var(--bit-upl-itm-fontsize);
-    border: $shp-border-width $shp-border-style $clr-brd-pri;
+    color: var(--bit-FileUpload-item-color, #{$clr-fg-pri});
+    font-size: var(--bit-FileUpload-item-font-size, var(--bit-upl-itm-fontsize));
+    border-radius: var(--bit-FileUpload-item-radius, #{$shp-radius-surface});
+    background-color: var(--bit-FileUpload-item-background, transparent);
+    border: $shp-border-width $shp-border-style var(--bit-FileUpload-item-border-color, #{$clr-brd-pri});
+    transition: border-color $mot-duration-short $mot-easing;
 
     @media (hover: hover) {
         &:hover {
-            border-color: $clr-brd-pri-hover;
+            border-color: var(--bit-FileUpload-item-hover-border-color, #{$clr-brd-pri-hover});
         }
     }
 
@@ -192,33 +274,34 @@
 
 .bit-upl-uld {
     .bit-upl-us {
-        color: $clr-suc;
+        color: var(--bit-FileUpload-success-color, #{$clr-suc});
     }
 }
 
 .bit-upl-fld {
     .bit-upl-us {
-        color: $clr-err;
+        color: var(--bit-FileUpload-error-color, #{$clr-err});
     }
 }
 
 .bit-upl-psd {
     .bit-upl-us {
-        color: var(--bit-upl-clr);
+        color: var(--bit-FileUpload-paused-color, var(--bit-upl-clr));
     }
 }
 
 .bit-upl-prv {
     flex-shrink: 0;
     object-fit: cover;
-    border-radius: $shp-radius-control;
-    width: var(--bit-upl-prv-size);
-    height: var(--bit-upl-prv-size);
     margin-inline-start: spacing(0.5);
+    border-radius: var(--bit-FileUpload-preview-radius, #{$shp-radius-control});
+    width: var(--bit-FileUpload-preview-size, var(--bit-upl-prv-size));
+    height: var(--bit-FileUpload-preview-size, var(--bit-upl-prv-size));
 }
 
 .bit-upl-fic {
     flex-grow: 1;
+    min-width: 0;
     height: 100%;
     display: flex;
     overflow: hidden;
@@ -227,7 +310,7 @@
     align-items: flex-start;
     justify-content: center;
     flex-flow: column nowrap;
-    padding: spacing(1) spacing(2);
+    padding: var(--bit-FileUpload-item-padding, #{spacing(1)} #{spacing(2)});
 }
 
 .bit-upl-fnc {
@@ -252,7 +335,7 @@
     align-items: center;
     flex-flow: row nowrap;
     margin-top: spacing(0.25);
-    font-size: var(--bit-upl-fs-fontsize);
+    font-size: var(--bit-FileUpload-description-font-size, var(--bit-upl-fs-fontsize));
 }
 
 .bit-upl-fs {
@@ -269,17 +352,19 @@
 .bit-upl-pbc {
     width: 100%;
     overflow: hidden;
-    height: spacing(0.25);
     margin-top: spacing(1);
     margin-bottom: spacing(0.5);
-    background-color: $clr-bg-sec;
+    height: var(--bit-FileUpload-progress-height, #{$siz-track-sm});
+    border-radius: var(--bit-FileUpload-progress-radius, #{$shp-radius-full});
+    background-color: var(--bit-FileUpload-progress-track-color, #{$clr-bg-sec});
 }
 
 // named -pgb rather than -pbr so that it cannot collide with the generated PrimaryBorder role class.
 .bit-upl-pgb {
-    height: spacing(0.25);
+    height: 100%;
     transition: width $mot-duration $mot-easing 0s;
-    background-color: var(--bit-upl-clr);
+    border-radius: var(--bit-FileUpload-progress-radius, #{$shp-radius-full});
+    background-color: var(--bit-FileUpload-progress-color, var(--bit-upl-clr));
 }
 
 .bit-upl-usi {
@@ -290,27 +375,47 @@
     cursor: pointer;
     align-self: stretch;
     align-items: center;
-    color: $clr-fg-pri;
     justify-content: center;
     background-color: transparent;
     font-family: $tg-font-family;
-    width: var(--bit-upl-btn-size);
+    color: var(--bit-FileUpload-action-color, #{$clr-fg-pri});
+    width: var(--bit-FileUpload-action-size, var(--bit-upl-btn-size));
+    -webkit-tap-highlight-color: transparent;
+    transition: background-color $mot-duration-short $mot-easing;
 
+    // a disabled button is excluded rather than overridden afterwards, since the hover rule reaches the
+    // glyph directly and would otherwise outrank the disabled color the glyph inherits from the button.
     @media (hover: hover) {
-        &:hover {
+        &:hover:not(:disabled) {
+            background-color: var(--bit-FileUpload-action-hover-background, #{translucent(var(--bit-upl-clr), 10%)});
+
             i {
-                color: var(--bit-upl-clr);
+                color: var(--bit-FileUpload-action-hover-color, var(--bit-upl-clr));
             }
         }
     }
 
+    // The action buttons are the whole keyboard operation of a file item - starting, pausing, canceling and
+    // removing a file - so each of them has to say when it holds the focus. The shared focus-ring mixin
+    // draws its indicator as a box-shadow outside the element, which the file item clips away with its own
+    // overflow:hidden, so the indicator is drawn as an outline inset into the button instead - which is also
+    // what survives a forced-colors palette without a media query of its own.
+    &:focus-visible {
+        outline: $shp-focus-ring-width solid var(--bit-FileUpload-focus-color, var(--bit-upl-clr-focus));
+        outline-offset: calc(-1 * #{$shp-focus-ring-width});
+    }
+
     &:disabled {
         cursor: default;
         color: $clr-fg-dis;
+        background-color: transparent;
     }
 
     i {
-        font-size: var(--bit-upl-ico-fontsize);
+        line-height: 1;
+        color: inherit;
+        transition: color $mot-duration-short $mot-easing;
+        font-size: var(--bit-FileUpload-action-icon-size, var(--bit-upl-ico-fontsize));
     }
 }
 
@@ -330,17 +435,17 @@
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    width: var(--bit-upl-btn-size);
+    width: var(--bit-FileUpload-action-size, var(--bit-upl-btn-size));
 }
 
 .bit-upl-spn {
     border-radius: 50%;
-    width: spacing(2);
-    height: spacing(2);
     border-width: $siz-spinner-stroke;
     border-style: $shp-border-style;
     border-color: $clr-brd-sec;
-    border-top-color: var(--bit-upl-clr);
+    width: var(--bit-FileUpload-action-icon-size, var(--bit-upl-ico-fontsize));
+    height: var(--bit-FileUpload-action-icon-size, var(--bit-upl-ico-fontsize));
+    border-top-color: var(--bit-FileUpload-spinner-color, var(--bit-upl-clr));
     animation: bit-upl-spinner-animation $mot-duration-spinner $mot-easing-spinner infinite;
 }
 
@@ -351,38 +456,84 @@
         --bit-upl-clr-txt: #{role($tokens, on)};
         --bit-upl-clr-hover: #{role($tokens, hover)};
         --bit-upl-clr-active: #{role($tokens, active)};
+        --bit-upl-clr-focus: #{role($tokens, focus)};
     }
 }
 
+// The browse button takes the control height and padding of its size class, the action buttons the same
+// height as a square, and the glyphs the icon step of that class - which is what lines a file upload up
+// with every other control of its size instead of only with itself.
 .bit-upl-sm {
-    --bit-upl-lbl-height: #{spacing(3.5)};
+    --bit-upl-lbl-height: #{$siz-ctrl-sm};
     --bit-upl-lbl-fontsize: #{$tg-fs-xs};
-    --bit-upl-lbl-padding: #{spacing(0.25)} #{spacing(1.5)};
+    --bit-upl-lbl-padding: #{$siz-ctrl-pad-y-sm} #{$siz-ctrl-pad-x-sm};
     --bit-upl-itm-fontsize: #{$tg-fs-xs};
     --bit-upl-fs-fontsize: #{$tg-fs-xs};
     --bit-upl-prv-size: #{spacing(4)};
-    --bit-upl-btn-size: #{spacing(3.5)};
+    --bit-upl-btn-size: #{$siz-ctrl-sm};
     --bit-upl-ico-fontsize: #{$siz-icon-sm};
 }
 
 .bit-upl-md {
-    --bit-upl-lbl-height: #{spacing(4.5)};
+    --bit-upl-lbl-height: #{$siz-ctrl-md};
     --bit-upl-lbl-fontsize: #{$tg-fs-sm};
-    --bit-upl-lbl-padding: #{spacing(0.5)} #{spacing(2)};
+    --bit-upl-lbl-padding: #{$siz-ctrl-pad-y-md} #{$siz-ctrl-pad-x-md};
     --bit-upl-itm-fontsize: #{$tg-fs-sm};
     --bit-upl-fs-fontsize: #{$tg-fs-xs};
     --bit-upl-prv-size: #{spacing(5)};
-    --bit-upl-btn-size: #{spacing(4)};
+    --bit-upl-btn-size: #{$siz-ctrl-md};
     --bit-upl-ico-fontsize: #{$siz-icon-md};
 }
 
 .bit-upl-lg {
-    --bit-upl-lbl-height: #{spacing(5.5)};
+    --bit-upl-lbl-height: #{$siz-ctrl-lg};
     --bit-upl-lbl-fontsize: #{$tg-fs-md};
-    --bit-upl-lbl-padding: #{spacing(0.75)} #{spacing(2.5)};
+    --bit-upl-lbl-padding: #{$siz-ctrl-pad-y-lg} #{$siz-ctrl-pad-x-lg};
     --bit-upl-itm-fontsize: #{$tg-fs-md};
     --bit-upl-fs-fontsize: #{$tg-fs-sm};
     --bit-upl-prv-size: #{spacing(6.5)};
-    --bit-upl-btn-size: #{spacing(5)};
+    --bit-upl-btn-size: #{$siz-ctrl-lg};
     --bit-upl-ico-fontsize: #{$siz-icon-lg};
 }
+
+// Windows High Contrast / forced-colors: the palette collapses to the system pair, so every color the
+// component paints is dropped. What has to be re-established is what the color alone was saying: the drop
+// state, the disabled state, the progress bar against its track, and the spinner's arc against its ring.
+@media (forced-colors: active) {
+    .bit-upl.bit-dis,
+    .bit-upl.bit-dis .bit-upl-lbl {
+        color: GrayText;
+        border-color: GrayText;
+    }
+
+    .bit-upl-usi:disabled {
+        color: GrayText;
+    }
+
+    .bit-upl-usi:focus-visible {
+        outline-color: Highlight;
+    }
+
+    // The fill of the drop state is stripped, so the dashed rule is the only thing left to say a file is
+    // being dragged over the component - it is given the system highlight to stand out from the rest state.
+    .bit-upl.bit-upl-drg .bit-upl-lbl {
+        border-color: Highlight;
+    }
+
+    // The track and the bar are both painted with system colors rather than outlined, since a rule around
+    // a track two pixels high would leave the bar inside it no room at all to be seen.
+    .bit-upl-pbc {
+        background-color: GrayText;
+        forced-color-adjust: none;
+    }
+
+    .bit-upl-pgb {
+        background-color: Highlight;
+        forced-color-adjust: none;
+    }
+
+    .bit-upl-spn {
+        border-color: GrayText;
+        border-top-color: CanvasText;
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
index 75ea345941c..70b7eabc6ab 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
@@ -106,4 +106,16 @@ public class BitFileUploadClassStyles
     /// Custom CSS classes/styles for the remove button icon of each file item of the BitFileUpload.
     /// </summary>
     public string? RemoveIcon { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the container of the spinner that takes the place of the remove button
+    /// of a file item while that file is being removed from the server.
+    /// </summary>
+    public string? RemoveSpinnerContainer { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the spinner that takes the place of the remove button of a file item
+    /// while that file is being removed from the server.
+    /// </summary>
+    public string? RemoveSpinner { get; set; }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
new file mode 100644
index 00000000000..c038291c54f
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
@@ -0,0 +1,1014 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// The parameters for <see cref="BitFileUpload"/> component.
+/// </summary>
+public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
+{
+    /// <summary>
+    /// Represents the parameter name used to identify the <see cref="BitFileUpload"/> cascading parameters within <see cref="BitParams"/>.
+    /// </summary>
+    /// <remarks>
+    /// This constant is typically used when referencing or accessing the BitFileUpload value in
+    /// parameterized APIs or configuration settings. Using this constant helps ensure consistency and reduces the risk
+    /// of typographical errors.
+    /// </remarks>
+    public const string ParamName = $"{nameof(BitParams)}.{nameof(BitFileUpload)}";
+
+
+
+    public string Name => ParamName;
+
+
+
+    /// <summary>
+    /// Accepted file types for the file browser using MIME types or file extensions (e.g., "image/*", ".pdf,.doc").
+    /// Applied to the underlying HTML input element's accept attribute.
+    /// When not set, the accept attribute is generated from <see cref="AllowedExtensions"/>.
+    /// </summary>
+    public string? Accept { get; set; }
+
+    /// <summary>
+    /// Whether files can be selected by dragging them from the operating system and dropping them on the component.
+    /// The default value is true.
+    /// </summary>
+    public bool? AllowDrop { get; set; }
+
+    /// <summary>
+    /// Whether a file that is already in the file list can be selected again.
+    /// When disabled, a newly selected file matching an existing one by name, size and last modified time
+    /// is rejected with the <see cref="DuplicateErrorMessage"/> instead of being uploaded a second time,
+    /// becoming eligible again once the file it duplicates is removed.
+    /// The default value is true.
+    /// </summary>
+    public bool? AllowDuplicates { get; set; }
+
+    /// <summary>
+    /// Whether files can be selected by pasting them from the clipboard onto the component.
+    /// The paste is only captured while the focus is inside the component, so the browse button must be focused first.
+    /// The default value is true.
+    /// </summary>
+    public bool? AllowPaste { get; set; }
+
+    /// <summary>
+    /// Allowed file types for validation purposes, accepting both file extensions (e.g., [".jpg", ".png", ".pdf"])
+    /// and MIME types with an optional wildcard (e.g., ["image/*", "application/pdf"]).
+    /// The leading dot of an extension is optional and the matching is case-insensitive.
+    /// Use ["*"] to allow all file types. Files not matching any of these entries will not be uploaded.
+    /// </summary>
+    public IReadOnlyCollection<string>? AllowedExtensions { get; set; }
+
+    /// <summary>
+    /// Custom provider of the text announced by the screen reader through the live region of the component
+    /// whenever the file list or an upload outcome changes. Receives the current file list and returns the text
+    /// to announce, or null to announce nothing. When not set, a built-in English announcement is used.
+    /// </summary>
+    public Func<IReadOnlyList<BitFileInfo>, string?>? AnnouncementProvider { get; set; }
+
+    /// <summary>
+    /// Whether a new selection is added to the end of the current file list instead of replacing it,
+    /// which is what lets the user build a batch up over several rounds of browsing, dropping or pasting.
+    /// The files already in the list keep their upload state.
+    /// </summary>
+    public bool? Append { get; set; }
+
+    /// <summary>
+    /// Calculate the chunk size dynamically based on the user's Internet speed between 512 KB and 10 MB.
+    /// </summary>
+    public bool? AutoChunkSize { get; set; }
+
+    /// <summary>
+    /// Whether the file list and the upload state are cleared right before the file dialog opens, so that
+    /// every browse starts from a clean slate - the list empties even if the dialog is then cancelled.
+    /// </summary>
+    public bool? AutoReset { get; set; }
+
+    /// <summary>
+    /// The number of times a failed upload of a file gets retried automatically before it is reported as failed.
+    /// In the chunked mode each retry resumes from the last successfully uploaded chunk.
+    /// Set to 0 (the default) to disable the automatic retries.
+    /// </summary>
+    public int? AutoRetries { get; set; }
+
+    /// <summary>
+    /// The delay before each automatic retry of a failed upload.
+    /// Set to null (the default) to retry immediately.
+    /// </summary>
+    public TimeSpan? AutoRetryDelay { get; set; }
+
+    /// <summary>
+    /// Whether the selected files start uploading the moment they are selected, skipping the per-file
+    /// upload button entirely, for the cases where the selection itself expresses the intent to upload.
+    /// </summary>
+    public bool? AutoUpload { get; set; }
+
+    /// <summary>
+    /// The tooltip of the cancel upload button, which is also used as the prefix of its accessible label
+    /// (e.g., "Cancel report.pdf"). Defaults to "Cancel".
+    /// </summary>
+    public string? CancelButtonTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to use for the cancel upload button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="CancelIconName"/> when both are set.
+    /// Defaults to the built-in Cancel icon when neither is set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render a custom cancel icon from external libraries like FontAwesome or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="CancelIconName"/> instead.
+    /// </remarks>
+    public BitIconInfo? CancelIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to use for the cancel upload button from the built-in Fluent UI icons.
+    /// Defaults to <c>Cancel</c> when not set.
+    /// </summary>
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Cancel</c>).
+    /// <br />
+    /// For external icon libraries, use <see cref="CancelIcon"/> instead.
+    /// </remarks>
+    public string? CancelIconName { get; set; }
+
+    /// <summary>
+    /// The message shown for canceled file uploads.
+    /// </summary>
+    public string? CanceledUploadMessage { get; set; }
+
+    /// <summary>
+    /// The capture behavior of the file input on devices with a camera or microphone,
+    /// rendered as the capture attribute of the input element (e.g., "user" for the front camera,
+    /// "environment" for the rear camera).
+    /// </summary>
+    public string? Capture { get; set; }
+
+    /// <summary>
+    /// The size in bytes of each chunk of a chunked upload. When not set - and whenever
+    /// <see cref="AutoChunkSize"/> is enabled, which takes the decision over - it starts at 512 KB.
+    /// </summary>
+    public long? ChunkSize { get; set; }
+
+    /// <summary>
+    /// Whether each file is sliced and sent as a series of sequential requests instead of one monolithic
+    /// one, which is what makes a paused or failed file resume from the last chunk that made it through
+    /// rather than starting over, so a dropped connection costs one chunk instead of the whole transfer.
+    /// </summary>
+    public bool? ChunkedUpload { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes for different parts of the BitFileUpload.
+    /// </summary>
+    public BitFileUploadClassStyles? Classes { get; set; }
+
+    /// <summary>
+    /// The general color of the file upload, applied to the browse button, the drag-and-drop indicator,
+    /// the progress bars and the hovered action buttons.
+    /// </summary>
+    public BitColor? Color { get; set; }
+
+    /// <summary>
+    /// The maximum number of files uploading at the same time, the remaining ones waiting in a queue
+    /// and starting as soon as a slot frees up. Set to 0 (the default) to start every file at once.
+    /// </summary>
+    public int? ConcurrentUploads { get; set; }
+
+    /// <summary>
+    /// A short hint rendered under the browse button and wired to it through aria-describedby,
+    /// which is the place to spell out the accepted file types and the size limits so that both sighted
+    /// and screen reader users learn the constraints before hitting them.
+    /// </summary>
+    public string? Description { get; set; }
+
+    /// <summary>
+    /// Whether to select folders (directories) instead of files, rendered as the webkitdirectory attribute.
+    /// All files inside the selected folder and its subfolders will be added to the file list.
+    /// It also makes a dropped folder expand into its contents instead of being ignored.
+    /// </summary>
+    public bool? Directory { get; set; }
+
+    /// <summary>
+    /// The message shown for the files rejected for being already in the file list
+    /// while <see cref="AllowDuplicates"/> is disabled.
+    /// </summary>
+    public string? DuplicateErrorMessage { get; set; }
+
+    /// <summary>
+    /// The message shown for failed file removes.
+    /// </summary>
+    public string? FailedRemoveMessage { get; set; }
+
+    /// <summary>
+    /// The message shown for failed file uploads.
+    /// </summary>
+    public string? FailedUploadMessage { get; set; }
+
+    /// <summary>
+    /// The accessible name of the file list, so that a screen reader user landing on it is told what the list
+    /// they are in holds instead of only how many items it has. Set it to an empty string to leave the list
+    /// unnamed. The default value is "Selected files".
+    /// </summary>
+    public string? FileListAriaLabel { get; set; }
+
+    /// <summary>
+    /// Custom formatter of the file size shown under the name of each file item.
+    /// Receives the size of the file in bytes and returns the text to display,
+    /// which is the place to localize the units or to switch between the binary and the decimal bases.
+    /// When not set, a built-in humanizer is used.
+    /// </summary>
+    public Func<long, string>? FileSizeFormatter { get; set; }
+
+    /// <summary>
+    /// Custom validation function called for each newly selected file after the built-in validations pass.
+    /// Return an error message to reject the file so it will not be uploaded, or null to accept it.
+    /// </summary>
+    public Func<BitFileInfo, string?>? FileValidator { get; set; }
+
+    /// <summary>
+    /// Whether the built-in file list is left unrendered. The files are still selected, validated,
+    /// uploaded and reported through <see cref="BitFileUpload.Files"/> and the callbacks - they are simply not drawn,
+    /// which is what the surrounding page needs when it shows the attachments in a layout of its own.
+    /// </summary>
+    public bool? HideFileView { get; set; }
+
+    /// <summary>
+    /// Whether to hide the default browse button label from the UI.
+    /// </summary>
+    public bool? HideLabel { get; set; }
+
+    /// <summary>
+    /// The text of the browse button. Setting it to an empty string hides the button altogether.
+    /// </summary>
+    public string? Label { get; set; }
+
+    /// <summary>
+    /// Maximum allowed number of files in the file list (0 for unlimited).
+    /// Files selected beyond this count are rejected at selection time and will not be uploaded.
+    /// Only files that pass the other validations consume a slot.
+    /// </summary>
+    public int? MaxCount { get; set; }
+
+    /// <summary>
+    /// Specifies the message shown for the files rejected due to exceeding the maximum number of files.
+    /// </summary>
+    public string? MaxCountErrorMessage { get; set; }
+
+    /// <summary>
+    /// The maximum allowed size in bytes of each file (0 for unlimited). A larger file is rejected at
+    /// selection time with the <see cref="MaxSizeErrorMessage"/> and will not be uploaded.
+    /// </summary>
+    public long? MaxSize { get; set; }
+
+    /// <summary>
+    /// The message shown for the files rejected for being larger than the <see cref="MaxSize"/>.
+    /// </summary>
+    public string? MaxSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// Maximum allowed total size in bytes of all the files of the file list (0 for unlimited).
+    /// Files pushing the accumulated size beyond this limit are rejected at selection time and will not be
+    /// uploaded, becoming eligible again once removals free up room.
+    /// Only files that pass the other validations consume the budget.
+    /// </summary>
+    public long? MaxTotalSize { get; set; }
+
+    /// <summary>
+    /// Specifies the message shown for the files rejected for making the total size of the file list
+    /// exceed the maximum total size.
+    /// </summary>
+    public string? MaxTotalSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// The minimum allowed size in bytes of each file (0 for no limit). A smaller file is rejected at
+    /// selection time with the <see cref="MinSizeErrorMessage"/> and will not be uploaded.
+    /// </summary>
+    public long? MinSize { get; set; }
+
+    /// <summary>
+    /// The message shown for the files rejected for being smaller than the <see cref="MinSize"/>.
+    /// </summary>
+    public string? MinSizeErrorMessage { get; set; }
+
+    /// <summary>
+    /// Whether several files can be handed over at once, both through the file dialog and through a
+    /// single drop or paste. Without it a multi-file drop or paste is trimmed down to its first file.
+    /// </summary>
+    public bool? Multiple { get; set; }
+
+    /// <summary>
+    /// The message shown for the files rejected for not matching any entry of <see cref="AllowedExtensions"/>.
+    /// </summary>
+    public string? NotAllowedExtensionErrorMessage { get; set; }
+
+    /// <summary>
+    /// The tooltip of the pause upload button, which is also used as the prefix of its accessible label
+    /// (e.g., "Pause report.pdf"). Defaults to "Pause".
+    /// </summary>
+    public string? PauseButtonTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to use for the pause upload button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="PauseIconName"/> when both are set.
+    /// Defaults to the built-in Pause icon when neither is set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render a custom pause icon from external libraries like FontAwesome or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="PauseIconName"/> instead.
+    /// </remarks>
+    public BitIconInfo? PauseIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to use for the pause upload button from the built-in Fluent UI icons.
+    /// Defaults to <c>Pause</c> when not set.
+    /// </summary>
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Pause</c>).
+    /// <br />
+    /// For external icon libraries, use <see cref="PauseIcon"/> instead.
+    /// </remarks>
+    public string? PauseIconName { get; set; }
+
+    /// <summary>
+    /// The message shown for the files waiting in the queue for a free slot of the <see cref="ConcurrentUploads"/>
+    /// limit, which is what tells a file that is about to start apart from one that was never asked to upload.
+    /// </summary>
+    public string? QueuedUploadMessage { get; set; }
+
+    /// <summary>
+    /// Whether to read the pixel dimensions of the selected image files, filling the
+    /// <see cref="BitFileInfo.Width"/> and <see cref="BitFileInfo.Height"/> of each of them before the
+    /// validations run, so that a <see cref="FileValidator"/> can reject an image by its dimensions.
+    /// Reading them means decoding every image in the browser, which costs time and memory on a large
+    /// selection, so it is off by default.
+    /// </summary>
+    public bool? ReadImageDimensions { get; set; }
+
+    /// <summary>
+    /// The tooltip of the remove file button, which is also used as the prefix of its accessible label
+    /// (e.g., "Remove report.pdf"). Defaults to "Remove".
+    /// </summary>
+    public string? RemoveButtonTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to use for the remove file button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="RemoveIconName"/> when both are set.
+    /// Defaults to the built-in Delete icon when neither is set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render a custom remove icon from external libraries like FontAwesome or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="RemoveIconName"/> instead.
+    /// </remarks>
+    public BitIconInfo? RemoveIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to use for the remove file button from the built-in Fluent UI icons.
+    /// Defaults to <c>Delete</c> when not set.
+    /// </summary>
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Delete</c>).
+    /// <br />
+    /// For external icon libraries, use <see cref="RemoveIcon"/> instead.
+    /// </remarks>
+    public string? RemoveIconName { get; set; }
+
+    /// <summary>
+    /// Custom HTTP headers attached to the remove request.
+    /// </summary>
+    public Dictionary<string, string>? RemoveRequestHttpHeaders { get; set; }
+
+    /// <summary>
+    /// The provider function creating the HTTP headers of the remove request, invoked right before the
+    /// request goes out and taking precedence over <see cref="RemoveRequestHttpHeaders"/>.
+    /// </summary>
+    public Func<Task<Dictionary<string, string>>>? RemoveRequestHttpHeadersProvider { get; set; }
+
+    /// <summary>
+    /// The HTTP method of the remove request (e.g., "POST"). Defaults to "DELETE".
+    /// </summary>
+    public string? RemoveRequestHttpMethod { get; set; }
+
+    /// <summary>
+    /// Custom query strings appended to the URL of the remove request.
+    /// </summary>
+    public Dictionary<string, string>? RemoveRequestQueryStrings { get; set; }
+
+    /// <summary>
+    /// The provider function creating the query strings of the remove request, invoked right before the
+    /// request goes out and taking precedence over <see cref="RemoveRequestQueryStrings"/>.
+    /// </summary>
+    public Func<Task<Dictionary<string, string>>>? RemoveRequestQueryStringsProvider { get; set; }
+
+    /// <summary>
+    /// URL of the server endpoint removing the files. A file whose bytes already reached the server is
+    /// deleted from it through a request to this URL carrying its name as a query string and its id in
+    /// the BIT_FILE_ID header; a file that never uploaded is simply dropped from the list without one.
+    /// </summary>
+    public string? RemoveUrl { get; set; }
+
+    /// <summary>
+    /// The tooltip of the retry button of a failed or canceled file, which is also used as the prefix of its
+    /// accessible label (e.g., "Retry report.pdf"). Defaults to "Retry".
+    /// </summary>
+    public string? RetryButtonTitle { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to use for the retry button of a failed or canceled file using custom CSS classes
+    /// for external icon libraries. Takes precedence over <see cref="RetryIconName"/> when both are set.
+    /// Defaults to the built-in Refresh icon when neither is set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render a custom retry icon from external libraries like FontAwesome or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="RetryIconName"/> instead.
+    /// </remarks>
+    public BitIconInfo? RetryIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to use for the retry button of a failed or canceled file
+    /// from the built-in Fluent UI icons. Defaults to <c>Refresh</c> when not set.
+    /// </summary>
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Refresh</c>).
+    /// <br />
+    /// For external icon libraries, use <see cref="RetryIcon"/> instead.
+    /// </remarks>
+    public string? RetryIconName { get; set; }
+
+    /// <summary>
+    /// Decides whether a failed upload is worth retrying automatically, receiving the file and the HTTP status
+    /// code of the failed request (0 for a network error, a timeout or an aborted request) and returning true
+    /// to spend one of the <see cref="AutoRetries"/> attempts on it.
+    /// When not set, a built-in rule retries the failures a second attempt can plausibly survive - network
+    /// errors, timeouts, 408, 429 and the 5xx server errors - and gives up right away on the other 4xx,
+    /// which say that the request itself is the problem and would fail again just the same.
+    /// </summary>
+    public Func<BitFileInfo, int, bool>? ShouldAutoRetry { get; set; }
+
+    /// <summary>
+    /// Whether a thumbnail of every selected image is shown at the head of its file item, produced
+    /// entirely in the browser from an object URL that is handed back as soon as the file is removed or
+    /// the component is reset. The same URL is on the <see cref="BitFileInfo.PreviewUrl"/> of each file.
+    /// </summary>
+    public bool? ShowPreview { get; set; }
+
+    /// <summary>
+    /// Whether each settled file item offers a remove button, which drops a file that never uploaded from
+    /// the list and deletes an uploaded one from the server through the <see cref="RemoveUrl"/>.
+    /// </summary>
+    public bool? ShowRemoveButton { get; set; }
+
+    /// <summary>
+    /// The size of the file upload, applied to the browse button and the file list items.
+    /// </summary>
+    public BitSize? Size { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the BitFileUpload.
+    /// </summary>
+    public BitFileUploadClassStyles? Styles { get; set; }
+
+    /// <summary>
+    /// The message shown for successful file uploads.
+    /// </summary>
+    public string? SuccessfulUploadMessage { get; set; }
+
+    /// <summary>
+    /// The tooltip of the upload button, which is also used as the prefix of its accessible label
+    /// (e.g., "Upload report.pdf"). Defaults to "Upload".
+    /// </summary>
+    public string? UploadButtonTitle { get; set; }
+
+    /// <summary>
+    /// The name of the form field carrying the file content in the upload request. Defaults to "file".
+    /// </summary>
+    public string? UploadFormFieldName { get; set; }
+
+    /// <summary>
+    /// Gets or sets the icon to use for the upload button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="UploadIconName"/> when both are set.
+    /// Defaults to the built-in Play icon when neither is set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render a custom upload icon from external libraries like FontAwesome or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="UploadIconName"/> instead.
+    /// </remarks>
+    public BitIconInfo? UploadIcon { get; set; }
+
+    /// <summary>
+    /// Gets or sets the name of the icon to use for the upload button from the built-in Fluent UI icons.
+    /// Defaults to <c>Play</c> when not set.
+    /// </summary>
+    /// <remarks>
+    /// The icon name should be from the Fluent UI icon set (e.g., <c>BitIconName.Play</c>).
+    /// <br />
+    /// For external icon libraries, use <see cref="UploadIcon"/> instead.
+    /// </remarks>
+    public string? UploadIconName { get; set; }
+
+    /// <summary>
+    /// Additional multipart form fields sent alongside the content of every file in its upload requests,
+    /// which is what carries the metadata a server needs next to the bytes - a target folder, an album id,
+    /// a caption - for the endpoints that read it from the form rather than from the query string.
+    /// The <see cref="BitFileInfo.FormFields"/> of a file is merged over these for that file.
+    /// </summary>
+    public Dictionary<string, string>? UploadRequestFormFields { get; set; }
+
+    /// <summary>
+    /// Custom HTTP headers attached to the upload requests, fixed at selection time.
+    /// </summary>
+    public Dictionary<string, string>? UploadRequestHttpHeaders { get; set; }
+
+    /// <summary>
+    /// The provider function to create the http headers for upload request.
+    /// Unlike <see cref="UploadRequestHttpHeaders"/>, it is invoked right before every single request -
+    /// each file and each chunk - which is what lets it hand over a freshly minted access token.
+    /// </summary>
+    public Func<Task<Dictionary<string, string>>>? UploadRequestHttpHeadersProvider { get; set; }
+
+    /// <summary>
+    /// The HTTP method of the upload request (e.g., "PUT"). Defaults to "POST".
+    /// </summary>
+    public string? UploadRequestHttpMethod { get; set; }
+
+    /// <summary>
+    /// Custom query strings appended to the URL of the upload requests, fixed at selection time.
+    /// </summary>
+    public Dictionary<string, string>? UploadRequestQueryStrings { get; set; }
+
+    /// <summary>
+    /// The provider function to create the query strings for upload request.
+    /// Unlike <see cref="UploadRequestQueryStrings"/>, it is invoked right before every single request -
+    /// each file and each chunk - which is what lets it hand over a value that does not survive a batch.
+    /// </summary>
+    public Func<Task<Dictionary<string, string>>>? UploadRequestQueryStringsProvider { get; set; }
+
+    /// <summary>
+    /// The timeout of the upload request for each file or chunk. When it elapses the upload of the file fails.
+    /// Set to null (the default) for no timeout.
+    /// </summary>
+    public TimeSpan? UploadTimeout { get; set; }
+
+    /// <summary>
+    /// URL of the server endpoint receiving the files, fixed at selection time. Use
+    /// <see cref="UploadUrlProvider"/> instead for an endpoint that has to be minted per request.
+    /// </summary>
+    public string? UploadUrl { get; set; }
+
+    /// <summary>
+    /// The provider function to create the URL of the server endpoint receiving the files.
+    /// Unlike <see cref="UploadUrl"/>, it is invoked right before every single request - each file and
+    /// each chunk - which is what lets it hand over a presigned URL that expires.
+    /// </summary>
+    public Func<Task<string?>>? UploadUrlProvider { get; set; }
+
+    /// <summary>
+    /// The visual variant of the browse button, which decides how much of the <see cref="Color"/> it carries:
+    /// a full fill, only an outline, or neither.
+    /// </summary>
+    public BitVariant? Variant { get; set; }
+
+    /// <summary>
+    /// Whether the upload request is sent with credentials such as cookies and authorization headers
+    /// for cross-origin requests (the withCredentials flag of the underlying XMLHttpRequest).
+    /// </summary>
+    public bool? WithCredentials { get; set; }
+
+
+    /// <summary>
+    /// Updates the properties of the specified <see cref="BitFileUpload"/> instance with any values that have been set on
+    /// this object, if those properties have not already been set on the <see cref="BitFileUpload"/>.
+    /// </summary>
+    /// <remarks>
+    /// Only properties that have a value set and have not already been set on the <paramref name="bitFileUpload"/> will be updated.
+    /// This method does not overwrite existing values on <paramref name="bitFileUpload"/>.
+    /// </remarks>
+    /// <param name="bitFileUpload">
+    /// The <see cref="BitFileUpload"/> instance whose properties will be updated. Cannot be null.
+    /// </param>
+    public void UpdateParameters(BitFileUpload bitFileUpload)
+    {
+        if (bitFileUpload is null) return;
+
+        UpdateBaseParameters(bitFileUpload);
+
+        if (Accept.HasValue() && bitFileUpload.HasNotBeenSet(nameof(Accept)))
+        {
+            bitFileUpload.Accept = Accept;
+        }
+
+        if (AllowDrop.HasValue && bitFileUpload.HasNotBeenSet(nameof(AllowDrop)))
+        {
+            bitFileUpload.AllowDrop = AllowDrop.Value;
+        }
+
+        if (AllowDuplicates.HasValue && bitFileUpload.HasNotBeenSet(nameof(AllowDuplicates)))
+        {
+            bitFileUpload.AllowDuplicates = AllowDuplicates.Value;
+        }
+
+        if (AllowPaste.HasValue && bitFileUpload.HasNotBeenSet(nameof(AllowPaste)))
+        {
+            bitFileUpload.AllowPaste = AllowPaste.Value;
+        }
+
+        if (AllowedExtensions is not null && bitFileUpload.HasNotBeenSet(nameof(AllowedExtensions)))
+        {
+            bitFileUpload.AllowedExtensions = AllowedExtensions;
+        }
+
+        if (AnnouncementProvider is not null && bitFileUpload.HasNotBeenSet(nameof(AnnouncementProvider)))
+        {
+            bitFileUpload.AnnouncementProvider = AnnouncementProvider;
+        }
+
+        if (Append.HasValue && bitFileUpload.HasNotBeenSet(nameof(Append)))
+        {
+            bitFileUpload.Append = Append.Value;
+        }
+
+        if (AutoChunkSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoChunkSize)))
+        {
+            bitFileUpload.AutoChunkSize = AutoChunkSize.Value;
+        }
+
+        if (AutoReset.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoReset)))
+        {
+            bitFileUpload.AutoReset = AutoReset.Value;
+        }
+
+        if (AutoRetries.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoRetries)))
+        {
+            bitFileUpload.AutoRetries = AutoRetries.Value;
+        }
+
+        if (AutoRetryDelay.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoRetryDelay)))
+        {
+            bitFileUpload.AutoRetryDelay = AutoRetryDelay.Value;
+        }
+
+        if (AutoUpload.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoUpload)))
+        {
+            bitFileUpload.AutoUpload = AutoUpload.Value;
+        }
+
+        if (CancelButtonTitle.HasValue() && bitFileUpload.HasNotBeenSet(nameof(CancelButtonTitle)))
+        {
+            bitFileUpload.CancelButtonTitle = CancelButtonTitle;
+        }
+
+        if (CancelIcon is not null && bitFileUpload.HasNotBeenSet(nameof(CancelIcon)))
+        {
+            bitFileUpload.CancelIcon = CancelIcon;
+        }
+
+        if (CancelIconName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(CancelIconName)))
+        {
+            bitFileUpload.CancelIconName = CancelIconName;
+        }
+
+        if (CanceledUploadMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(CanceledUploadMessage)))
+        {
+            bitFileUpload.CanceledUploadMessage = CanceledUploadMessage!;
+        }
+
+        if (Capture.HasValue() && bitFileUpload.HasNotBeenSet(nameof(Capture)))
+        {
+            bitFileUpload.Capture = Capture;
+        }
+
+        if (ChunkSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(ChunkSize)))
+        {
+            bitFileUpload.ChunkSize = ChunkSize.Value;
+        }
+
+        if (ChunkedUpload.HasValue && bitFileUpload.HasNotBeenSet(nameof(ChunkedUpload)))
+        {
+            bitFileUpload.ChunkedUpload = ChunkedUpload.Value;
+        }
+
+        if (Classes is not null && bitFileUpload.HasNotBeenSet(nameof(Classes)))
+        {
+            bitFileUpload.Classes = Classes;
+
+            bitFileUpload.ClassBuilder.Reset();
+        }
+
+        if (Color.HasValue && bitFileUpload.HasNotBeenSet(nameof(Color)))
+        {
+            bitFileUpload.Color = Color.Value;
+
+            bitFileUpload.ClassBuilder.Reset();
+        }
+
+        if (ConcurrentUploads.HasValue && bitFileUpload.HasNotBeenSet(nameof(ConcurrentUploads)))
+        {
+            bitFileUpload.ConcurrentUploads = ConcurrentUploads.Value;
+        }
+
+        if (Description.HasValue() && bitFileUpload.HasNotBeenSet(nameof(Description)))
+        {
+            bitFileUpload.Description = Description;
+        }
+
+        if (Directory.HasValue && bitFileUpload.HasNotBeenSet(nameof(Directory)))
+        {
+            bitFileUpload.Directory = Directory.Value;
+        }
+
+        if (DuplicateErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(DuplicateErrorMessage)))
+        {
+            bitFileUpload.DuplicateErrorMessage = DuplicateErrorMessage!;
+        }
+
+        if (FailedRemoveMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(FailedRemoveMessage)))
+        {
+            bitFileUpload.FailedRemoveMessage = FailedRemoveMessage!;
+        }
+
+        if (FailedUploadMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(FailedUploadMessage)))
+        {
+            bitFileUpload.FailedUploadMessage = FailedUploadMessage!;
+        }
+
+        if (FileListAriaLabel.HasValue() && bitFileUpload.HasNotBeenSet(nameof(FileListAriaLabel)))
+        {
+            bitFileUpload.FileListAriaLabel = FileListAriaLabel!;
+        }
+
+        if (FileSizeFormatter is not null && bitFileUpload.HasNotBeenSet(nameof(FileSizeFormatter)))
+        {
+            bitFileUpload.FileSizeFormatter = FileSizeFormatter;
+        }
+
+        if (FileValidator is not null && bitFileUpload.HasNotBeenSet(nameof(FileValidator)))
+        {
+            bitFileUpload.FileValidator = FileValidator;
+        }
+
+        if (HideFileView.HasValue && bitFileUpload.HasNotBeenSet(nameof(HideFileView)))
+        {
+            bitFileUpload.HideFileView = HideFileView.Value;
+        }
+
+        if (HideLabel.HasValue && bitFileUpload.HasNotBeenSet(nameof(HideLabel)))
+        {
+            bitFileUpload.HideLabel = HideLabel.Value;
+        }
+
+        if (Label.HasValue() && bitFileUpload.HasNotBeenSet(nameof(Label)))
+        {
+            bitFileUpload.Label = Label!;
+        }
+
+        if (MaxCount.HasValue && bitFileUpload.HasNotBeenSet(nameof(MaxCount)))
+        {
+            bitFileUpload.MaxCount = MaxCount.Value;
+        }
+
+        if (MaxCountErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(MaxCountErrorMessage)))
+        {
+            bitFileUpload.MaxCountErrorMessage = MaxCountErrorMessage!;
+        }
+
+        if (MaxSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(MaxSize)))
+        {
+            bitFileUpload.MaxSize = MaxSize.Value;
+        }
+
+        if (MaxSizeErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(MaxSizeErrorMessage)))
+        {
+            bitFileUpload.MaxSizeErrorMessage = MaxSizeErrorMessage!;
+        }
+
+        if (MaxTotalSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(MaxTotalSize)))
+        {
+            bitFileUpload.MaxTotalSize = MaxTotalSize.Value;
+        }
+
+        if (MaxTotalSizeErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(MaxTotalSizeErrorMessage)))
+        {
+            bitFileUpload.MaxTotalSizeErrorMessage = MaxTotalSizeErrorMessage!;
+        }
+
+        if (MinSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(MinSize)))
+        {
+            bitFileUpload.MinSize = MinSize.Value;
+        }
+
+        if (MinSizeErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(MinSizeErrorMessage)))
+        {
+            bitFileUpload.MinSizeErrorMessage = MinSizeErrorMessage!;
+        }
+
+        if (Multiple.HasValue && bitFileUpload.HasNotBeenSet(nameof(Multiple)))
+        {
+            bitFileUpload.Multiple = Multiple.Value;
+        }
+
+        if (NotAllowedExtensionErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(NotAllowedExtensionErrorMessage)))
+        {
+            bitFileUpload.NotAllowedExtensionErrorMessage = NotAllowedExtensionErrorMessage!;
+        }
+
+        if (PauseButtonTitle.HasValue() && bitFileUpload.HasNotBeenSet(nameof(PauseButtonTitle)))
+        {
+            bitFileUpload.PauseButtonTitle = PauseButtonTitle;
+        }
+
+        if (PauseIcon is not null && bitFileUpload.HasNotBeenSet(nameof(PauseIcon)))
+        {
+            bitFileUpload.PauseIcon = PauseIcon;
+        }
+
+        if (PauseIconName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(PauseIconName)))
+        {
+            bitFileUpload.PauseIconName = PauseIconName;
+        }
+
+        if (QueuedUploadMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(QueuedUploadMessage)))
+        {
+            bitFileUpload.QueuedUploadMessage = QueuedUploadMessage!;
+        }
+
+        if (ReadImageDimensions.HasValue && bitFileUpload.HasNotBeenSet(nameof(ReadImageDimensions)))
+        {
+            bitFileUpload.ReadImageDimensions = ReadImageDimensions.Value;
+        }
+
+        if (RemoveButtonTitle.HasValue() && bitFileUpload.HasNotBeenSet(nameof(RemoveButtonTitle)))
+        {
+            bitFileUpload.RemoveButtonTitle = RemoveButtonTitle;
+        }
+
+        if (RemoveIcon is not null && bitFileUpload.HasNotBeenSet(nameof(RemoveIcon)))
+        {
+            bitFileUpload.RemoveIcon = RemoveIcon;
+        }
+
+        if (RemoveIconName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(RemoveIconName)))
+        {
+            bitFileUpload.RemoveIconName = RemoveIconName;
+        }
+
+        if (RemoveRequestHttpHeaders is not null && bitFileUpload.HasNotBeenSet(nameof(RemoveRequestHttpHeaders)))
+        {
+            bitFileUpload.RemoveRequestHttpHeaders = RemoveRequestHttpHeaders;
+        }
+
+        if (RemoveRequestHttpHeadersProvider is not null && bitFileUpload.HasNotBeenSet(nameof(RemoveRequestHttpHeadersProvider)))
+        {
+            bitFileUpload.RemoveRequestHttpHeadersProvider = RemoveRequestHttpHeadersProvider;
+        }
+
+        if (RemoveRequestHttpMethod.HasValue() && bitFileUpload.HasNotBeenSet(nameof(RemoveRequestHttpMethod)))
+        {
+            bitFileUpload.RemoveRequestHttpMethod = RemoveRequestHttpMethod;
+        }
+
+        if (RemoveRequestQueryStrings is not null && bitFileUpload.HasNotBeenSet(nameof(RemoveRequestQueryStrings)))
+        {
+            bitFileUpload.RemoveRequestQueryStrings = RemoveRequestQueryStrings;
+        }
+
+        if (RemoveRequestQueryStringsProvider is not null && bitFileUpload.HasNotBeenSet(nameof(RemoveRequestQueryStringsProvider)))
+        {
+            bitFileUpload.RemoveRequestQueryStringsProvider = RemoveRequestQueryStringsProvider;
+        }
+
+        if (RemoveUrl.HasValue() && bitFileUpload.HasNotBeenSet(nameof(RemoveUrl)))
+        {
+            bitFileUpload.RemoveUrl = RemoveUrl;
+        }
+
+        if (RetryButtonTitle.HasValue() && bitFileUpload.HasNotBeenSet(nameof(RetryButtonTitle)))
+        {
+            bitFileUpload.RetryButtonTitle = RetryButtonTitle;
+        }
+
+        if (RetryIcon is not null && bitFileUpload.HasNotBeenSet(nameof(RetryIcon)))
+        {
+            bitFileUpload.RetryIcon = RetryIcon;
+        }
+
+        if (RetryIconName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(RetryIconName)))
+        {
+            bitFileUpload.RetryIconName = RetryIconName;
+        }
+
+        if (ShouldAutoRetry is not null && bitFileUpload.HasNotBeenSet(nameof(ShouldAutoRetry)))
+        {
+            bitFileUpload.ShouldAutoRetry = ShouldAutoRetry;
+        }
+
+        if (ShowPreview.HasValue && bitFileUpload.HasNotBeenSet(nameof(ShowPreview)))
+        {
+            bitFileUpload.ShowPreview = ShowPreview.Value;
+        }
+
+        if (ShowRemoveButton.HasValue && bitFileUpload.HasNotBeenSet(nameof(ShowRemoveButton)))
+        {
+            bitFileUpload.ShowRemoveButton = ShowRemoveButton.Value;
+        }
+
+        if (Size.HasValue && bitFileUpload.HasNotBeenSet(nameof(Size)))
+        {
+            bitFileUpload.Size = Size.Value;
+
+            bitFileUpload.ClassBuilder.Reset();
+        }
+
+        if (Styles is not null && bitFileUpload.HasNotBeenSet(nameof(Styles)))
+        {
+            bitFileUpload.Styles = Styles;
+
+            bitFileUpload.StyleBuilder.Reset();
+        }
+
+        if (SuccessfulUploadMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(SuccessfulUploadMessage)))
+        {
+            bitFileUpload.SuccessfulUploadMessage = SuccessfulUploadMessage!;
+        }
+
+        if (UploadButtonTitle.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadButtonTitle)))
+        {
+            bitFileUpload.UploadButtonTitle = UploadButtonTitle;
+        }
+
+        if (UploadFormFieldName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadFormFieldName)))
+        {
+            bitFileUpload.UploadFormFieldName = UploadFormFieldName;
+        }
+
+        if (UploadIcon is not null && bitFileUpload.HasNotBeenSet(nameof(UploadIcon)))
+        {
+            bitFileUpload.UploadIcon = UploadIcon;
+        }
+
+        if (UploadIconName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadIconName)))
+        {
+            bitFileUpload.UploadIconName = UploadIconName;
+        }
+
+        if (UploadRequestFormFields is not null && bitFileUpload.HasNotBeenSet(nameof(UploadRequestFormFields)))
+        {
+            bitFileUpload.UploadRequestFormFields = UploadRequestFormFields;
+        }
+
+        if (UploadRequestHttpHeaders is not null && bitFileUpload.HasNotBeenSet(nameof(UploadRequestHttpHeaders)))
+        {
+            bitFileUpload.UploadRequestHttpHeaders = UploadRequestHttpHeaders;
+        }
+
+        if (UploadRequestHttpHeadersProvider is not null && bitFileUpload.HasNotBeenSet(nameof(UploadRequestHttpHeadersProvider)))
+        {
+            bitFileUpload.UploadRequestHttpHeadersProvider = UploadRequestHttpHeadersProvider;
+        }
+
+        if (UploadRequestHttpMethod.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadRequestHttpMethod)))
+        {
+            bitFileUpload.UploadRequestHttpMethod = UploadRequestHttpMethod;
+        }
+
+        if (UploadRequestQueryStrings is not null && bitFileUpload.HasNotBeenSet(nameof(UploadRequestQueryStrings)))
+        {
+            bitFileUpload.UploadRequestQueryStrings = UploadRequestQueryStrings;
+        }
+
+        if (UploadRequestQueryStringsProvider is not null && bitFileUpload.HasNotBeenSet(nameof(UploadRequestQueryStringsProvider)))
+        {
+            bitFileUpload.UploadRequestQueryStringsProvider = UploadRequestQueryStringsProvider;
+        }
+
+        if (UploadTimeout.HasValue && bitFileUpload.HasNotBeenSet(nameof(UploadTimeout)))
+        {
+            bitFileUpload.UploadTimeout = UploadTimeout.Value;
+        }
+
+        if (UploadUrl.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadUrl)))
+        {
+            bitFileUpload.UploadUrl = UploadUrl;
+        }
+
+        if (UploadUrlProvider is not null && bitFileUpload.HasNotBeenSet(nameof(UploadUrlProvider)))
+        {
+            bitFileUpload.UploadUrlProvider = UploadUrlProvider;
+        }
+
+        if (Variant.HasValue && bitFileUpload.HasNotBeenSet(nameof(Variant)))
+        {
+            bitFileUpload.Variant = Variant.Value;
+
+            bitFileUpload.ClassBuilder.Reset();
+        }
+
+        if (WithCredentials.HasValue && bitFileUpload.HasNotBeenSet(nameof(WithCredentials)))
+        {
+            bitFileUpload.WithCredentials = WithCredentials.Value;
+        }
+
+        // The working chunk size is derived from ChunkSize and AutoChunkSize by a setter that assigning
+        // the properties here goes around, so it is derived again once both of them are in place.
+        if (ChunkSize.HasValue || AutoChunkSize.HasValue)
+        {
+            bitFileUpload.OnSetChunkSize();
+        }
+    }
+}
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
index 2e2f611ee41..6fa92ee0cff 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
@@ -2,6 +2,13 @@
 
 @{
     var fileUploadPercent = GetFileUploadPercent(Item);
+
+    // which action buttons this render draws is worked out right here, before any of them is written out,
+    // so the flags the focus management reads are never left over from the render before this one.
+    _hasUploadButton = false;
+    _hasPauseButton = false;
+    _hasCancelButton = false;
+    _hasRemoveButton = false;
 }
 
 @if (Item.Status != BitFileUploadStatus.Removed)
@@ -73,7 +80,9 @@
             var uploadTitle = isRetry
                                 ? (FileUpload.RetryButtonTitle ?? FileUpload.UploadButtonTitle ?? "Retry")
                                 : (FileUpload.UploadButtonTitle ?? "Upload");
-            <button @onclick="() => FileUpload.Upload(Item)"
+            _hasUploadButton = true;
+            <button @ref="_uploadButtonRef"
+                    @onclick="() => FileUpload.HandleItemUpload(Item)"
                     type="button"
                     title="@uploadTitle"
                     disabled="@(FileUpload.IsEnabled is false)"
@@ -88,7 +97,9 @@
         {
             var pauseIcon = BitIconInfo.From(FileUpload.PauseIcon, FileUpload.PauseIconName ?? "Pause");
             var pauseTitle = FileUpload.PauseButtonTitle ?? "Pause";
-            <button @onclick="() => FileUpload.PauseUpload(Item)"
+            _hasPauseButton = true;
+            <button @ref="_pauseButtonRef"
+                    @onclick="() => FileUpload.HandleItemPause(Item)"
                     type="button"
                     title="@pauseTitle"
                     disabled="@(FileUpload.IsEnabled is false)"
@@ -105,7 +116,9 @@
         {
             var cancelIcon = BitIconInfo.From(FileUpload.CancelIcon, FileUpload.CancelIconName ?? "Cancel");
             var cancelTitle = FileUpload.CancelButtonTitle ?? "Cancel";
-            <button @onclick="() => FileUpload.CancelUpload(Item)"
+            _hasCancelButton = true;
+            <button @ref="_cancelButtonRef"
+                    @onclick="() => FileUpload.HandleItemCancel(Item)"
                     type="button"
                     title="@cancelTitle"
                     disabled="@(FileUpload.IsEnabled is false)"
@@ -121,15 +134,19 @@
             {
                 @* the spinner carries no text of its own, and the live region of the component already
                    announces the outcome of the removal, so it is left out of the accessibility tree. *@
-                <div class="bit-upl-ldg" aria-hidden="true">
-                    <div class="bit-upl-spn"></div>
+                <div aria-hidden="true"
+                     style="@FileUpload.Styles?.RemoveSpinnerContainer"
+                     class="bit-upl-ldg @FileUpload.Classes?.RemoveSpinnerContainer">
+                    <div style="@FileUpload.Styles?.RemoveSpinner" class="bit-upl-spn @FileUpload.Classes?.RemoveSpinner"></div>
                 </div>
             }
             else
             {
                 var removeIcon = BitIconInfo.From(FileUpload.RemoveIcon, FileUpload.RemoveIconName ?? "Delete");
                 var removeTitle = FileUpload.RemoveButtonTitle ?? "Remove";
-                <button @onclick="() => FileUpload.RemoveFile(Item)"
+                _hasRemoveButton = true;
+                <button @ref="_removeButtonRef"
+                        @onclick="() => FileUpload.HandleItemRemove(Item)"
                         type="button"
                         title="@removeTitle"
                         disabled="@(FileUpload.IsEnabled is false)"
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
index 696399b1583..1d1d044b5b3 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
@@ -1,12 +1,96 @@
 namespace Bit.BlazorUI;
 
-public partial class _BitFileUploadItem : ComponentBase
+// Which button of a file item the focus is to be moved to once the button that was pressed is gone.
+internal enum BitFileUploadFocusTarget
+{
+    Upload,
+    Pause,
+    Cancel,
+    Remove
+}
+
+public partial class _BitFileUploadItem : ComponentBase, IDisposable
 {
     private const string ROOT_ELEMENT_CLASS = "bit-upl";
 
+    // Which of the four action buttons this item drew in its last render, and the element of each one, so
+    // that the parent can hand the focus to a button that is actually there instead of to a stale reference.
+    private bool _hasUploadButton;
+    private bool _hasPauseButton;
+    private bool _hasCancelButton;
+    private bool _hasRemoveButton;
+    private ElementReference _uploadButtonRef;
+    private ElementReference _pauseButtonRef;
+    private ElementReference _cancelButtonRef;
+    private ElementReference _removeButtonRef;
+    private string? _registeredFileId;
+
     [Parameter] public BitFileUpload FileUpload { get; set; } = default!;
     [Parameter] public BitFileInfo Item { get; set; } = default!;
 
+    protected override void OnParametersSet()
+    {
+        // the item is keyed by the file it renders, so a file id it has not registered under yet is a
+        // registration of its own rather than a second one of the same item.
+        if (_registeredFileId == Item.FileId) return;
+
+        if (_registeredFileId is not null)
+        {
+            FileUpload.UnregisterItem(_registeredFileId, this);
+        }
+
+        _registeredFileId = Item.FileId;
+
+        FileUpload.RegisterItem(_registeredFileId, this);
+    }
+
+    public void Dispose()
+    {
+        if (_registeredFileId is not null)
+        {
+            FileUpload.UnregisterItem(_registeredFileId, this);
+            _registeredFileId = null;
+        }
+    }
+
+    // The preferred button first, then whatever else the item has: an upload that fails the moment it is
+    // started, for instance, leaves an item with a retry button where the pause button was expected. The
+    // remove button comes last of the fallbacks, so the focus never lands on the destructive action of an
+    // item while that item still has something else to offer.
+    internal async Task<bool> TryFocus(BitFileUploadFocusTarget target)
+    {
+        // every button of a disabled component is disabled too, and none of them can take the focus.
+        if (FileUpload.IsEnabled is false) return false;
+
+        BitFileUploadFocusTarget[] order =
+        [
+            target,
+            BitFileUploadFocusTarget.Upload,
+            BitFileUploadFocusTarget.Pause,
+            BitFileUploadFocusTarget.Cancel,
+            BitFileUploadFocusTarget.Remove
+        ];
+
+        foreach (var candidate in order)
+        {
+            var (rendered, element) = candidate switch
+            {
+                BitFileUploadFocusTarget.Remove => (_hasRemoveButton, _removeButtonRef),
+                BitFileUploadFocusTarget.Pause => (_hasPauseButton, _pauseButtonRef),
+                BitFileUploadFocusTarget.Cancel => (_hasCancelButton, _cancelButtonRef),
+                _ => (_hasUploadButton, _uploadButtonRef),
+            };
+
+            if (rendered is false) continue;
+
+            await element.FocusAsync();
+
+            return true;
+        }
+
+        return false;
+    }
+
     private static int GetFileUploadPercent(BitFileInfo file)
     {
         // an empty file has no byte whose progress could be measured, so it is either done or not
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index bf4e6b1dc33..52d19d9027f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -11,17 +11,17 @@
           SubClasses="componentSubClasses"
           SubEnums="componentSubEnums"
           PublicMembers="componentPublicMembers"
+          CssVariables="componentCssVariables"
           GitHubUrl="Inputs/FileUpload/BitFileUpload.razor"
           GitHubDemoUrl="Inputs/FileUpload/BitFileUploadDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
         <div>
-            Out of the box the BitFileUpload offers three ways to hand a file over: click the browse button to open
-            the file dialog, drag a file out of the OS and drop it anywhere on the component, or focus the component
-            and paste a file from the clipboard. The selected file appears in the built-in file list with its name,
-            its human-readable size and an upload button that starts sending it to the <b>UploadUrl</b>; while files
-            hover over the component the browse button turns into a dashed drop indicator. During the upload the item
-            shows a progress bar with pause and cancel buttons, and once it settles, a status message reports the
-            outcome.
+            Files arrive three ways out of the box: the browse button opens the file dialog, a file dragged out of
+            the OS can be dropped anywhere on the component, and a file on the clipboard can be pasted while the
+            focus is inside it. Each selected file becomes an item with its name, its size and an upload button that
+            sends it to the <b>UploadUrl</b>; while files hover over the component the browse button turns into a
+            dashed drop indicator. During the upload the item shows a progress bar with pause and cancel buttons,
+            and once it settles, a status message reports the outcome.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" />
@@ -29,12 +29,11 @@
 
     <DemoExample Title="AllowDrop & AllowPaste" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <div>
-            The two alternative selection routes can be switched off independently. <b>AllowDrop</b> controls dragging
-            files out of the OS onto the component: turning it off keeps the drop from being handled and shows a
-            "no drop" cursor, while still swallowing the event so the browser does not navigate away to the dropped
-            file and lose the page state. <b>AllowPaste</b> controls pasting files from the clipboard; a paste is only
-            delivered to the component while the focus is inside it, so the browse button has to be focused first.
-            Both take effect immediately when toggled at runtime, as the checkboxes below demonstrate.
+            The two alternative routes switch off independently. <b>AllowDrop</b> controls dropping files out of the
+            OS: turning it off shows a "no drop" cursor and still swallows the event, so the browser does not
+            navigate away to the dropped file and lose the page state. <b>AllowPaste</b> controls pasting from the
+            clipboard, which is only delivered while the focus is inside the component - so the browse button has to
+            be focused first. Both take effect immediately when toggled at runtime.
         </div>
         <br />
         <BitCheckbox @bind-Value="allowDrop" Label="AllowDrop" />
@@ -46,13 +45,11 @@
 
     <DemoExample Title="Description" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
         <div>
-            Telling the user the rules before they run into them is the single biggest usability win an uploader can
-            offer. <b>Description</b> renders a short hint under the browse button and - the part that is easy to
-            forget - wires it to that button through aria-describedby, so a screen reader reads the constraints out
-            together with the button instead of leaving them to be discovered by trial and error. Spell out the
-            accepted types and the size ceiling there, matching whatever <b>Accept</b>, <b>AllowedExtensions</b> and
+            <b>Description</b> renders a hint under the browse button and wires it to that button through
+            aria-describedby, so a screen reader reads the constraints out with the button instead of leaving them
+            to be discovered by trial and error. Spell out there what <b>Accept</b>, <b>AllowedExtensions</b> and
             <b>MaxSize</b> actually enforce. <b>DescriptionTemplate</b> takes over when the hint needs markup of its
-            own, such as the icon below, and <b>Classes.Description</b> / <b>Styles.Description</b> restyle it.
+            own, and <b>Classes.Description</b> / <b>Styles.Description</b> restyle it.
         </div>
         <br />
         <BitFileUpload Label="Browse for a document" UploadUrl="@UploadUrl" Accept=".pdf,.docx" MaxSize="1024 * 1024 * 5"
@@ -66,108 +63,113 @@
         </BitFileUpload>
     </DemoExample>
 
-    <DemoExample Title="Multiple" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+    <DemoExample Title="Removable" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <div>
-            <b>Multiple</b> lets the file dialog hand over several files at once and lets a single drop or paste carry
-            several files, each uploading independently with its own progress, pause, cancel and status. Without it
-            the dialog is limited to one file and only the first file of a multi-file drop is taken.
+            <b>ShowRemoveButton</b> puts a remove button on each settled file item. A file whose bytes never reached
+            the server is simply dropped from the view, while one that has (partially or fully) uploaded is deleted
+            from the server through a DELETE request to the <b>RemoveUrl</b>, carrying the file name as a query
+            string and the file id in the <b>BIT_FILE_ID</b> header; a non-success response marks the file with the
+            <b>FailedRemoveMessage</b> instead of pretending it is gone. <b>RemoveButtonTitle</b> localizes the
+            tooltip and the accessible label. Removing with the keyboard keeps the focus where the list is - on the
+            item that takes the removed one's place, or on the browse button once the list empties - instead of
+            dropping it on the document body with the button that was pressed.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
+                       ShowRemoveButton RemoveUrl="@RemoveUrl" />
     </DemoExample>
 
-    <DemoExample Title="AutoUpload" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <DemoExample Title="Selection behavior" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <div>
-            <b>AutoUpload</b> starts sending the files the moment they are selected, skipping the per-file upload
-            button entirely - the pattern to reach for when selection itself expresses the intent to upload, like an
-            avatar picker or an attachment area.
+            Five parameters decide what a selection does to the list. <b>Multiple</b> lets the dialog, a drop or a
+            paste carry several files at once, each uploading independently. <b>AutoUpload</b> starts sending them
+            the moment they arrive, skipping the per-file upload button - the pattern for an avatar picker or an
+            attachment area, where selecting already expresses the intent to upload. <b>Append</b> adds a new
+            selection to the end of the list instead of replacing it, keeping the upload state of what is already
+            there, so a batch can be built up over several rounds. <b>AutoReset</b> does the opposite for browsing:
+            it empties the list just before the dialog opens, even if the dialog is then cancelled.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" AutoUpload />
-    </DemoExample>
-
-    <DemoExample Title="AutoReset" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <div>
-            <b>AutoReset</b> clears the file list and the upload state just before the file dialog opens, so every
-            browse starts from a clean slate - the list empties even if the dialog is then cancelled. Handy when a
-            stale, already-uploaded selection lingering behind the dialog would be misleading.
+            Building a batch up makes it easy to pick the same file twice, so turning <b>AllowDuplicates</b> off
+            rejects a file matching one already in the list - by name, size and last modified time, as close to an
+            identity as the browser exposes - with the <b>DuplicateErrorMessage</b> under it. The rejection is not
+            final: remove the original and the copy becomes eligible again, since the rule is re-evaluated over the
+            whole list on every change.
         </div>
         <br />
+        <div>Multiple, auto-uploaded:</div>
+        <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple AutoUpload />
+        <br /><br />
+        <div>Appending, without duplicates - try selecting the same file twice:</div>
+        <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple Append
+                       AllowDuplicates="false" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+        <br /><br />
+        <div>AutoReset - every browse starts from an empty list:</div>
+        <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" AutoReset />
     </DemoExample>
 
-    <DemoExample Title="Append" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <DemoExample Title="Validation" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <div>
-            A new selection normally replaces whatever is in the list. <b>Append</b> keeps the existing files - along
-            with their upload state - and adds the new selection to the end instead, letting the user build the batch
-            up over several rounds of browsing, dropping or pasting.
+            Every rule runs at selection time, whichever way the file arrived. A file that fails one is marked as
+            not allowed with its message under it and is never sent - and it stays visible, so the user sees exactly
+            what was rejected and why instead of it disappearing silently.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Append />
-    </DemoExample>
-
-    <DemoExample Title="AllowDuplicates" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
         <div>
-            Building a batch up over several rounds of browsing makes it easy to pick the same file twice without
-            noticing, and uploading it twice is rarely what anyone meant. Turning <b>AllowDuplicates</b> off rejects
-            a newly selected file that matches one already in the list - by name, size and last modified time, which
-            is as close to an identity as the browser exposes for a picked file - showing the
-            <b>DuplicateErrorMessage</b> under it instead of sending it a second time. The rejection is not final:
-            remove the file it duplicates and the copy becomes eligible again, since the rule is re-evaluated over
-            the whole list on every change. Try selecting the same file twice below.
+            <b>MaxSize</b> and <b>MinSize</b> bound each file in bytes; <b>MaxTotalSize</b> bounds what the list adds
+            up to, which is the limit that matches a per-request or per-user quota; <b>MaxCount</b> caps how many
+            files the list holds. Only files that pass the other rules consume the total-size budget or a count slot,
+            so a file rejected for its type never pushes a good file over the cap. All three list-level rules are
+            re-evaluated on every change, so removing a file takes the next one waiting behind it back in.
+            <b>MaxSizeErrorMessage</b> and its siblings carry the wording.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple Append
-                       AllowDuplicates="false" ShowRemoveButton RemoveUrl="@RemoveUrl" />
-    </DemoExample>
-
-    <DemoExample Title="Size limits" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            <b>MaxSize</b> and <b>MinSize</b> bound the size of each file in bytes, while <b>MaxTotalSize</b> bounds
-            what the whole list adds up to - the limit that actually matches a per-request or per-user storage quota,
-            which a per-file ceiling alone cannot express. A file outside the allowed range is marked as not allowed
-            right at selection time - with the <b>MaxSizeErrorMessage</b>, <b>MinSizeErrorMessage</b> or
-            <b>MaxTotalSizeErrorMessage</b> shown under it - and it is never sent to the server; the file stays
-            visible in the list so the user can see exactly what was rejected and why instead of it disappearing
-            silently. Only the files that pass the other validations consume the total-size budget, and a file turned
-            away by it becomes eligible again as soon as removals free up room.
+            <b>FileValidator</b> runs last, for anything the built-in rules cannot express. Returning a message
+            rejects the file, returning null accepts it, and a validator that throws invalidates only its own file,
+            using the exception message as the text.
         </div>
         <br />
-        <div>Max 1 MB per file:</div>
+        <div>Max 1 MB per file, with a custom message:</div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1" />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1"
+                       MaxSizeErrorMessage="The file is too big! Please select a file smaller than 1 MB."
+                       Description="Up to 1 MB per file." />
         <br /><br />
         <div>Min 1 KB per file:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MinSize="1024" />
         <br /><br />
-        <div>Max 2 MB in total across the batch:</div>
+        <div>At most 3 files and 2 MB across the batch:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple Append
-                       MaxTotalSize="1024 * 1024 * 2" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+                       MaxCount="3" MaxTotalSize="1024 * 1024 * 2" ShowRemoveButton RemoveUrl="@RemoveUrl"
+                       Description="Up to 3 files, 2 MB in total." />
         <br /><br />
-        <div>Custom error message:</div>
+        <div>A custom rule - empty (zero-byte) files are turned away:</div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1"
-                       MaxSizeErrorMessage="The file is too big! Please select a file smaller than 1 MB." />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple FileValidator="@ValidateEmptyFile" />
     </DemoExample>
 
-    <DemoExample Title="Accept & AllowedExtensions" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <DemoExample Title="Accept & AllowedExtensions" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <div>
-            The two work at different moments and are both worth setting. <b>Accept</b> is passed straight to the
-            accept attribute of the underlying input, which only hints the <i>file dialog</i> to pre-filter what it
-            offers - it is a convenience, never a guarantee, since a drop, a paste or a "show all files" switch walks
-            right past it. <b>AllowedExtensions</b> is the actual rule: it checks every file however it arrived and
-            marks the mismatches as not allowed with the <b>NotAllowedExtensionErrorMessage</b>, so they stay visible
-            in the list with their reason and are never sent.
+            The two work at different moments. <b>Accept</b> goes straight to the accept attribute of the underlying
+            input, which only hints the <i>file dialog</i> to pre-filter what it offers - a drop, a paste or a "show
+            all files" switch walks right past it. <b>AllowedExtensions</b> is the actual rule: it checks every file
+            however it arrived and marks the mismatches as not allowed with the
+            <b>NotAllowedExtensionErrorMessage</b>.
         </div>
         <br />
         <div>
-            Its entries are matched leniently - an extension may be written with or without its leading dot and in
-            any casing - and an entry containing a slash is treated as a MIME type instead, with a trailing wildcard
-            like <b>image/*</b> covering a whole group. When <b>Accept</b> is not set, the list also generates the
-            accept attribute on its own, which is why setting <b>AllowedExtensions</b> alone is usually all you need;
-            set <b>Accept</b> explicitly only when the dialog filter should differ from the rule.
+            Its entries are matched leniently - an extension with or without its leading dot, in any casing - and an
+            entry containing a slash is treated as a MIME type, with a trailing wildcard like <b>image/*</b> covering
+            a whole group. It also generates the accept attribute when <b>Accept</b> is not set, which is why setting
+            it alone is usually all you need; set <b>Accept</b> explicitly only when the dialog filter should differ
+            from the rule.
         </div>
         <br />
         <div>Accept only (the dialog filters, but a dropped file of any type is still taken and uploaded):</div>
@@ -185,61 +187,27 @@
                        AllowedExtensions="@(new List<string> { "image/*", "application/pdf" })" />
     </DemoExample>
 
-    <DemoExample Title="MaxCount" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <DemoExample Title="Directory & Capture" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
         <div>
-            <b>MaxCount</b> caps how many files the list can hold - 3 in this example. Files arriving beyond the cap
-            stay visible but are marked as not allowed with the <b>MaxCountErrorMessage</b> and never uploaded, so
-            the user sees exactly which files did not make it instead of them disappearing silently. Only files that
-            pass the other validations consume a slot, so a file rejected for its size or type never pushes a good
-            file over the cap, and a file already uploading or uploaded keeps the slot it holds rather than being
-            taken back by a later selection. Combined with <b>Append</b> the cap applies to the whole accumulated
-            list, not just a single selection - and since the cap is re-evaluated on every change, removing a file
-            takes the next one waiting behind it back in.
-        </div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple Append MaxCount="3"
-                       ShowRemoveButton RemoveUrl="@RemoveUrl" />
-    </DemoExample>
-
-    <DemoExample Title="FileValidator" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
-        <div>
-            When the built-in checks are not enough, <b>FileValidator</b> runs a custom function for each newly
-            selected file after those checks pass. Returning an error message marks the file as not allowed and shows
-            the message under it - the file is never uploaded; returning null accepts the file. Any rule expressible
-            over the file's metadata works - this example rejects empty (zero-byte) files. A validator that throws
-            only invalidates its own file, using the exception message as the error text, rather than aborting the
-            whole selection.
-        </div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple FileValidator="@ValidateEmptyFile" />
-    </DemoExample>
-
-    <DemoExample Title="Directory" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-        <div>
-            <b>Directory</b> turns the picker into a folder picker: the dialog asks for a directory instead of a file
-            and every file inside it - and inside its subfolders, at any depth - lands in the list as a separate
-            upload with its own progress and status. It does the same for a drag and drop, walking a dropped folder
-            into its contents rather than ignoring it, which the plain file input cannot do on its own. The browser
-            warns the user before handing a whole folder over, and the usual validations still apply to every file
+            <b>Directory</b> turns the picker into a folder picker, and every file inside the chosen folder - and
+            inside its subfolders, at any depth - lands in the list as a separate upload. It does the same for a drop,
+            walking a dropped folder into its contents rather than ignoring it, which a plain file input cannot do.
+            The browser warns before handing a whole folder over, and the usual validations still apply to every file
             that comes out of it, so pairing it with <b>AllowedExtensions</b>, <b>MaxCount</b> or <b>MaxTotalSize</b>
-            is what keeps a stray folder from turning into a thousand uploads. Pair it with <b>ConcurrentUploads</b>
-            to keep the transfers orderly.
+            is what keeps a stray folder from turning into a thousand uploads.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop a folder" UploadUrl="@UploadUrl" Directory Multiple
-                       ConcurrentUploads="3" MaxCount="20" />
-    </DemoExample>
-
-    <DemoExample Title="Capture" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
         <div>
-            On a phone or a tablet, <b>Capture</b> asks the browser to open the camera or the microphone directly
-            instead of the file browser, which turns the uploader into a one-tap "take a photo and send it" control.
-            <b>"user"</b> asks for the front (selfie) camera and <b>"environment"</b> for the rear one; which one is
-            actually honored is up to the device, and a desktop browser ignores the attribute altogether and opens
-            the usual file dialog. Combine it with <b>Accept</b> to say what kind of capture is wanted - an image, a
-            video or an audio recording - and with <b>AutoUpload</b> so the shot goes out the moment it is taken.
+            <b>Capture</b> asks a phone or tablet to open the camera or the microphone instead of the file browser:
+            <b>"user"</b> for the front (selfie) camera and <b>"environment"</b> for the rear one. Which one is
+            honored is up to the device, and a desktop browser ignores it and opens the usual dialog. Combine it with
+            <b>Accept</b> to say what kind of capture is wanted and with <b>AutoUpload</b> so the shot goes out the
+            moment it is taken.
         </div>
         <br />
+        <BitFileUpload Label="Select or drag and drop a folder" UploadUrl="@UploadUrl" Directory Multiple
+                       MaxCount="20" Description="Up to 20 files out of the chosen folder." />
+        <br /><br />
         <BitFileUpload Label="Take a photo" UploadUrl="@UploadUrl" Accept="image/*" Capture="environment" AutoUpload
                        Description="Opens the rear camera on a mobile device." />
         <br />
@@ -247,48 +215,35 @@
                        Description="Opens the front camera on a mobile device." />
     </DemoExample>
 
-    <DemoExample Title="Preview" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <DemoExample Title="Image preview & dimensions" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            A file name is a poor way to tell one photo from another, so <b>ShowPreview</b> puts a thumbnail of every
-            selected image at the head of its file item, letting the user confirm they picked the right picture
-            before a single byte goes out. The thumbnail is produced entirely in the browser from an object URL, so
-            nothing is uploaded to render it and non-image files simply keep the plain item. The URL is also handed
-            back as soon as the file is removed or the component is reset, which is what keeps a long-lived page from
-            holding every picture ever picked in memory. <b>BitFileInfo.PreviewUrl</b> exposes the same URL for a
-            custom <b>FileViewTemplate</b>, and <b>Classes.Preview</b> / <b>Styles.Preview</b> restyle the built-in
-            thumbnail.
+            <b>ShowPreview</b> puts a thumbnail of every selected image at the head of its item, so the user can
+            confirm they picked the right picture before a byte goes out. It is produced in the browser from an
+            object URL - nothing is uploaded to render it - and the URL is handed back as soon as the file is removed
+            or the component is reset, which is what keeps a long-lived page from holding every picture ever picked.
+            <b>BitFileInfo.PreviewUrl</b> exposes the same URL to a custom <b>FileViewTemplate</b>.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop images" UploadUrl="@UploadUrl" Multiple ShowPreview
-                       Accept="image/*" ShowRemoveButton RemoveUrl="@RemoveUrl"
-                       Description="The selected images are previewed right in the list." />
-    </DemoExample>
-
-    <DemoExample Title="Image dimensions" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
         <div>
-            A size limit in bytes is a poor way to say "no tiny avatars" or "nothing bigger than 4K": what matters
-            for an image is its pixels, and a heavily compressed photo can be small in bytes and enormous on screen.
-            <b>ReadImageDimensions</b> decodes every selected image right in the browser and fills the
-            <b>Width</b> and <b>Height</b> of its <b>BitFileInfo</b> before the validations run, so a
-            <b>FileValidator</b> can turn an image away for its dimensions without a single byte leaving the
-            machine - and the rejected file stays in the list with its reason, exactly like any other rejection.
+            A limit in bytes is a poor way to say "nothing bigger than 4K": what matters for an image is its pixels.
+            <b>ReadImageDimensions</b> decodes every selected image in the browser and fills the <b>Width</b> and
+            <b>Height</b> of its <b>BitFileInfo</b> before the validations run, so a <b>FileValidator</b> can turn an
+            image away for its dimensions without a single byte leaving the machine. Decoding is not free, which is
+            why it is off by default and runs a few images at a time. Non-image files, and images the browser cannot
+            decode, keep both values null - a validator has to read that as "unknown" rather than as a failure.
         </div>
         <br />
-        <div>
-            Decoding is not free: a folder full of photos costs time and memory to walk through, which is why it is
-            off by default and why the decoding runs a few images at a time rather than all at once. Non-image
-            files, and images the browser cannot decode, simply keep both values null - a validator has to treat
-            that as "unknown" rather than as a failure. The values are also there for a custom
-            <b>FileViewTemplate</b> to render, as the second uploader below does.
-        </div>
-        <br />
-        <div>Between 200x200 and 4000x4000 pixels:</div>
+        <div>Preview with a dimension rule (between 200x200 and 4000x4000):</div>
         <br />
         <BitFileUpload Label="Select or drag and drop images" UploadUrl="@UploadUrl" Multiple ShowPreview
                        Accept="image/*" ReadImageDimensions FileValidator="@ValidateImageDimensions"
+                       ShowRemoveButton RemoveUrl="@RemoveUrl"
                        Description="Images between 200x200 and 4000x4000 pixels." />
         <br /><br />
-        <div>Showing the dimensions of each image:</div>
+        <div>
+            Rendering the dimensions in a custom item, with the <BitLink Href="#example17">FileViewTemplate</BitLink>
+            covered further down:
+        </div>
         <br />
         <BitFileUpload Label="Select or drag and drop images" UploadUrl="@UploadUrl" Multiple
                        Accept="image/*" ReadImageDimensions>
@@ -301,30 +256,14 @@
         </BitFileUpload>
     </DemoExample>
 
-    <DemoExample Title="Removable" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
-        <div>
-            <b>ShowRemoveButton</b> puts a remove button on each settled file item. A file whose bytes never reached
-            the server is simply dropped from the view, while a file that has (partially or fully) uploaded is
-            deleted from the server through a DELETE request to the <b>RemoveUrl</b>, carrying the file name as a
-            query string and the file id in the <b>BIT_FILE_ID</b> header; a non-success response marks the file with
-            the <b>FailedRemoveMessage</b> instead of pretending it is gone. <b>RemoveButtonTitle</b> localizes the
-            button tooltip and its accessible label.
-        </div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
-                       ShowRemoveButton RemoveUrl="@RemoveUrl" />
-    </DemoExample>
-
-    <DemoExample Title="Events" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
         <div>
-            Every stage of the process surfaces through a callback: <b>OnChange</b> fires whenever a file's status
-            changes, <b>OnInvalid</b> right after it whenever a selection carries rejected files - handy for driving
-            a summary or blocking a submit button - <b>OnUploading</b> right before a file's first request (the
-            natural place to attach per-file HTTP headers like below), <b>OnProgress</b> on every progress tick,
-            <b>OnUploadComplete</b> / <b>OnUploadFailed</b> when a file settles, <b>OnRemoveComplete</b> /
-            <b>OnRemoveFailed</b> for removals, and <b>OnAllUploadsComplete</b> once the whole batch has reached a
-            terminal state, which is what drives the message below. Try a file over 1 MB to see <b>OnInvalid</b> at
-            work.
+            Every stage surfaces through a callback: <b>OnChange</b> whenever a file's status changes, <b>OnInvalid</b>
+            right after it whenever a selection carries rejected files - handy for a summary or for blocking a submit
+            button - <b>OnUploading</b> right before a file's first request (the natural place to attach per-file HTTP
+            headers), <b>OnProgress</b> on every progress tick, <b>OnUploadComplete</b> / <b>OnUploadFailed</b> when a
+            file settles, <b>OnRemoveComplete</b> / <b>OnRemoveFailed</b> for removals, and <b>OnAllUploadsComplete</b>
+            once the whole batch has reached a terminal state. Try a file over 1 MB to see <b>OnInvalid</b> at work.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple MaxSize="1024 * 1024 * 1"
@@ -336,13 +275,40 @@
         <div>@onInvalidText</div>
     </DemoExample>
 
-    <DemoExample Title="Http requests" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+    <DemoExample Title="Chunked" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+        <div>
+            <b>ChunkedUpload</b> slices each file and sends it as a series of sequential requests instead of one
+            monolithic one, which is what makes pausing, resuming and recovering large uploads practical: a paused or
+            failed file resumes from the last successfully uploaded chunk, so a dropped connection costs one chunk
+            instead of the whole transfer. <b>ChunkSize</b> pins the size of each slice in bytes, while
+            <b>AutoChunkSize</b> adapts it to the observed connection speed between 512 KB and 10 MB - large enough
+            on a fast link to keep the request overhead negligible, small enough on a slow one to keep the progress
+            moving and a retry cheap.
+        </div>
+        <br />
         <div>
-            The upload and remove requests are fully customizable. Static <b>UploadRequestHttpHeaders</b> /
-            <b>RemoveRequestHttpHeaders</b> and <b>UploadRequestQueryStrings</b> / <b>RemoveRequestQueryStrings</b>
-            attach headers and query strings to the respective requests, and <b>UploadRequestFormFields</b> adds
-            extra multipart fields next to the file content itself - the target folder, an album id, a caption -
-            for the endpoints that read their metadata from the form rather than from the URL.
+            Every chunk request carries what the server needs to reassemble the file: the <b>BIT_FILE_ID</b> header
+            correlating the chunks of one file, and the byte range both as the standard <b>Content-Range</b> header
+            (<b>bytes from-to/total</b>) and as the plain <b>BIT_CHUNK_FROM</b>, <b>BIT_CHUNK_TO</b> and
+            <b>BIT_FILE_SIZE</b> headers for handlers that would rather not parse it. Writing each chunk at its own
+            offset rather than blindly appending is what makes the server correct in the face of a retried chunk.
+            CORS treats these as custom request headers, so a cross-origin endpoint has to allow them.
+        </div>
+        <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload />
+        <br /><br />
+        <div>Adaptive chunk sizing:</div>
+        <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload AutoChunkSize />
+    </DemoExample>
+
+    <DemoExample Title="Http requests" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+        <div>
+            Static <b>UploadRequestHttpHeaders</b> / <b>RemoveRequestHttpHeaders</b> and
+            <b>UploadRequestQueryStrings</b> / <b>RemoveRequestQueryStrings</b> attach headers and query strings to
+            the respective requests, and <b>UploadRequestFormFields</b> adds extra multipart fields next to the file
+            content itself - a target folder, an album id, a caption - for the endpoints that read their metadata
+            from the form rather than from the URL.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
@@ -353,13 +319,12 @@
                        RemoveRequestHttpHeaders="@(new Dictionary<string, string>{ {"header2", "value2" } })" />
         <br /><br />
         <div>
-            Each of the three has an async <b>...Provider</b> counterpart, and the difference is not only that it
-            is a function: a provider is invoked right before <i>every single request</i> - each file, and each
-            chunk of a chunked file - while the static values are fixed once, when the files are selected. That is
-            what makes a provider the right place for anything that expires: an access token that has to be fresh
-            when the request actually goes out, or a presigned URL good for one upload only, which
-            <b>UploadUrlProvider</b> mints for the endpoint itself. A value that never changes belongs in the
-            static parameter instead, since a provider costs an await per request.
+            Each has an async <b>...Provider</b> counterpart, and the difference is not only that it is a function:
+            a provider is invoked before <i>every single request</i> - each file, and each chunk of a chunked file -
+            while the static values are fixed once, when the files are selected. That is what makes a provider the
+            right place for anything that expires: an access token that has to be fresh when the request goes out, or
+            a presigned URL good for one upload only, which <b>UploadUrlProvider</b> mints for the endpoint itself. A
+            value that never changes belongs in the static parameter, since a provider costs an await per request.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple ChunkedUpload
@@ -368,13 +333,12 @@
         <div>Requests so far: @tokenRequestCount</div>
         <br /><br />
         <div>
-            The transport itself is configurable too: <b>UploadRequestHttpMethod</b> switches the verb ("POST" by
-            default - a PUT is what presigned URL flows usually expect), <b>UploadFormFieldName</b> renames the form
-            field carrying the file content ("file" by default), <b>WithCredentials</b> sends cookies and
-            authorization headers along on cross-origin requests, and <b>UploadTimeout</b> fails a request - each
-            file or chunk - that takes longer than the given time. On the other side,
-            <b>RemoveRequestHttpMethod</b> does the same for the removal, whose "DELETE" some APIs would rather
-            receive as a "POST".
+            The transport is configurable too: <b>UploadRequestHttpMethod</b> switches the verb ("POST" by default -
+            a PUT is what presigned URL flows usually expect), <b>UploadFormFieldName</b> renames the form field
+            carrying the file content ("file" by default), <b>WithCredentials</b> sends cookies and authorization
+            headers on cross-origin requests, and <b>UploadTimeout</b> fails a request - each file or chunk - that
+            takes longer than the given time. <b>RemoveRequestHttpMethod</b> does the same for the removal, whose
+            "DELETE" some APIs would rather receive as a "POST".
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
@@ -386,57 +350,27 @@
                        UploadTimeout="TimeSpan.FromMinutes(10)" />
     </DemoExample>
 
-    <DemoExample Title="Chunked" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
-        <div>
-            <b>ChunkedUpload</b> slices each file and sends it as a series of sequential requests instead of one
-            monolithic one, which is what makes pausing, resuming and recovering large uploads practical: a paused or
-            failed file resumes from the last successfully uploaded chunk rather than starting over, so a dropped
-            connection costs one chunk instead of the whole transfer. <b>ChunkSize</b> pins the size of each slice in
-            bytes, while <b>AutoChunkSize</b> adapts it to the observed connection speed on the fly, between 512 KB
-            and 10 MB - large enough on a fast link to keep the request overhead negligible, small enough on a slow
-            one to keep the progress moving and a retry cheap.
-        </div>
-        <br />
+    <DemoExample Title="Retry" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>
-            The server side reassembles the file, and every chunk request carries what it needs to do so reliably:
-            the <b>BIT_FILE_ID</b> header correlating the chunks of one file, and the byte range of the chunk both as
-            the standard <b>Content-Range</b> header (<b>bytes from-to/total</b>) and as the plain
-            <b>BIT_CHUNK_FROM</b>, <b>BIT_CHUNK_TO</b> and <b>BIT_FILE_SIZE</b> headers for the handlers that would
-            rather not parse it. Writing each chunk at its own offset rather than blindly appending is what makes the
-            server correct in the face of a retried chunk. Note that CORS treats these as custom request headers, so
-            a cross-origin endpoint has to allow them.
-        </div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload />
-        <br /><br />
-        <div>Adaptive chunk sizing:</div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload AutoChunkSize />
-    </DemoExample>
-
-    <DemoExample Title="Retry" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
-        <div>
-            Networks fail, so a professional uploader plans for it. <b>AutoRetries</b> retries a failed upload
-            automatically - up to the given number of times per file, waiting <b>AutoRetryDelay</b> before each
-            attempt - and in the chunked mode every retry resumes from the last successfully uploaded chunk instead
-            of starting over. Pausing or canceling a file while a retry is still waiting out its delay wins over that
+            <b>AutoRetries</b> retries a failed upload automatically - up to the given number of times per file,
+            waiting <b>AutoRetryDelay</b> before each attempt - and in the chunked mode every retry resumes from the
+            last uploaded chunk. Pausing or canceling a file while a retry is waiting out its delay wins over that
             retry, so the outcome the user asked for is the one that stands.
         </div>
         <br />
         <div>
-            Not every failure deserves another attempt, so the budget is only spent where a second try could go
-            differently: network errors, timeouts, 408, 429 and the 5xx server errors are retried, while the other
-            4xx - a 404 pointing nowhere, a 413 that is simply too large, a 401 - settle the file immediately rather
-            than repeating an identical doomed request. <b>ShouldAutoRetry</b> replaces that rule with your own,
-            receiving the file and the status code and returning whether to retry.
+            The budget is only spent where a second try could go differently: network errors, timeouts, 408, 429 and
+            the 5xx server errors are retried, while the other 4xx - a 404 pointing nowhere, a 413 that is simply too
+            large, a 401 - settle the file immediately rather than repeating an identical doomed request.
+            <b>ShouldAutoRetry</b> replaces that rule with your own, receiving the file and the status code.
         </div>
         <br />
         <div>
-            Once the automatic budget is exhausted the file settles as failed, and the item offers a retry button -
-            distinct from the plain upload button of a never-started file, both in its icon and in its wording, so a
-            second attempt never reads as a first one. Pressing it tries again with a fresh automatic budget, exactly
-            like calling <b>Upload</b> with that file from code does. <b>RetryIcon</b>, <b>RetryIconName</b> and
-            <b>RetryButtonTitle</b> restyle and localize it, falling back to their upload counterparts when unset.
+            Once the budget is exhausted the file settles as failed and the item offers a retry button - distinct
+            from the upload button of a never-started file in both icon and wording, so a second attempt never reads
+            as a first one. Pressing it tries again with a fresh budget, exactly like calling <b>Upload(file)</b>
+            does. <b>RetryIcon</b>, <b>RetryIconName</b> and <b>RetryButtonTitle</b> restyle and localize it, falling
+            back to their upload counterparts when unset.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
@@ -459,29 +393,27 @@
                        RetryButtonTitle="Try again" />
     </DemoExample>
 
-    <DemoExample Title="ConcurrentUploads" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+    <DemoExample Title="ConcurrentUploads" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
         <div>
-            By default every file of a batch is put on the wire at once, which is the fastest option on a healthy
-            connection but not always the kindest one: browsers only keep a handful of connections open per host,
-            and a server behind a rate limit or a slow disk would rather not meet fifty simultaneous uploads.
-            <b>ConcurrentUploads</b> caps how many files may be in flight at the same time; the rest wait in a queue
-            in selection order and each one starts the moment a slot frees up - whether the file holding it completed,
-            failed, was canceled or was merely paused. Set it to 0 (the default) to keep starting everything at once.
+            By default every file of a batch goes on the wire at once, which is the fastest option on a healthy
+            connection but not always the kindest: browsers keep only a handful of connections open per host, and a
+            server behind a rate limit would rather not meet fifty simultaneous uploads. <b>ConcurrentUploads</b>
+            caps how many files may be in flight; the rest wait in a queue in selection order and each starts the
+            moment a slot frees up - whether the file holding it completed, failed, was canceled or merely paused.
+            Set it to 0 (the default) to start everything at once.
         </div>
         <br />
         <div>
-            The cap counts files, not requests: a chunked file holds its single slot for the whole run of its chunks
-            rather than going back to the end of the queue between two of them. Note that the queue only governs the
-            start of an upload, so a file started explicitly through <b>Upload(file)</b> waits its turn just like a
-            file of a batch does.
+            The cap counts files, not requests: a chunked file holds its slot for the whole run of its chunks rather
+            than going back to the end of the queue between two of them. The queue only governs the start of an
+            upload, so a file started explicitly through <b>Upload(file)</b> waits its turn too.
         </div>
         <br />
         <div>
-            A file waiting for its turn says so rather than looking exactly like one nobody asked to upload: its
-            item shows the <b>QueuedUploadMessage</b> - "Waiting to upload" by default, and the place to translate
-            it - drops the start button, since starting something already on its way would do nothing, and keeps a
-            cancel button so it can be called off before its turn ever comes. <b>BitFileInfo.IsQueued</b> exposes
-            the same state to a custom <b>FileViewTemplate</b>.
+            A waiting file says so instead of looking like one nobody asked to upload: its item shows the
+            <b>QueuedUploadMessage</b>, drops the start button and keeps a cancel button so it can be called off
+            before its turn comes. <b>BitFileInfo.IsQueued</b> exposes the same state to a custom
+            <b>FileViewTemplate</b>.
         </div>
         <br />
         <div>Two files at a time:</div>
@@ -494,50 +426,36 @@
                        ConcurrentUploads="1" QueuedUploadMessage="In the queue…" />
     </DemoExample>
 
-    <DemoExample Title="Overall progress" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
-        <div>
-            Besides the per-file progress, the component aggregates the batch as a whole: <b>TotalSize</b> and
-            <b>TotalUploadedSize</b> expose the combined byte counts of the files that are actually being uploaded -
-            rejected and removed files do not count - and <b>OverallUploadProgress</b> turns them into a single
-            percentage, weighting every file by its size. Rendering it is a matter of re-reading those properties
-            whenever <b>OnProgress</b> or <b>OnChange</b> fires, which is exactly what drives the BitProgress below.
-            Select several files and upload them all to see the combined bar move.
-        </div>
-        <br />
-        <BitFileUpload @ref="overallFileUpload" Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple
-                       OnChange="@(_ => StateHasChanged())" OnProgress="@(_ => StateHasChanged())" />
-        <br />
-        <BitProgress Percent="@(overallFileUpload?.OverallUploadProgress ?? 0)" ShowPercentNumber />
-    </DemoExample>
-
-    <DemoExample Title="Speed & time remaining" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
+    <DemoExample Title="Overall progress, speed & ETA" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div>
-            A percentage answers "how far along is this"; what a user waiting on a large upload actually wants to
-            know is "how much longer". Every running file measures the speed of the request currently in flight and
-            exposes it on its <b>BitFileInfo</b>: <b>UploadSpeed</b> in bytes per second and <b>RemainingTime</b> as
-            a <b>TimeSpan</b> derived from it and the bytes still to send. Both are null while a file is not on the
-            wire - before it starts, once it settles, and for the first fraction of a second of a request, where a
-            reading taken over almost no time would say nothing but a huge number.
+            Besides the per-file progress, the component aggregates the batch: <b>TotalSize</b> and
+            <b>TotalUploadedSize</b> expose the combined byte counts of the files actually being uploaded - rejected
+            and removed files do not count - and <b>OverallUploadProgress</b> turns them into one percentage,
+            weighting every file by its size.
         </div>
         <br />
         <div>
-            They are updated on every progress tick, so rendering them is a matter of re-reading them from
-            <b>OnProgress</b>, as the summary below does. In the chunked mode the speed is measured over the chunk
-            in flight, which is what makes it follow a connection that speeds up or slows down mid-file instead of
-            averaging the whole transfer into a number that stops reacting.
+            A percentage answers "how far along"; what a user waiting on a large upload wants is "how much longer".
+            Every running file measures the speed of the request in flight and exposes <b>UploadSpeed</b> (bytes per
+            second) and <b>RemainingTime</b> on its <b>BitFileInfo</b>. Both are null while a file is not on the wire
+            - before it starts, once it settles, and for the first fraction of a second, where a reading taken over
+            almost no time would say nothing but a huge number. In the chunked mode the speed is measured over the
+            chunk in flight, so it follows a connection that changes mid-file instead of averaging it away.
         </div>
         <br />
         <div>
-            The batch has the same two numbers of its own: <b>TotalUploadSpeed</b> adds up the speed of every file
-            currently on the wire - what the connection as a whole is carrying, which is the honest figure when
-            several files are uploading at once - and <b>OverallRemainingTime</b> divides the bytes still to go by
-            it. Both are null while nothing is uploading, which is the difference between "not moving" and
-            "moving at zero".
+            The batch has the same two numbers: <b>TotalUploadSpeed</b> adds up every file on the wire - what the
+            connection as a whole is carrying - and <b>OverallRemainingTime</b> divides the bytes still to go by it.
+            Both are null while nothing is uploading, which is the difference between "not moving" and "moving at
+            zero". All of them update on every progress tick, so rendering them is a matter of re-reading them from
+            <b>OnProgress</b>.
         </div>
         <br />
         <BitFileUpload @ref="speedFileUpload" Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple
                        OnChange="@(_ => StateHasChanged())" OnProgress="@(_ => StateHasChanged())" />
         <br />
+        <BitProgress Percent="@(speedFileUpload?.OverallUploadProgress ?? 0)" ShowPercentNumber />
+        <br />
         @foreach (var file in SpeedFiles)
         {
             <div>
@@ -555,28 +473,22 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="FileSizeFormatter" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
+    <DemoExample Title="File list display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
         <div>
-            Each file item shows its uploaded and total size through a built-in humanizer that speaks English and
-            counts in binary units. <b>FileSizeFormatter</b> takes that decision over: it receives a size in bytes
-            and returns whatever text should appear, which is where a localized unit name, a different rounding, or
-            the decimal base some platforms prefer belongs. The example below drops down to raw byte counts with
-            thousands separators.
+            <b>FileSizeFormatter</b> takes over the built-in humanizer, which speaks English and counts in binary
+            units: it receives a size in bytes and returns whatever text should appear - a localized unit name, a
+            different rounding, or the decimal base some platforms prefer.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple
                        FileSizeFormatter="@(size => $"{size:N0} bytes")" />
-    </DemoExample>
-
-    <DemoExample Title="HideFileView" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26">
+        <br /><br />
         <div>
-            <b>HideFileView</b> takes the built-in file list away without taking the files with it: they are still
-            selected, still validated, still uploaded and still reported through <b>Files</b> and the callbacks -
-            they are simply not drawn. That is what you want when the surrounding page already shows the attachments
-            in its own layout, when the uploader has to collapse into a single button, or when the list belongs
-            somewhere else on the screen entirely. The example below renders its own summary from the <b>OnChange</b>
-            callback while the component itself shows nothing but the browse button. Reach for
-            <b>FileViewTemplate</b> instead when the list should stay where it is and only look different.
+            <b>HideFileView</b> takes the list away without taking the files with it: they are still selected,
+            validated, uploaded and reported through <b>Files</b> and the callbacks - they are simply not drawn. That
+            is what the surrounding page needs when it shows the attachments in its own layout, or when the uploader
+            has to collapse into a single button. Reach for <b>FileViewTemplate</b> instead when the list should stay
+            where it is and only look different.
         </div>
         <br />
         <BitFileUpload @ref="hiddenViewFileUpload" Label="Select or drag and drop files" UploadUrl="@UploadUrl"
@@ -599,26 +511,22 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example27RazorCode" CsharpCode="@example27CsharpCode" Id="example27">
+    <DemoExample Title="Templates" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
         <div>
-            The default UI can be swapped out entirely: <b>LabelTemplate</b> replaces the browse button - here with a
-            full drop-zone panel that hides itself once files are selected - and <b>FileViewTemplate</b> replaces
-            each item of the file list, receiving the file info as its context with its name, size, progress, speed
-            and status all available for rendering. The template is only asked for the files that are actually in
-            the list, so a removed file never leaves an empty item behind. Replacing the browse button also replaces
-            the built-in dashed drop indicator that lives on it, so a custom label should bring its own drag
-            feedback: <b>Classes.Dragging</b> puts a class on the root element for as long as files hover over the
-            component.
+            <b>LabelTemplate</b> replaces the browse button - here with a full drop-zone panel that hides itself once
+            files are selected - and <b>FileViewTemplate</b> replaces each item of the list, receiving the file info
+            as its context with its name, size, progress, speed and status. Replacing the browse button also replaces
+            the dashed drop indicator that lives on it, so a custom label should bring its own drag feedback:
+            <b>Classes.Dragging</b> puts a class on the root element for as long as files hover over the component.
         </div>
         <br />
         <div>
-            Two things are worth carrying over from the default UI when replacing it. The controls should be real
-            <b>button</b> elements rather than clickable divs or icons, so they stay reachable with Tab and can be
-            activated with Enter or Space, and each of them should name the file it acts on through an aria-label -
-            a list of identical "Remove" buttons tells a screen reader user nothing about which file they are on.
-            And since the context is the file itself, the per-file overloads are the ones to call:
-            <b>Upload(file)</b> and <b>RemoveFile(file)</b> act on that one file, while their no-argument forms
-            would sweep through the whole batch.
+            Two things are worth carrying over from the default UI. The controls should be real <b>button</b>
+            elements rather than clickable divs, so they stay reachable with Tab and can be activated with Enter or
+            Space, and each should name the file it acts on through an aria-label - a list of identical "Remove"
+            buttons tells a screen reader user nothing about which file they are on. And since the context is the
+            file itself, call the per-file overloads: <b>Upload(file)</b> and <b>RemoveFile(file)</b> act on that one
+            file, while their no-argument forms sweep through the whole batch.
         </div>
         <br />
         <div>
@@ -707,33 +615,31 @@
         <BitButton OnClick="HandleUploadOnClick">Upload</BitButton>
     </DemoExample>
 
-    <DemoExample Title="Public API" RazorCode="@example28RazorCode" CsharpCode="@example28CsharpCode" Id="example28">
+    <DemoExample Title="Public API" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
         <div>
             The component can be driven entirely from code: <b>Browse</b> opens the file dialog (here the built-in
-            browse button is hidden with <b>HideLabel</b> and replaced by external BitButtons), <b>Upload</b> starts
-            the upload of a specific file or every file, <b>PauseUpload</b> and <b>CancelUpload</b> stop them,
-            <b>RemoveFile</b> removes files, and <b>Reset</b> clears the whole state. Each of them takes a single
-            file or, with no argument, applies to the whole batch. <b>Files</b> exposes the current selection with
-            each file's status and progress, and <b>UploadStatus</b> reports the state of the batch as a whole -
-            pending until the first upload starts, in progress from then on, and completed once every file has
-            reached a terminal state.
+            button is hidden with <b>HideLabel</b> and replaced by external BitButtons), <b>Upload</b> starts the
+            upload, <b>PauseUpload</b> and <b>CancelUpload</b> stop it, <b>RemoveFile</b> removes files and
+            <b>Reset</b> clears the whole state. Each takes a single file or, with no argument, the whole batch.
+            <b>Files</b> exposes the current selection with each file's status and progress, and <b>UploadStatus</b>
+            reports the batch as a whole - pending until the first upload starts, in progress from then on, and
+            completed once every file has reached a terminal state.
         </div>
         <br />
         <div>
             The difference between the two ways of stopping is what happens next. <b>PauseUpload</b> applies to the
-            files that are actually on their way: it aborts the in-flight request and keeps the bytes that made it,
-            so calling <b>Upload</b> again resumes from there - from the last completed chunk in the chunked mode -
-            and it takes a file still waiting in the concurrency queue back out of that queue. A file nobody asked
-            to upload has nothing to pause, so it is left exactly as it is.
+            files actually on their way: it aborts the in-flight request and keeps the bytes that made it, so
+            <b>Upload</b> resumes from there - from the last completed chunk in the chunked mode - and it takes a
+            file still waiting in the concurrency queue back out of that queue. A file nobody asked to upload has
+            nothing to pause, so it is left as it is.
         </div>
         <br />
         <div>
-            <b>CancelUpload</b> settles the file as canceled instead, and does so immediately whether it was
-            running, waiting in the queue, paused or merely selected, so the outcome is visible on every file rather
-            than being recorded as an intention on some of them. Files that have already settled are left alone: a
-            completed upload cannot be taken back from the server by anything happening on this side, and calling
-            off a file that already failed would only replace the reason it failed with a less useful one. A
-            canceled file can still be started again later, and its item offers the retry button for exactly that.
+            <b>CancelUpload</b> settles the file as canceled instead, and does so immediately whether it was running,
+            queued, paused or merely selected. Files that have already settled are left alone: a completed upload
+            cannot be taken back from the server by anything on this side, and calling off a file that already failed
+            would only replace the reason it failed with a less useful one. A canceled file can be started again
+            later, and its item offers the retry button for exactly that.
         </div>
         <br />
         <BitFileUpload @ref="bitFileUploadWithBrowseFile" HideLabel Multiple
@@ -749,37 +655,43 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Accessibility" RazorCode="@example29RazorCode" CsharpCode="@example29CsharpCode" Id="example29">
+    <DemoExample Title="Accessibility" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
         <div>
-            The BitFileUpload is accessible out of the box: the browse button is a real button - focusable with Tab
-            and activated with Enter or Space - the hidden native input points to it via aria-labelledby, the file
-            list carries list and listitem roles, every action button (upload, pause, cancel, remove) gets an
-            aria-label naming the file it acts on, and the progress bar exposes its percentage through the
-            progressbar role. A visually hidden live region announces the selection and every upload outcome, so a
-            screen reader user hears how many files were taken, which uploads succeeded and which failed without
-            having to go looking. <b>AnnouncementProvider</b> replaces that built-in English sentence with text of
-            your own - the natural place to translate it or to word it around your domain, as the second example
-            does. <b>AriaLabel</b> labels the browse button, overriding its visible text for assistive technologies
-            when a short label does not say enough on its own.
+            The whole control is operable from the keyboard and every interactive part shows a focus ring: the browse
+            button is a real button - Tab to it, Enter or Space to open the dialog - and each file item's upload,
+            pause, cancel and remove buttons follow it in the tab order, each with an aria-label naming the file it
+            acts on. An action that takes its own button out of the DOM hands the focus on rather than dropping it:
+            pausing moves it to the resume button that replaced it, and removing a file moves it to the item that
+            takes its place, or to the browse button when the list empties.
+        </div>
+        <br />
+        <div>
+            The list carries list and listitem roles and is named by <b>FileListAriaLabel</b>; the progress bar
+            exposes its percentage through the progressbar role; and a visually hidden live region announces the
+            selection and every upload outcome, so a screen reader user hears how many files were taken and which
+            uploads succeeded or failed without going looking. <b>AnnouncementProvider</b> replaces that built-in
+            English sentence - the place to translate it or word it around your domain - and <b>AriaLabel</b> labels
+            the browse button when its visible text does not say enough on its own.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
                        AriaLabel="Select a document to upload" />
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple
+                       ShowRemoveButton RemoveUrl="@RemoveUrl"
+                       FileListAriaLabel="Documents to upload"
                        AnnouncementProvider="@AnnounceUploads" />
     </DemoExample>
 
-    <DemoExample Title="Variant" RazorCode="@example30RazorCode" CsharpCode="@example30CsharpCode" Id="example30">
+    <DemoExample Title="Variant" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
         <div>
-            The browse button is the visual weight the component carries on a page, and <b>Variant</b> decides how
-            much of it there is. <b>Fill</b> - the default - paints the button in a solid block of the
-            <BitLink Href="#example31">Color</BitLink> and is the right call when uploading is the main thing the
-            screen is for. <b>Outline</b> keeps only the rule around it in that color and fills in on hover, for an
-            uploader sitting among other form fields that should not shout over them. <b>Text</b> drops both the rule
-            and the fill, leaving a colored label for the places where the uploader is a secondary affordance. The
-            drop indicator and the file list follow the variant along, and a disabled component drops the role colors
-            entirely for the neutral disabled look, whichever variant it uses.
+            The browse button is the visual weight the component carries, and <b>Variant</b> decides how much of it
+            there is. <b>Fill</b> - the default - paints it in a solid block of the
+            <BitLink Href="#example22">Color</BitLink>, for when uploading is the main thing the screen is for.
+            <b>Outline</b> keeps only the rule around it, for an uploader among other form fields. <b>Text</b> drops
+            both rule and fill, for a secondary affordance. The drop indicator and the file list follow along, and a
+            disabled component drops the role colors entirely for the neutral disabled look, whichever variant it
+            uses.
         </div>
         <br />
         <BitChoiceGroup @bind-Value="variant" Horizontal TItem="BitChoiceGroupOption<BitVariant>" TValue="BitVariant">
@@ -793,15 +705,38 @@
         <BitFileUpload Label="Disabled" UploadUrl="@UploadUrl" Variant="variant" IsEnabled="false" />
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example31RazorCode" CsharpCode="@example31CsharpCode" Id="example31">
+    <DemoExample Title="Cascading parameters" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
         <div>
-            <b>Color</b> picks the role color the component speaks in. It is not only the browse button: the dashed
-            drop indicator, the progress bar of every running file, the paused status message, the removal spinner
-            and the hovered action buttons all take it, so the whole control reads as one piece instead of a themed
-            button next to a default-blue list. All the standard bit color roles are available - the semantic ones
-            (Primary, Secondary, Tertiary, Info, Success, Warning, SevereWarning, Error) as well as the background,
-            foreground and border families - each of them carrying its own hover and active shades and its own
-            readable on-color for the label.
+            <b>BitParams</b> carries a <b>BitFileUploadParams</b> down to every file upload under it, so a form, a
+            card or a whole page sets the shared endpoint, the shared limits and the shared look once instead of on
+            every uploader. What it carries is a default and not an override: an uploader that writes a parameter for
+            itself keeps its own value, and only what it left unset is filled in from the cascade - which is what
+            lets one step out of the group without the group having to know about it. Every parameter is on the
+            params object and each is filled in on its own, so one uploader can take its <b>UploadUrl</b> from the
+            cascade and its <b>MaxSize</b> from its own markup.
+        </div>
+        <br />
+        <div class="example-content">
+            <BitParams Parameters="@fileUploadParams">
+                <BitFileUpload Label="Takes the endpoint, the limits and the look from the cascade" />
+                <BitFileUpload Label="So does this one, without repeating any of it" />
+                <BitFileUpload Label="Its own Variant and MaxSize, the cascaded rest"
+                               Variant="BitVariant.Fill" MaxSize="1024 * 1024 * 1" />
+            </BitParams>
+        </div>
+        <br />
+        <div class="example-content">
+            <BitFileUpload Label="Outside the cascade, and back to the defaults" UploadUrl="@UploadUrl" />
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Color" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+        <div>
+            <b>Color</b> picks the role the component speaks in, and it is not only the browse button: the dashed
+            drop indicator, the progress bar of every running file, the paused status message, the removal spinner,
+            the hovered action buttons and every focus ring take it too, so the whole control reads as one piece.
+            All the standard bit color roles are available - the semantic ones as well as the background, foreground
+            and border families - each carrying its own hover, active and focus shades and its own readable on-color.
         </div>
         <br />
         <div class="upload-grid">
@@ -830,15 +765,15 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example32RazorCode" CsharpCode="@example32CsharpCode" Id="example32">
+    <DemoExample Title="External Icons" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
         <div>
             The action button icons are not limited to the built-in icon font: <b>UploadIcon</b>, <b>RetryIcon</b>,
             <b>PauseIcon</b>, <b>CancelIcon</b> and <b>RemoveIcon</b> take a
-            <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> or a raw CSS class string that can point at any icon
-            library whose stylesheet is loaded, like FontAwesome or Bootstrap Icons below. Use
-            <b>BitIconInfo.Fa()</b>, <b>BitIconInfo.Bi()</b> or <b>BitIconInfo.Css()</b> to build one, or stick with
-            the built-in font and just pick different icons via the <b>...IconName</b> counterparts. Upload a file
-            against a failing endpoint to see the retry icon take the place of the upload one.
+            <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> or a raw CSS class string pointing at any icon
+            library whose stylesheet is loaded. Use <b>BitIconInfo.Fa()</b>, <b>BitIconInfo.Bi()</b> or
+            <b>BitIconInfo.Css()</b> to build one, or stick with the built-in font and pick different icons via the
+            <b>...IconName</b> counterparts. Upload against a failing endpoint to see the retry icon take the place
+            of the upload one.
         </div>
 
         <br />
@@ -887,14 +822,13 @@
                        RemoveIcon="@BitIconInfo.Bi("trash")" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example33RazorCode" CsharpCode="@example33CsharpCode" Id="example33">
+    <DemoExample Title="Size" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
         <div>
             <b>Size</b> scales the whole control in one move - the height, padding and font of the browse button, the
-            text of the file items and their size line, the action buttons and their icons, and the image preview
-            thumbnails all step together, so a <b>Small</b> uploader tucked into a dense form and a <b>Large</b> one
-            headlining a drop area both stay internally proportioned. <b>Medium</b> is the default. The dimensions
-            come from CSS custom properties on the root element, so a size can still be fine-tuned from
-            <b>Styles</b> without redefining the whole scale.
+            text of the file items and their size line, the action buttons and their icons, and the preview
+            thumbnails all step together, off the same control-height and icon tokens every other bit control reads.
+            <b>Medium</b> is the default. Each dimension is also a public CSS variable, so one of them can be
+            fine-tuned without redefining the scale.
         </div>
         <br />
         <BitFileUpload Label="Small" UploadUrl="@UploadUrl" Size="BitSize.Small" ShowRemoveButton RemoveUrl="@RemoveUrl" />
@@ -904,14 +838,13 @@
         <BitFileUpload Label="Large" UploadUrl="@UploadUrl" Size="BitSize.Large" ShowRemoveButton RemoveUrl="@RemoveUrl" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example34RazorCode" Id="example34">
+    <DemoExample Title="Style & Class" RazorCode="@example25RazorCode" Id="example25">
         <div>
-            <b>Style</b> and <b>Class</b> land on the root element, which inline styles and a single class cover
-            well. For anything deeper, <b>Styles</b> and <b>Classes</b> reach the individual parts - the browse
-            button, the description, the file list, each file item, its name, size, percentage, progress bar, status
-            message and every action button and icon - and their <b>Dragging</b> entry applies to the root element
-            only while files are being dragged over the component, which is how the examples below restyle the drop
-            state without touching the idle look.
+            <b>Style</b> and <b>Class</b> land on the root element. For anything deeper, <b>Styles</b> and
+            <b>Classes</b> reach the individual parts - the browse button, the description, the file list, each item,
+            its name, size, percentage, progress bar, status message and every action button and icon - and their
+            <b>Dragging</b> entry applies to the root only while files are dragged over the component, which is how
+            the examples below restyle the drop state without touching the idle look.
         </div>
 
         <br /><br />
@@ -946,14 +879,45 @@
                                RemoveButton = "custom-remove"
                            })" />
         </div>
+
+        <br /><br /><br />
+
+        <div><b>CSS variables</b>:</div>
+        <br />
+        <div>
+            The public <b>--bit-FileUpload-*</b> variables (listed in the API section below) are read off the root
+            element, so the same declaration re-skins one instance from its <b>Style</b>, a section of the page from
+            any ancestor, or the whole app from <b>:root</b> - without a single selector of your own. They inherit,
+            which is what makes the middle case work, and each falls back to the theme value when unset.
+        </div>
+        <br />
+        <div>
+            <BitFileUpload Label="One instance, restyled through its own Style"
+                           UploadUrl="@UploadUrl" Multiple ShowRemoveButton RemoveUrl="@RemoveUrl"
+                           Style="--bit-FileUpload-label-radius: 2rem;
+                                  --bit-FileUpload-label-background: #7c3aed;
+                                  --bit-FileUpload-label-hover-background: #6d28d9;
+                                  --bit-FileUpload-item-radius: 1rem;
+                                  --bit-FileUpload-item-border-color: #ddd6fe;
+                                  --bit-FileUpload-progress-color: #7c3aed;
+                                  --bit-FileUpload-action-hover-color: #7c3aed;
+                                  --bit-FileUpload-focus-color: #7c3aed;" />
+            <br />
+            <div class="custom-vars">
+                <BitFileUpload Label="Two uploaders under one ancestor that sets the variables"
+                               UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+                <BitFileUpload Label="Neither of them declares anything of its own"
+                               UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+            </div>
+        </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example35RazorCode" Id="example35">
+    <DemoExample Title="RTL" RazorCode="@example26RazorCode" Id="example26">
         <div>
-            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout for right-to-left languages - the browse
-            button, the file names, sizes, progress bars and action buttons all follow - and the localizable texts
-            (the <b>Label</b>, the status messages and the button titles) complete the picture, so the BitFileUpload
-            reads naturally inside an RTL page like the Farsi example below.
+            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout - the browse button, the file names,
+            sizes, progress bars and action buttons all follow - and the localizable texts (the <b>Label</b>, the
+            status messages and the button titles) complete the picture, so the BitFileUpload reads naturally inside
+            an RTL page like the Farsi example below.
         </div>
         <br />
         <div dir="rtl">
@@ -961,6 +925,7 @@
                            Label="انتخاب یا رها کردن فایل"
                            UploadUrl="@UploadUrl"
                            ShowRemoveButton RemoveUrl="@RemoveUrl"
+                           FileListAriaLabel="فایل‌های انتخاب‌شده"
                            UploadButtonTitle="بارگذاری"
                            PauseButtonTitle="توقف"
                            CancelButtonTitle="لغو"
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index 2595974f10a..0e684b0a09f 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -1,4 +1,4 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileUpload;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileUpload;
 
 public partial class BitFileUploadDemo
 {
@@ -211,6 +211,13 @@ public partial class BitFileUploadDemo
             Description = "The message shown for failed file uploads."
         },
         new()
+        {
+            Name = "FileListAriaLabel",
+            Type = "string",
+            DefaultValue = "\"Selected files\"",
+            Description = "The accessible name of the file list, so that a screen reader user landing on it is told what the list they are in holds instead of only how many items it has. Set it to an empty string to leave the list unnamed.",
+        },
+        new()
         {
             Name = "FileSizeFormatter",
             Type = "Func<long, string>?",
@@ -1022,6 +1029,20 @@ public partial class BitFileUploadDemo
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the remove button icon of each file item of the BitFileUpload."
                },
+               new()
+               {
+                   Name = "RemoveSpinnerContainer",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the container of the spinner that takes the place of the remove button of a file item while that file is being removed from the server."
+               },
+               new()
+               {
+                   Name = "RemoveSpinner",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the spinner that takes the place of the remove button of a file item while that file is being removed from the server."
+               },
             ]
         }
     ];
@@ -1266,6 +1287,282 @@ public partial class BitFileUploadDemo
 
 
 
+    private readonly List<ComponentCssVariable> componentCssVariables =
+    [
+        new()
+        {
+            Name = "--bit-FileUpload-max-width",
+            DefaultValue = "21.875rem",
+            Description = "The widest the whole control grows.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-gap",
+            DefaultValue = "0.25rem",
+            Description = "Room between the browse button, the description and the file list, and between the file items themselves.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-color",
+            DefaultValue = "Per Variant, from the Color role",
+            Description = "Browse button text at rest: the role's on-color in the Fill variant, the role's main color in Outline and Text.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-background",
+            DefaultValue = "Per Variant, from the Color role",
+            Description = "Browse button fill at rest: the role's main color in the Fill variant, transparent in Outline and Text.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-border-color",
+            DefaultValue = "Per Variant, from the Color role",
+            Description = "Browse button rule at rest. In the Fill variant it follows the background unless it is set on its own.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-hover-color",
+            DefaultValue = "The Color role's on-color",
+            Description = "Browse button text while hovered or pressed (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-hover-background",
+            DefaultValue = "The Color role's hover color",
+            Description = "Browse button fill on hover, and its rule too in the Fill variant.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-active-background",
+            DefaultValue = "The Color role's active color",
+            Description = "Browse button fill while pressed, and its rule too in the Fill variant.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-radius",
+            DefaultValue = "--bit-shp-radius-button",
+            Description = "Corner radius of the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-min-height",
+            DefaultValue = "The Size class's control height (--bit-siz-ctrl-sm/md/lg)",
+            Description = "Height floor of the browse button, which is what lines it up with the other controls of its size.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-padding",
+            DefaultValue = "The Size class's control padding",
+            Description = "Padding of the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-font-weight",
+            DefaultValue = "--bit-tpg-fw-light",
+            Description = "Text weight of the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-focus-color",
+            DefaultValue = "The Color role's focus color",
+            Description = "Color of the keyboard focus ring, on the browse button and on every file action button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-description-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Color of the hint under the browse button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-description-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of the hint under the browse button and of each file item's size line.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text color of a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-background",
+            DefaultValue = "transparent",
+            Description = "Surface of a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-border-color",
+            DefaultValue = "--bit-clr-brd-pri",
+            Description = "Rule around a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-hover-border-color",
+            DefaultValue = "--bit-clr-brd-pri-hover",
+            Description = "Rule around a hovered file item (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-radius",
+            DefaultValue = "--bit-shp-radius-surface",
+            Description = "Corner radius of a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-padding",
+            DefaultValue = "0.5rem 1rem",
+            Description = "Padding around the name, size and progress of a file item.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-item-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of a file item's name.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-success-color",
+            DefaultValue = "--bit-clr-suc",
+            Description = "Status line of a completed file.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-error-color",
+            DefaultValue = "--bit-clr-err",
+            Description = "Status line of a failed or rejected file.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-paused-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Status line of a paused or canceled file.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-preview-size",
+            DefaultValue = "Per Size (2rem / 2.5rem / 3.25rem)",
+            Description = "Side of the image preview thumbnail.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-preview-radius",
+            DefaultValue = "--bit-shp-radius-control",
+            Description = "Corner radius of the image preview thumbnail.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-progress-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Filled part of a file's progress bar.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-progress-track-color",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Unfilled part of a file's progress bar.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-progress-height",
+            DefaultValue = "--bit-siz-track-sm",
+            Description = "Thickness of a file's progress bar.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-progress-radius",
+            DefaultValue = "--bit-shp-radius-full",
+            Description = "Corner radius of a file's progress bar and its track.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-action-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Glyph of the upload, pause, cancel and remove buttons at rest.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-action-hover-color",
+            DefaultValue = "The Color role's main color",
+            Description = "The same glyph while hovered (pointer devices only).",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-action-hover-background",
+            DefaultValue = "The Color role's main color at 10% opacity",
+            Description = "Tint behind a hovered action button.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-action-size",
+            DefaultValue = "The Size class's control height (--bit-siz-ctrl-sm/md/lg)",
+            Description = "Width of an action button, which is also the width of the removal spinner's slot.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-action-icon-size",
+            DefaultValue = "The Size class's icon size (--bit-siz-icon-sm/md/lg)",
+            Description = "Size of an action button's glyph, and of the removal spinner.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-spinner-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Arc of the spinner shown while a file is being removed from the server.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-color",
+            DefaultValue = "The Color role's on-color",
+            Description = "Browse button text while files are dragged over the component.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-background",
+            DefaultValue = "The Color role's hover color",
+            Description = "Browse button fill in the same state.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-border-color",
+            DefaultValue = "The Color role's on-color",
+            Description = "Browse button rule in the same state.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-border-style",
+            DefaultValue = "dashed",
+            Description = "Style of that rule, which is what makes the drop indicator read as a drop target.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-disabled-color",
+            DefaultValue = "--bit-clr-fg-dis",
+            Description = "Text color when IsEnabled is false.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-disabled-background",
+            DefaultValue = "--bit-clr-bg-dis",
+            Description = "Fill of a disabled browse button in the Fill variant.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-disabled-border-color",
+            DefaultValue = "--bit-clr-brd-dis",
+            Description = "Rule of a disabled browse button in the Fill and Outline variants.",
+        }
+    ];
+
+
+
     [Inject] private IConfiguration _configuration { get; set; } = default!;
 
     private bool allowDrop = true;
@@ -1279,8 +1576,31 @@ public partial class BitFileUploadDemo
     private string NonExistingUploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/MissingUploadEndpoint";
     private string RemoveUrl => $"{_configuration.GetApiServerAddress()}FileUpload/RemoveFile";
 
+    // the endpoints come from the injected configuration, so the cascaded parameters are built once the
+    // injection has happened rather than in a field initializer - and once, so that the cascading value
+    // keeps its identity across renders instead of re-rendering every uploader under it.
+    private BitFileUploadParams[]? fileUploadParams;
+
+    protected override void OnInitialized()
+    {
+        fileUploadParams =
+        [
+            new()
+            {
+                UploadUrl = UploadUrl,
+                RemoveUrl = RemoveUrl,
+                Multiple = true,
+                ShowRemoveButton = true,
+                MaxSize = 1024 * 1024 * 5,
+                Variant = BitVariant.Outline,
+                Description = "Up to 5 MB per file.",
+            }
+        ];
+
+        base.OnInitialized();
+    }
+
     private BitFileUpload bitFileUpload = default!;
-    private BitFileUpload? overallFileUpload;
     private BitFileUpload? speedFileUpload;
     private BitFileUpload? hiddenViewFileUpload;
 
@@ -1409,47 +1729,45 @@ private async Task HandleBrowseFileOnClick()
 private string UploadUrl = ""/Upload"";";
 
     private readonly string example4RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple />";
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
+               ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
     private readonly string example4CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
+private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";";
 
     private readonly string example5RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" AutoUpload />";
-    private readonly string example5CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
-
-    private readonly string example6RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" AutoReset />";
-    private readonly string example6CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple AutoUpload />
 
-    private readonly string example7RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Append />";
-    private readonly string example7CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
-
-    private readonly string example8RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple Append
-               AllowDuplicates=""false"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
-    private readonly string example8CsharpCode = @"
+               AllowDuplicates=""false"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" AutoReset />";
+    private readonly string example5CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example9RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" MaxSize=""1024 * 1024 * 1"" />
+    private readonly string example6RazorCode = @"
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" MaxSize=""1024 * 1024 * 1""
+               MaxSizeErrorMessage=""The file is too big! Please select a file smaller than 1 MB.""
+               Description=""Up to 1 MB per file."" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" MinSize=""1024"" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple Append
-               MaxTotalSize=""1024 * 1024 * 2"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+               MaxCount=""3"" MaxTotalSize=""1024 * 1024 * 2"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               Description=""Up to 3 files, 2 MB in total."" />
 
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" MaxSize=""1024 * 1024 * 1""
-               MaxSizeErrorMessage=""The file is too big! Please select a file smaller than 1 MB."" />";
-    private readonly string example9CsharpCode = @"
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple FileValidator=""@ValidateEmptyFile"" />";
+    private readonly string example6CsharpCode = @"
 private string UploadUrl = ""/Upload"";
-private string RemoveUrl = ""/Remove"";";
+private string RemoveUrl = ""/Remove"";
 
-    private readonly string example10RazorCode = @"
+private static string? ValidateEmptyFile(BitFileInfo file)
+{
+    return file.Size == 0 ? ""Empty files cannot be uploaded."" : null;
+}";
+
+    private readonly string example7RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Accept="".png,.jpg"" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
@@ -1457,50 +1775,22 @@ private async Task HandleBrowseFileOnClick()
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
                AllowedExtensions=""@(new List<string> { ""image/*"", ""application/pdf"" })"" />";
-    private readonly string example10CsharpCode = @"
+    private readonly string example7CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example11RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple Append MaxCount=""3""
-               ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
-    private readonly string example11CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private string RemoveUrl = ""/Remove"";";
-
-    private readonly string example12RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple FileValidator=""@ValidateEmptyFile"" />";
-    private readonly string example12CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-
-private static string? ValidateEmptyFile(BitFileInfo file)
-{
-    return file.Size == 0 ? ""Empty files cannot be uploaded."" : null;
-}";
-
-    private readonly string example13RazorCode = @"
+    private readonly string example8RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop a folder"" UploadUrl=""@UploadUrl"" Directory Multiple
-               ConcurrentUploads=""3"" MaxCount=""20"" />";
-    private readonly string example13CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
+               MaxCount=""20"" Description=""Up to 20 files out of the chosen folder."" />
 
-    private readonly string example14RazorCode = @"
 <BitFileUpload Label=""Take a photo"" UploadUrl=""@UploadUrl"" Accept=""image/*"" Capture=""environment"" AutoUpload
                Description=""Opens the rear camera on a mobile device."" />
 
 <BitFileUpload Label=""Record a video"" UploadUrl=""@UploadUrl"" Accept=""video/*"" Capture=""user""
                Description=""Opens the front camera on a mobile device."" />";
-    private readonly string example14CsharpCode = @"
+    private readonly string example8CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example15RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop images"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
-               Accept=""image/*"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
-               Description=""The selected images are previewed right in the list."" />";
-    private readonly string example15CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private string RemoveUrl = ""/Remove"";";
-
-    private readonly string example16RazorCode = @"
+    private readonly string example9RazorCode = @"
 <style>
     .dimensions-item {
         display: flex;
@@ -1513,6 +1803,7 @@ private async Task HandleBrowseFileOnClick()
 
 <BitFileUpload Label=""Select or drag and drop images"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
                Accept=""image/*"" ReadImageDimensions FileValidator=""@ValidateImageDimensions""
+               ShowRemoveButton RemoveUrl=""@RemoveUrl""
                Description=""Images between 200x200 and 4000x4000 pixels."" />
 
 <BitFileUpload Label=""Select or drag and drop images"" UploadUrl=""@UploadUrl"" Multiple
@@ -1524,8 +1815,9 @@ private async Task HandleBrowseFileOnClick()
         </div>
     </FileViewTemplate>
 </BitFileUpload>";
-    private readonly string example16CsharpCode = @"
+    private readonly string example9CsharpCode = @"
 private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";
 
 private static string? ValidateImageDimensions(BitFileInfo file)
 {
@@ -1540,14 +1832,7 @@ private async Task HandleBrowseFileOnClick()
     return null;
 }";
 
-    private readonly string example17RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
-               ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
-    private readonly string example17CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private string RemoveUrl = ""/Remove"";";
-
-    private readonly string example18RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple MaxSize=""1024 * 1024 * 1""
                OnAllUploadsComplete=""@(() => onAllUploadsCompleteText = ""All files are uploaded"")""
                OnInvalid=""@(files => onInvalidText = $""{files.Length} file(s) rejected: {string.Join("", "", files.Select(f => f.Name))}"")""
@@ -1555,12 +1840,19 @@ private async Task HandleBrowseFileOnClick()
 
 <div>@onAllUploadsCompleteText</div>
 <div>@onInvalidText</div>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string onInvalidText = string.Empty;
 private string onAllUploadsCompleteText = ""No File"";";
 
-    private readonly string example19RazorCode = @"
+    private readonly string example11RazorCode = @"
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload AutoChunkSize />";
+    private readonly string example11CsharpCode = @"
+private string ChunkedUploadUrl = ""/ChunkedUpload"";";
+
+    private readonly string example12RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl""
                UploadRequestQueryStrings=""@(new Dictionary<string, string>{ {""qs1"", ""qsValue1"" } })""
                UploadRequestHttpHeaders=""@(new Dictionary<string, string>{ {""header1"", ""value1"" } })""
@@ -1580,7 +1872,7 @@ private async Task HandleBrowseFileOnClick()
                ShowRemoveButton
                WithCredentials
                UploadTimeout=""TimeSpan.FromMinutes(10)"" />";
-    private readonly string example19CsharpCode = @"
+    private readonly string example12CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 private int tokenRequestCount;
@@ -1594,14 +1886,7 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
     return Task.FromResult(new Dictionary<string, string> { { ""Authorization"", $""Bearer token-{tokenRequestCount}"" } });
 }";
 
-    private readonly string example20RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload />
-
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload AutoChunkSize />";
-    private readonly string example20CsharpCode = @"
-private string ChunkedUploadUrl = ""/ChunkedUpload"";";
-
-    private readonly string example21RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
                AutoRetries=""2"" AutoRetryDelay=""TimeSpan.FromSeconds(1)"" />
 
@@ -1613,31 +1898,24 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
                AutoRetries=""2"" AutoRetryDelay=""TimeSpan.FromSeconds(1)""
                ShouldAutoRetry=""@((file, status) => true)""
                RetryButtonTitle=""Try again"" />";
-    private readonly string example21CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string NonExistingUploadUrl = ""/MissingUploadEndpoint"";";
 
-    private readonly string example22RazorCode = @"
+    private readonly string example14RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ConcurrentUploads=""2"" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple AutoUpload
                ConcurrentUploads=""1"" QueuedUploadMessage=""In the queue…"" />";
-    private readonly string example22CsharpCode = @"
+    private readonly string example14CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example23RazorCode = @"
-<BitFileUpload @ref=""overallFileUpload"" Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
-               OnChange=""@(_ => StateHasChanged())"" OnProgress=""@(_ => StateHasChanged())"" />
-
-<BitProgress Percent=""@(overallFileUpload?.OverallUploadProgress ?? 0)"" ShowPercentNumber />";
-    private readonly string example23CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private BitFileUpload? overallFileUpload;";
-
-    private readonly string example24RazorCode = @"
+    private readonly string example15RazorCode = @"
 <BitFileUpload @ref=""speedFileUpload"" Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
                OnChange=""@(_ => StateHasChanged())"" OnProgress=""@(_ => StateHasChanged())"" />
 
+<BitProgress Percent=""@(speedFileUpload?.OverallUploadProgress ?? 0)"" ShowPercentNumber />
+
 @foreach (var file in SpeedFiles)
 {
     <div>
@@ -1653,20 +1931,18 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
         (@(speedFileUpload?.OverallRemainingTime is null ? ""-"" : $""{speedFileUpload.OverallRemainingTime:mm\\:ss} left""))
     </b>
 </div>";
-    private readonly string example24CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private BitFileUpload? speedFileUpload;
 
 private IEnumerable<BitFileInfo> SpeedFiles =>
     speedFileUpload?.Files.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
 
-    private readonly string example25RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
-               FileSizeFormatter=""@(size => $""{size:N0} bytes"")"" />";
-    private readonly string example25CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
+               FileSizeFormatter=""@(size => $""{size:N0} bytes"")"" />
+
 
-    private readonly string example26RazorCode = @"
 <BitFileUpload @ref=""hiddenViewFileUpload"" Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
                Multiple AutoUpload HideFileView
                OnChange=""@(_ => StateHasChanged())"" OnProgress=""@(_ => StateHasChanged())"" />
@@ -1685,7 +1961,7 @@ Multiple AutoUpload HideFileView
 {
     <div>No file selected yet.</div>
 }";
-    private readonly string example26CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private BitFileUpload? hiddenViewFileUpload;
 
@@ -1694,7 +1970,7 @@ Multiple AutoUpload HideFileView
 private IEnumerable<BitFileInfo> HiddenViewFiles =>
     hiddenViewFileUpload?.Files.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
 
-    private readonly string example27RazorCode = @"
+    private readonly string example17RazorCode = @"
 <style>
     .browse-file {
         border: 1px solid #D2D2D7;
@@ -1933,7 +2209,7 @@ Browse file
 </BitFileUpload>
 
 <BitButton OnClick=""HandleUploadOnClick"">Upload</BitButton>";
-    private readonly string example27CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 
@@ -1984,7 +2260,7 @@ private static string GetFileUploadSize(BitFileInfo file)
     _ => string.Empty,
 };";
 
-    private readonly string example28RazorCode = @"
+    private readonly string example18RazorCode = @"
 <BitFileUpload @ref=""bitFileUploadWithBrowseFile"" HideLabel Multiple
                UploadUrl=""@UploadUrl""
                RemoveUrl=""@RemoveUrl"" />
@@ -1994,7 +2270,7 @@ private static string GetFileUploadSize(BitFileInfo file)
 <BitButton OnClick=""() => bitFileUploadWithBrowseFile.PauseUpload()"">Pause all</BitButton>
 <BitButton OnClick=""() => bitFileUploadWithBrowseFile.CancelUpload()"">Cancel all</BitButton>
 <BitButton OnClick=""() => bitFileUploadWithBrowseFile.Reset()"">Reset</BitButton>";
-    private readonly string example28CsharpCode = @"
+    private readonly string example18CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 private BitFileUpload bitFileUploadWithBrowseFile = default!;
@@ -2004,14 +2280,17 @@ private async Task HandleBrowseFileOnClick()
     await bitFileUploadWithBrowseFile.Browse();
 }";
 
-    private readonly string example29RazorCode = @"
+    private readonly string example19RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
                AriaLabel=""Select a document to upload"" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
+               ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               FileListAriaLabel=""Documents to upload""
                AnnouncementProvider=""@AnnounceUploads"" />";
-    private readonly string example29CsharpCode = @"
+    private readonly string example19CsharpCode = @"
 private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";
 
 private static string? AnnounceUploads(IReadOnlyList<BitFileInfo> files)
 {
@@ -2020,7 +2299,7 @@ private async Task HandleBrowseFileOnClick()
     return $""{files.Count} attachment(s), {completed} uploaded so far."";
 }";
 
-    private readonly string example30RazorCode = @"
+    private readonly string example20RazorCode = @"
 <BitChoiceGroup @bind-Value=""variant"" Horizontal TItem=""BitChoiceGroupOption<BitVariant>"" TValue=""BitVariant"">
     <BitChoiceGroupOption Text=""Fill"" Value=""BitVariant.Fill"" />
     <BitChoiceGroupOption Text=""Outline"" Value=""BitVariant.Outline"" />
@@ -2030,11 +2309,40 @@ private async Task HandleBrowseFileOnClick()
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Variant=""variant"" />
 
 <BitFileUpload Label=""Disabled"" UploadUrl=""@UploadUrl"" Variant=""variant"" IsEnabled=""false"" />";
-    private readonly string example30CsharpCode = @"
+    private readonly string example20CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private BitVariant variant = BitVariant.Fill;";
 
-    private readonly string example31RazorCode = @"
+    private readonly string example21RazorCode = @"
+<BitParams Parameters=""@fileUploadParams"">
+    <BitFileUpload Label=""Takes the endpoint, the limits and the look from the cascade"" />
+
+    <BitFileUpload Label=""So does this one, without repeating any of it"" />
+
+    <BitFileUpload Label=""Its own Variant and MaxSize, the cascaded rest""
+                   Variant=""BitVariant.Fill"" MaxSize=""1024 * 1024 * 1"" />
+</BitParams>
+
+
+<BitFileUpload Label=""Outside the cascade, and back to the defaults"" UploadUrl=""@UploadUrl"" />";
+    private readonly string example21CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+
+private readonly BitFileUploadParams[] fileUploadParams =
+[
+    new()
+    {
+        UploadUrl = ""/Upload"",
+        RemoveUrl = ""/Remove"",
+        Multiple = true,
+        ShowRemoveButton = true,
+        MaxSize = 1024 * 1024 * 5,
+        Variant = BitVariant.Outline,
+        Description = ""Up to 5 MB per file."",
+    }
+];";
+
+    private readonly string example22RazorCode = @"
 <BitFileUpload Label=""Primary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Primary"" />
 <BitFileUpload Label=""Secondary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Secondary"" />
 <BitFileUpload Label=""Tertiary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Tertiary"" />
@@ -2053,10 +2361,10 @@ private async Task HandleBrowseFileOnClick()
 <BitFileUpload Label=""PrimaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.PrimaryBorder"" />
 <BitFileUpload Label=""SecondaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.SecondaryBorder"" />
 <BitFileUpload Label=""TertiaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.TertiaryBorder"" />";
-    private readonly string example31CsharpCode = @"
+    private readonly string example22CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example32RazorCode = @"
+    private readonly string example23RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <div>FontAwesome:</div>
@@ -2098,21 +2406,21 @@ private async Task HandleBrowseFileOnClick()
                RetryIcon=""@BitIconInfo.Bi(""arrow-repeat"")""
                CancelIcon=""@BitIconInfo.Bi(""x-circle"")""
                RemoveIcon=""@BitIconInfo.Bi(""trash"")"" />";
-    private readonly string example32CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example33RazorCode = @"
+    private readonly string example24RazorCode = @"
 <BitFileUpload Label=""Small"" UploadUrl=""@UploadUrl"" Size=""BitSize.Small"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
 <BitFileUpload Label=""Medium"" UploadUrl=""@UploadUrl"" Size=""BitSize.Medium"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
 <BitFileUpload Label=""Large"" UploadUrl=""@UploadUrl"" Size=""BitSize.Large"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
-    private readonly string example33CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example34RazorCode = @"
+    private readonly string example25RazorCode = @"
 <style>
     .custom-class {
         padding: 0.5rem;
@@ -2138,6 +2446,17 @@ private async Task HandleBrowseFileOnClick()
         color: white;
         background-color: mediumseagreen;
     }
+
+    .custom-vars {
+        --bit-FileUpload-label-radius: 2rem;
+        --bit-FileUpload-label-background: #0f766e;
+        --bit-FileUpload-label-hover-background: #115e59;
+        --bit-FileUpload-item-radius: 1rem;
+        --bit-FileUpload-item-border-color: #99f6e4;
+        --bit-FileUpload-progress-color: #0f766e;
+        --bit-FileUpload-action-hover-color: #0f766e;
+        --bit-FileUpload-focus-color: #0f766e;
+    }
 </style>
 
 
@@ -2161,14 +2480,34 @@ private async Task HandleBrowseFileOnClick()
                    Dragging = ""custom-dragging"",
                    FileItem = ""custom-item"",
                    RemoveButton = ""custom-remove""
-               })"" />";
+               })"" />
 
-    private readonly string example35RazorCode = @"
+
+<BitFileUpload Label=""One instance, restyled through its own Style""
+               UploadUrl=""@UploadUrl"" Multiple ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               Style=""--bit-FileUpload-label-radius: 2rem;
+                      --bit-FileUpload-label-background: #7c3aed;
+                      --bit-FileUpload-label-hover-background: #6d28d9;
+                      --bit-FileUpload-item-radius: 1rem;
+                      --bit-FileUpload-item-border-color: #ddd6fe;
+                      --bit-FileUpload-progress-color: #7c3aed;
+                      --bit-FileUpload-action-hover-color: #7c3aed;
+                      --bit-FileUpload-focus-color: #7c3aed;"" />
+
+<div class=""custom-vars"">
+    <BitFileUpload Label=""Two uploaders under one ancestor that sets the variables""
+                   UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+    <BitFileUpload Label=""Neither of them declares anything of its own""
+                   UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+</div>";
+
+    private readonly string example26RazorCode = @"
 <div dir=""rtl"">
     <BitFileUpload Dir=""BitDir.Rtl""
                    Label=""انتخاب یا رها کردن فایل""
                    UploadUrl=""@UploadUrl""
                    ShowRemoveButton RemoveUrl=""@RemoveUrl""
+                   FileListAriaLabel=""فایل‌های انتخاب‌شده""
                    UploadButtonTitle=""بارگذاری""
                    PauseButtonTitle=""توقف""
                    CancelButtonTitle=""لغو""
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
index 1a9cc5b7648..08ffad1e796 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
@@ -10,6 +10,12 @@
     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
 }
 
+.example-content {
+    gap: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
+}
+
 .dimensions-item {
     gap: 1rem;
     display: flex;
@@ -17,6 +23,22 @@
     justify-content: space-between;
 }
 
+// the public CSS variables inherit, so declaring them on any ancestor re-skins every file upload
+// underneath it - no ::deep and no selector reaching into the component is needed.
+.custom-vars {
+    gap: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
+    --bit-FileUpload-label-radius: 2rem;
+    --bit-FileUpload-label-background: #0f766e;
+    --bit-FileUpload-label-hover-background: #115e59;
+    --bit-FileUpload-item-radius: 1rem;
+    --bit-FileUpload-item-border-color: #99f6e4;
+    --bit-FileUpload-progress-color: #0f766e;
+    --bit-FileUpload-action-hover-color: #0f766e;
+    --bit-FileUpload-focus-color: #0f766e;
+}
+
 ::deep {
     .custom-class {
         padding: 0.5rem;
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
index fafbc4a00cc..a45097ec5b1 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
@@ -2665,6 +2665,338 @@ public async Task BitFileUploadShouldCancelAPausedFileAndLetItBeStartedAgain()
         Assert.AreEqual(BitFileUploadStatus.InProgress, com.Instance.Files[0].Status);
     }
 
+    [TestMethod]
+    public void BitFileUploadShouldNameTheFileList()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>();
+
+        SelectFiles(com);
+
+        Assert.AreEqual("Selected files", com.Find(".bit-upl-fl").GetAttribute("aria-label"));
+
+        com.Render(parameters => parameters.Add(p => p.FileListAriaLabel, "Attachments"));
+
+        Assert.AreEqual("Attachments", com.Find(".bit-upl-fl").GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldLeaveTheFileListUnnamedWithAnEmptyLabel()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.FileListAriaLabel, string.Empty);
+        });
+
+        SelectFiles(com);
+
+        Assert.IsNull(com.Find(".bit-upl-fl").GetAttribute("aria-label"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadParamsShouldHaveCorrectParamName()
+    {
+        var paramName = BitFileUploadParams.ParamName;
+        var expectedName = $"{nameof(BitParams)}.{nameof(BitFileUpload)}";
+
+        Assert.AreEqual(expectedName, paramName);
+    }
+
+    [TestMethod]
+    public void BitFileUploadParamsShouldImplementIBitComponentParams()
+    {
+        var @params = new BitFileUploadParams();
+
+        Assert.IsInstanceOfType<IBitComponentParams>(@params);
+        Assert.AreEqual(BitFileUploadParams.ParamName, @params.Name);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldApplyCascadingParametersFromBitParams()
+    {
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitFileUploadParams
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                Variant = BitVariant.Outline,
+                Label = "Cascaded label",
+                UploadUrl = "/cascaded-upload",
+                Description = "Cascaded description"
+            }
+        };
+
+        var com = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileUpload>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var root = com.Find(".bit-upl");
+
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-suc"));
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-lg"));
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-otl"));
+        Assert.AreEqual("Cascaded label", com.Find(".bit-upl-lbl").TextContent.Trim());
+        Assert.AreEqual("Cascaded description", com.Find(".bit-upl-dsc").TextContent.Trim());
+        Assert.AreEqual("/cascaded-upload", com.FindComponent<BitFileUpload>().Instance.UploadUrl);
+    }
+
+    [TestMethod]
+    public void BitFileUploadDirectParametersShouldOverrideCascadingParameters()
+    {
+        var paramsList = new List<IBitComponentParams>
+        {
+            new BitFileUploadParams
+            {
+                Color = BitColor.Success,
+                Size = BitSize.Large,
+                Label = "Cascaded label",
+                UploadUrl = "/cascaded-upload"
+            }
+        };
+
+        var com = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, paramsList);
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileUpload>(0);
+                builder.AddAttribute(1, nameof(BitFileUpload.Color), BitColor.Error);
+                builder.AddAttribute(2, nameof(BitFileUpload.Label), "Own label");
+                builder.CloseComponent();
+            });
+        });
+
+        var root = com.Find(".bit-upl");
+
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-err"));
+        Assert.AreEqual("Own label", com.Find(".bit-upl-lbl").TextContent.Trim());
+
+        // what the component left unset still comes from the cascade.
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-lg"));
+        Assert.AreEqual("/cascaded-upload", com.FindComponent<BitFileUpload>().Instance.UploadUrl);
+    }
+
+    [TestMethod]
+    public void BitFileUploadParamsUpdateParametersShouldSetAllProperties()
+    {
+        var @params = new BitFileUploadParams
+        {
+            Accept = ".pdf",
+            AllowDrop = false,
+            AllowPaste = false,
+            AllowDuplicates = false,
+            AllowedExtensions = [".pdf", ".docx"],
+            Append = true,
+            AutoChunkSize = true,
+            AutoReset = true,
+            AutoRetries = 3,
+            AutoRetryDelay = TimeSpan.FromSeconds(2),
+            AutoUpload = true,
+            Capture = "environment",
+            ChunkedUpload = true,
+            Color = BitColor.Warning,
+            ConcurrentUploads = 2,
+            Description = "Test description",
+            Directory = true,
+            FileListAriaLabel = "Test list",
+            HideFileView = true,
+            HideLabel = true,
+            Label = "Test label",
+            MaxCount = 5,
+            MaxSize = 1024,
+            MaxTotalSize = 4096,
+            MinSize = 16,
+            Multiple = true,
+            ReadImageDimensions = true,
+            RemoveUrl = "/remove",
+            ShowPreview = true,
+            ShowRemoveButton = true,
+            Size = BitSize.Small,
+            UploadUrl = "/upload",
+            UploadTimeout = TimeSpan.FromMinutes(1),
+            Variant = BitVariant.Text,
+            WithCredentials = true,
+            AriaLabel = "Test aria label",
+            IsEnabled = false,
+            TabIndex = "5"
+        };
+
+        var com = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, new List<IBitComponentParams> { @params });
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileUpload>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var instance = com.FindComponent<BitFileUpload>().Instance;
+
+        Assert.AreEqual(".pdf", instance.Accept);
+        Assert.IsFalse(instance.AllowDrop);
+        Assert.IsFalse(instance.AllowPaste);
+        Assert.IsFalse(instance.AllowDuplicates);
+        Assert.AreEqual(2, instance.AllowedExtensions.Count);
+        Assert.IsTrue(instance.Append);
+        Assert.IsTrue(instance.AutoChunkSize);
+        Assert.IsTrue(instance.AutoReset);
+        Assert.AreEqual(3, instance.AutoRetries);
+        Assert.AreEqual(TimeSpan.FromSeconds(2), instance.AutoRetryDelay);
+        Assert.IsTrue(instance.AutoUpload);
+        Assert.AreEqual("environment", instance.Capture);
+        Assert.IsTrue(instance.ChunkedUpload);
+        Assert.AreEqual(BitColor.Warning, instance.Color);
+        Assert.AreEqual(2, instance.ConcurrentUploads);
+        Assert.AreEqual("Test description", instance.Description);
+        Assert.IsTrue(instance.Directory);
+        Assert.AreEqual("Test list", instance.FileListAriaLabel);
+        Assert.IsTrue(instance.HideFileView);
+        Assert.IsTrue(instance.HideLabel);
+        Assert.AreEqual("Test label", instance.Label);
+        Assert.AreEqual(5, instance.MaxCount);
+        Assert.AreEqual(1024, instance.MaxSize);
+        Assert.AreEqual(4096, instance.MaxTotalSize);
+        Assert.AreEqual(16, instance.MinSize);
+        Assert.IsTrue(instance.Multiple);
+        Assert.IsTrue(instance.ReadImageDimensions);
+        Assert.AreEqual("/remove", instance.RemoveUrl);
+        Assert.IsTrue(instance.ShowPreview);
+        Assert.IsTrue(instance.ShowRemoveButton);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("/upload", instance.UploadUrl);
+        Assert.AreEqual(TimeSpan.FromMinutes(1), instance.UploadTimeout);
+        Assert.AreEqual(BitVariant.Text, instance.Variant);
+        Assert.IsTrue(instance.WithCredentials);
+        Assert.AreEqual("Test aria label", instance.AriaLabel);
+        Assert.IsFalse(instance.IsEnabled);
+        Assert.AreEqual("5", instance.TabIndex);
+    }
+
+    [TestMethod]
+    public void BitFileUploadParamsUpdateParametersShouldNotOverwriteExistingValues()
+    {
+        var @params = new BitFileUploadParams
+        {
+            Color = BitColor.Success,
+            Size = BitSize.Large,
+            Label = "Params label"
+        };
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.Color, BitColor.Error);
+            parameters.Add(p => p.Size, BitSize.Small);
+            parameters.Add(p => p.Label, "Existing label");
+        });
+
+        var instance = com.Instance;
+
+        @params.UpdateParameters(instance);
+
+        Assert.AreEqual(BitColor.Error, instance.Color);
+        Assert.AreEqual(BitSize.Small, instance.Size);
+        Assert.AreEqual("Existing label", instance.Label);
+    }
+
+    [TestMethod]
+    public void BitFileUploadParamsShouldApplyClassesAndStyles()
+    {
+        var @params = new BitFileUploadParams
+        {
+            Classes = new BitFileUploadClassStyles { Root = "custom-root", Label = "custom-label" },
+            Styles = new BitFileUploadClassStyles { Root = "color: red;", Label = "color: blue;" }
+        };
+
+        var com = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, new List<IBitComponentParams> { @params });
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileUpload>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var root = com.Find(".bit-upl");
+        var label = com.Find(".bit-upl-lbl");
+
+        Assert.IsTrue(root.ClassList.Contains("custom-root"));
+        Assert.IsTrue(root.GetAttribute("style")!.Contains("color: red"));
+        Assert.IsTrue(label.ClassList.Contains("custom-label"));
+        Assert.IsTrue(label.GetAttribute("style")!.Contains("color: blue"));
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadParamsShouldDeriveTheWorkingChunkSize()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 4 * 1024 * 1024, FileId = "1", Index = 0 }]);
+
+        var @params = new BitFileUploadParams
+        {
+            ChunkedUpload = true,
+            ChunkSize = 2L * 1024 * 1024
+        };
+
+        var com = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, new List<IBitComponentParams> { @params });
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileUpload>(0);
+                builder.CloseComponent();
+            });
+        });
+
+        var upload = com.FindComponent<BitFileUpload>();
+
+        upload.Find(".bit-upl-fi").Change(string.Empty);
+
+        await upload.InvokeAsync(() => upload.Instance.Upload());
+        await upload.InvokeAsync(() => upload.Instance.__HandleChunkUpload(0, 200, string.Empty));
+
+        // a ChunkSize that arrives through the cascade still drives the size of the chunks, which
+        // the setter of the parameter - bypassed by the cascade - is what normally derives.
+        Assert.AreEqual(2 * 1024 * 1024, upload.Instance.Files[0].TotalUploadedSize);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldMoveTheFocusOnWhenAnItemButtonRemovesItsFile()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 },
+                    new() { Name = "b.txt", Size = 100, FileId = "2", Index = 1 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.Multiple, true);
+            parameters.Add(p => p.ShowRemoveButton, true);
+        });
+
+        SelectFiles(com);
+
+        var removeButtons = com.FindAll(".bit-upl-usi[aria-label^='Remove']");
+
+        Assert.HasCount(2, removeButtons);
+
+        await com.Find(".bit-upl-itm .bit-upl-usi[aria-label='Remove a.txt']").ClickAsync(new());
+
+        // the removed file leaves the list, and the focus is handed to the item that takes its place
+        // rather than being dropped on the document body with the button that was pressed.
+        Assert.AreEqual(BitFileUploadStatus.Removed, com.Instance.Files[0].Status);
+        Assert.HasCount(1, com.FindAll(".bit-upl-itm"));
+        Context.JSInterop.VerifyInvoke("Blazor._internal.domWrapper.focus");
+    }
+
     private void SetupFiles(BitFileInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInfo[]>("BitBlazorUI.FileUpload.setup", _ => true).SetResult(files);

From 245d8e7c725682b31ad983ab99c5087a42bfb9d4 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 08:04:08 +0330
Subject: [PATCH 2/8] further improvements

---
 .../Inputs/FileUpload/BitFileInfo.cs          |   8 +
 .../Inputs/FileUpload/BitFileUpload.razor.cs  |  64 +++++-
 .../Inputs/FileUpload/BitFileUpload.scss      |  23 +-
 .../Inputs/FileUpload/BitFileUpload.ts        | 150 ++++++++++---
 .../FileUpload/BitFileUploadClassStyles.cs    |   9 +-
 .../BitFileUploadJsRuntimeExtensions.cs       |   5 +-
 .../Inputs/FileUpload/BitFileUploadParams.cs  |  32 +++
 .../FileUpload/_BitFileUploadItem.razor       |  35 ++-
 .../FileUpload/_BitFileUploadItem.razor.cs    |  29 +++
 .../Inputs/FileUpload/BitFileUploadDemo.razor |  68 +++++-
 .../FileUpload/BitFileUploadDemo.razor.cs     | 116 +++++++++-
 .../FileUpload/BitFileUploadDemo.razor.scss   |  19 ++
 .../Inputs/FileUpload/BitFileUploadTests.cs   | 199 +++++++++++++++++-
 13 files changed, 697 insertions(+), 60 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
index 72e6d48e0e6..28c6e9837c4 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
@@ -131,6 +131,14 @@ public class BitFileInfo
     /// </summary>
     [JsonIgnore] public string? Message { get; internal set; }
 
+    /// <summary>
+    /// The HTTP status code of the last upload or removal response this file received, which is what tells
+    /// an authorization problem from a payload that was too large or from a server that is temporarily down.
+    /// It is 0 when the request never reached the server at all - a network error, a timeout or an abort -
+    /// and null while no request of this file has come back yet.
+    /// </summary>
+    [JsonIgnore] public int? ResponseStatus { get; internal set; }
+
     /// <summary>
     /// The status of the file in the BitFileUpload.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
index 04257437750..ec9f01d786e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
@@ -7,8 +7,9 @@ namespace Bit.BlazorUI;
 
 /// <summary>
 /// BitFileUpload wraps the HTML file input element(s) and uploads them to a given URL, with support for
-/// drag-and-drop, clipboard paste, folder and camera capture selection, image previews, chunked and resumable
-/// uploads, a concurrency limit, pause/cancel, automatic retries, validation, and server-side removal.
+/// drag-and-drop onto the component or onto drop zones of the app's own, clipboard paste, folder and camera
+/// capture selection, image previews, chunked and resumable uploads, a concurrency limit, pause/cancel,
+/// automatic retries, validation, and server-side removal.
 /// </summary>
 public partial class BitFileUpload : BitComponentBase
 {
@@ -25,6 +26,7 @@ public partial class BitFileUpload : BitComponentBase
     private DateTime _lastProgressRender = DateTime.MinValue;
     private bool _allowPaste = true;
     private bool _expandDirectories;
+    private string? _dropZoneSelector;
     private string? _dragClass;
     private string? _dragStyle;
     private string? _announcement;
@@ -134,6 +136,15 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public TimeSpan? AutoRetryDelay { get; set; }
 
+    /// <summary>
+    /// Custom delay before each automatic retry, which is what turns the fixed <see cref="AutoRetryDelay"/>
+    /// into a backoff: it receives the file - whose <see cref="BitFileInfo.ResponseStatus"/> says what the
+    /// server answered - and the number of the attempt about to be made, counting from 1, and returns how
+    /// long to wait before it. Returning null falls back to the <see cref="AutoRetryDelay"/>, which is also
+    /// what a provider that throws does, so a miscalculated delay never swallows the retry itself.
+    /// </summary>
+    [Parameter] public Func<BitFileInfo, int, TimeSpan?>? AutoRetryDelayProvider { get; set; }
+
     /// <summary>
     /// Calculate the chunk size dynamically based on the user's Internet speed between 512 KB and 10 MB.
     /// </summary>
@@ -243,6 +254,18 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public bool Directory { get; set; }
 
+    /// <summary>
+    /// A CSS selector of one or more elements outside the component that accept a drop as well, which is how
+    /// a whole form, a card or the page itself becomes the drop target while the browse button stays where it
+    /// is. The root element of the component is always a drop zone and needs no selector of its own; the
+    /// elements this one names are matched whenever a drag reaches them, so one rendered after the component
+    /// - or replaced later on - is a drop zone from the moment it matches. While files are dragged over any
+    /// of them, all of them (the root included) carry the <see cref="Classes"/>.Dragging class and the
+    /// <see cref="Styles"/>.Dragging inline style, and the focus being inside one of them is also what lets
+    /// a paste land in this component.
+    /// </summary>
+    [Parameter] public string? DropZoneSelector { get; set; }
+
     /// <summary>
     /// The message shown for the files rejected for being already in the file list
     /// while <see cref="AllowDuplicates"/> is disabled.
@@ -576,6 +599,8 @@ public partial class BitFileUpload : BitComponentBase
     /// Whether a thumbnail of every selected image is shown at the head of its file item, produced
     /// entirely in the browser from an object URL that is handed back as soon as the file is removed or
     /// the component is reset. The same URL is on the <see cref="BitFileInfo.PreviewUrl"/> of each file.
+    /// A file that is not an image takes a glyph of its type in a box of the same size instead, so that
+    /// the names of a mixed list stay lined up along one edge.
     /// </summary>
     [Parameter] public bool ShowPreview { get; set; }
 
@@ -1029,6 +1054,7 @@ public async Task __HandleChunkUpload(int fileIndex, int responseStatus, string
 
         // whatever this response says, the request it answers is over and the file is free again.
         file.IsRequestInFlight = false;
+        file.ResponseStatus = responseStatus;
 
         if (file.Status != BitFileUploadStatus.InProgress) return;
 
@@ -1061,7 +1087,7 @@ public async Task __HandleChunkUpload(int fileIndex, int responseStatus, string
             {
                 file.AutoRetryAttempts++;
 
-                if (AutoRetryDelay is { } delay && delay > TimeSpan.Zero)
+                if (GetAutoRetryDelay(file) is { } delay && delay > TimeSpan.Zero)
                 {
                     await Task.Delay(delay);
                 }
@@ -1176,11 +1202,12 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         _allowDrop = AllowDrop;
         _allowPaste = AllowPaste;
         _expandDirectories = Directory;
+        _dropZoneSelector = DropZoneSelector;
         _dragClass = GetDragClass();
         _dragStyle = Styles?.Dragging;
 
         _dropZoneRef = await _js.BitFileUploadSetupDragDrop(RootElement, _inputRef, _dragClass, _dragStyle,
-                                                           _allowDrop, _allowPaste, _expandDirectories);
+                                                           _allowDrop, _allowPaste, _expandDirectories, _dropZoneSelector);
 
         if (IsDisposed) return;
         if (_dropZoneRef is null) return;
@@ -1337,17 +1364,19 @@ private async Task UpdateDropZone()
         var dragStyle = Styles?.Dragging;
 
         if (_allowDrop == AllowDrop && _allowPaste == AllowPaste && _expandDirectories == Directory &&
-            _dragClass == dragClass && _dragStyle == dragStyle) return;
+            _dropZoneSelector == DropZoneSelector && _dragClass == dragClass && _dragStyle == dragStyle) return;
 
         _allowDrop = AllowDrop;
         _allowPaste = AllowPaste;
         _expandDirectories = Directory;
+        _dropZoneSelector = DropZoneSelector;
         _dragClass = dragClass;
         _dragStyle = dragStyle;
 
         try
         {
-            await _dropZoneRef.InvokeVoidAsync("update", _allowDrop, _allowPaste, _expandDirectories, _dragClass, _dragStyle);
+            await _dropZoneRef.InvokeVoidAsync("update", _allowDrop, _allowPaste, _expandDirectories,
+                                               _dragClass, _dragStyle, _dropZoneSelector);
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
     }
@@ -1637,6 +1666,23 @@ private bool IsWorthRetrying(BitFileInfo file, int responseStatus)
 
     // whether the file still has bytes to send, which is what tells an upload call that is worth
     // starting apart from one landing on an already settled batch.
+    // How long to wait before the attempt the file is about to make, its number being the number of
+    // automatic retries already spent on it - the first retry is attempt 1.
+    private TimeSpan? GetAutoRetryDelay(BitFileInfo file)
+    {
+        if (AutoRetryDelayProvider is null) return AutoRetryDelay;
+
+        try
+        {
+            return AutoRetryDelayProvider(file, file.AutoRetryAttempts) ?? AutoRetryDelay;
+        }
+        catch
+        {
+            // a provider that throws decides nothing, and the retry it was asked about still happens.
+            return AutoRetryDelay;
+        }
+    }
+
     private static bool HasPendingWork(BitFileInfo file)
     {
         return file.Status is not BitFileUploadStatus.Completed
@@ -2146,6 +2192,8 @@ private async Task RemoveOneFileFromServer(BitFileInfo fileInfo)
 
             var response = await _httpClient.SendAsync(request);
 
+            fileInfo.ResponseStatus = (int)response.StatusCode;
+
             if (response.IsSuccessStatusCode)
             {
                 await UpdateStatus(BitFileUploadStatus.Removed, fileInfo);
@@ -2158,6 +2206,10 @@ private async Task RemoveOneFileFromServer(BitFileInfo fileInfo)
         }
         catch (Exception ex)
         {
+            // the request never came back with a status of its own, which is reported the same way the
+            // upload side reports a request that never reached the server.
+            fileInfo.ResponseStatus = 0;
+
             // only the message of the exception, since this text is rendered right in the file item and
             // a full stack trace there says nothing to the user while telling a stranger far too much.
             fileInfo.Message = ex.Message;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
index 0d054690031..5d1ee3dcc74 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
@@ -31,6 +31,7 @@
 //   --bit-FileUpload-item-radius                file item corner radius                        (default: $shp-radius-surface)
 //   --bit-FileUpload-item-padding               padding around the name, size and progress     (default: spacing(1) spacing(2))
 //   --bit-FileUpload-item-font-size             file name size                                 (default: per size)
+//   --bit-FileUpload-item-font-weight           file name weight                               (default: $tg-fw-light)
 //
 //   --bit-FileUpload-success-color              status line of a completed file                (default: $clr-suc)
 //   --bit-FileUpload-error-color                status line of a failed or rejected file       (default: $clr-err)
@@ -38,6 +39,10 @@
 //
 //   --bit-FileUpload-preview-size               image thumbnail side                           (default: per size)
 //   --bit-FileUpload-preview-radius             image thumbnail corner radius                  (default: $shp-radius-control)
+//   --bit-FileUpload-preview-background         box standing in for the thumbnail of a file
+//                                               that is not an image                           (default: $clr-bg-sec)
+//   --bit-FileUpload-preview-icon-color         the type glyph inside that box                 (default: $clr-fg-sec)
+//   --bit-FileUpload-preview-icon-size          that glyph's size                              (default: per size, $siz-icon-*)
 //
 //   --bit-FileUpload-progress-color             filled part of the progress bar                (default: the Color role's main color)
 //   --bit-FileUpload-progress-track-color       unfilled part of the progress bar              (default: $clr-bg-sec)
@@ -247,8 +252,8 @@
 .bit-upl-itm {
     display: flex;
     overflow: hidden;
-    font-weight: $tg-fw-light;
     align-items: center;
+    font-weight: var(--bit-FileUpload-item-font-weight, #{$tg-fw-light});
     flex-flow: row nowrap;
     justify-content: space-between;
     color: var(--bit-FileUpload-item-color, #{$clr-fg-pri});
@@ -299,6 +304,22 @@
     height: var(--bit-FileUpload-preview-size, var(--bit-upl-prv-size));
 }
 
+// the box a file that is not an image takes instead of a thumbnail, so that a list of mixed files lines
+// its names up along one edge rather than stepping in and out with every kind of file.
+.bit-upl-pvi {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--bit-FileUpload-preview-icon-color, #{$clr-fg-sec});
+    background-color: var(--bit-FileUpload-preview-background, #{$clr-bg-sec});
+
+    i {
+        line-height: 1;
+        color: inherit;
+        font-size: var(--bit-FileUpload-preview-icon-size, var(--bit-upl-ico-fontsize));
+    }
+}
+
 .bit-upl-fic {
     flex-grow: 1;
     min-width: 0;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
index 4a164634a9d..dd12d9ff5d0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
@@ -95,11 +95,66 @@ namespace BitBlazorUI {
             dragStyle: string | null,
             allowDrop: boolean,
             allowPaste: boolean,
-            expandDirectories: boolean) {
+            expandDirectories: boolean,
+            dropZoneSelector: string | null) {
 
             let dragCounter = 0;
-            let originalStyle: string | null = null;
             let dragClasses = dragClass.split(' ').filter(c => c.length > 0);
+            // the inline style every zone carried before the drag state was applied to it, so that the
+            // element the app owns gets exactly its own style back rather than losing it.
+            const originalStyles = new Map<HTMLElement, string | null>();
+
+            // a page can well point two uploaders at one shared drop zone, so a drop landing in it is
+            // claimed by the first of them to see it rather than handed to every one of them.
+            const handledFlag = '__bitUplDrop';
+
+            function claim(e: Event) {
+                if ((e as any)[handledFlag]) return false;
+
+                (e as any)[handledFlag] = true;
+
+                return true;
+            }
+
+            // the root is always a drop zone; the selector adds whatever else the app nominates, which is
+            // how a whole form - or the page - accepts a drop while the browse button stays where it is.
+            // the drag listeners sit on the document and ask this rather than being attached to the zones
+            // themselves, so an element the app renders after this component - or replaces later on - is a
+            // drop zone from the moment it matches the selector, with nothing to re-attach.
+            function isInZone(target: EventTarget | null): boolean {
+                if (!(target instanceof Node)) return false;
+
+                if (dropZoneElement.contains(target)) return true;
+
+                if (!dropZoneSelector) return false;
+
+                const element = target instanceof Element ? target : target.parentElement;
+
+                try {
+                    return element?.closest(dropZoneSelector) != null;
+                } catch {
+                    // an invalid selector leaves the component with its own root as the only zone.
+                    return false;
+                }
+            }
+
+            function resolveZones(): HTMLElement[] {
+                const list: HTMLElement[] = [dropZoneElement];
+
+                if (!dropZoneSelector) return list;
+
+                try {
+                    document.querySelectorAll(dropZoneSelector).forEach(e => {
+                        if (e !== dropZoneElement && e instanceof HTMLElement) list.push(e);
+                    });
+                } catch { /* see isInZone */ }
+
+                return list;
+            }
+
+            // the zones the drag state is currently painted on, captured when it was applied so that it
+            // comes off exactly the elements it went on, whatever the DOM does in between.
+            let zones: HTMLElement[] = [];
 
             function hasFiles(e: DragEvent) {
                 return !!e.dataTransfer && Array.prototype.includes.call(e.dataTransfer.types, 'Files');
@@ -110,23 +165,33 @@ namespace BitBlazorUI {
             }
 
             function applyDragStyling() {
-                dropZoneElement.classList.add(...dragClasses);
+                zones = resolveZones();
+
+                zones.forEach(zone => {
+                    zone.classList.add(...dragClasses);
 
-                if (!dragStyle) return;
-                originalStyle = dropZoneElement.getAttribute('style');
-                dropZoneElement.setAttribute('style', [originalStyle, dragStyle].filter(s => s).join(';'));
+                    if (!dragStyle) return;
+                    const original = zone.getAttribute('style');
+                    originalStyles.set(zone, original);
+                    zone.setAttribute('style', [original, dragStyle].filter(s => s).join(';'));
+                });
             }
 
             function clearDragStyling() {
-                dropZoneElement.classList.remove(...dragClasses);
+                zones.forEach(zone => {
+                    zone.classList.remove(...dragClasses);
+
+                    if (!dragStyle) return;
+                    const original = originalStyles.get(zone);
+                    if (original) {
+                        zone.setAttribute('style', original);
+                    } else {
+                        zone.removeAttribute('style');
+                    }
+                    originalStyles.delete(zone);
+                });
 
-                if (!dragStyle) return;
-                if (originalStyle) {
-                    dropZoneElement.setAttribute('style', originalStyle);
-                } else {
-                    dropZoneElement.removeAttribute('style');
-                }
-                originalStyle = null;
+                zones = [];
             }
 
             function addDragState() {
@@ -146,6 +211,8 @@ namespace BitBlazorUI {
             }
 
             function onDragEnter(e: DragEvent) {
+                if (!isInZone(e.target)) return;
+
                 e.preventDefault();
                 if (!canAcceptDrop(e)) return;
 
@@ -153,6 +220,8 @@ namespace BitBlazorUI {
             }
 
             function onDragOver(e: DragEvent) {
+                if (!isInZone(e.target)) return;
+
                 // the default must always be prevented, otherwise the browser navigates away
                 // to the dropped file and the app state gets lost.
                 e.preventDefault();
@@ -164,6 +233,8 @@ namespace BitBlazorUI {
             }
 
             function onDragLeave(e: DragEvent) {
+                if (!isInZone(e.target)) return;
+
                 e.preventDefault();
                 if (!hasFiles(e)) return;
 
@@ -204,7 +275,14 @@ namespace BitBlazorUI {
             }
 
             function onDrop(e: DragEvent) {
+                if (!isInZone(e.target)) return;
+
                 e.preventDefault();
+
+                // two uploaders can well be pointed at one shared zone, and the files belong to
+                // whichever of them takes the drop rather than to both of them at once.
+                if (!claim(e)) return;
+
                 removeDragState(true);
 
                 if (!allowDrop || inputElement.disabled || !e.dataTransfer) return;
@@ -235,7 +313,7 @@ namespace BitBlazorUI {
                 if (!e.clipboardData || e.clipboardData.files.length === 0) return;
 
                 const focused = document.activeElement;
-                const isFocusedHere = focused !== null && (focused === inputElement || dropZoneElement.contains(focused));
+                const isFocusedHere = focused !== null && (focused === inputElement || isInZone(focused));
 
                 if (!isFocusedHere) {
                     if (focused !== null && focused !== document.body) return;
@@ -247,11 +325,11 @@ namespace BitBlazorUI {
                 setFiles(e.clipboardData.files);
             }
 
-            dropZoneElement.addEventListener("dragenter", onDragEnter);
-            dropZoneElement.addEventListener("dragover", onDragOver);
-            dropZoneElement.addEventListener("dragleave", onDragLeave);
-            dropZoneElement.addEventListener("drop", onDrop);
-            dropZoneElement.addEventListener('dragend', onDragCancel);
+            document.addEventListener('dragenter', onDragEnter);
+            document.addEventListener('dragover', onDragOver);
+            document.addEventListener('dragleave', onDragLeave);
+            document.addEventListener('drop', onDrop);
+            document.addEventListener('dragend', onDragCancel);
             document.addEventListener('paste', onPaste);
             // the window listener only cleans the state up, it never prevents the default,
             // so a drop landing anywhere else on the page keeps behaving as it did.
@@ -264,12 +342,28 @@ namespace BitBlazorUI {
                     newAllowPaste: boolean,
                     newExpandDirectories: boolean,
                     newDragClass: string,
-                    newDragStyle: string | null) => {
+                    newDragStyle: string | null,
+                    newDropZoneSelector: string | null) => {
 
                     allowDrop = newAllowDrop;
                     allowPaste = newAllowPaste;
                     expandDirectories = newExpandDirectories;
 
+                    if (newDropZoneSelector !== dropZoneSelector) {
+                        // the zones of the old selector are already wearing the drag state, and only they
+                        // can be asked to take it off again.
+                        const isDragging = dragCounter > 0;
+                        if (isDragging) {
+                            clearDragStyling();
+                        }
+
+                        dropZoneSelector = newDropZoneSelector;
+
+                        if (isDragging) {
+                            applyDragStyling();
+                        }
+                    }
+
                     if (newDragClass !== dragClass || newDragStyle !== dragStyle) {
                         // an ongoing drag is already showing the old class and style, which have to come off
                         // before they get replaced, otherwise nothing would ever take them off again.
@@ -292,11 +386,15 @@ namespace BitBlazorUI {
                     }
                 },
                 dispose: () => {
-                    dropZoneElement.removeEventListener('dragenter', onDragEnter);
-                    dropZoneElement.removeEventListener('dragover', onDragOver);
-                    dropZoneElement.removeEventListener('dragleave', onDragLeave);
-                    dropZoneElement.removeEventListener("drop", onDrop);
-                    dropZoneElement.removeEventListener('dragend', onDragCancel);
+                    // a zone the app owns outlives this component, so anything painted on it while a drag
+                    // was still in flight has to come off before the listeners that would have done it go.
+                    removeDragState(true);
+
+                    document.removeEventListener('dragenter', onDragEnter);
+                    document.removeEventListener('dragover', onDragOver);
+                    document.removeEventListener('dragleave', onDragLeave);
+                    document.removeEventListener('drop', onDrop);
+                    document.removeEventListener('dragend', onDragCancel);
                     document.removeEventListener('paste', onPaste);
                     window.removeEventListener('dragend', onDragCancel);
                     window.removeEventListener('drop', onDragCancel);
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
index 70b7eabc6ab..abcaf69f351 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
@@ -33,10 +33,17 @@ public class BitFileUploadClassStyles
     public string? FileItem { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileUpload.
+    /// Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileUpload,
+    /// and for the box that takes its place with a type glyph for a file that is not an image.
     /// </summary>
     public string? Preview { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the type glyph shown in place of the preview thumbnail
+    /// of a file item that is not an image.
+    /// </summary>
+    public string? PreviewIcon { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the file name of each file item of the BitFileUpload.
     /// </summary>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs
index f1547e457ee..1a72eff6b7e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs
@@ -61,11 +61,12 @@ internal static ValueTask<IJSObjectReference> BitFileUploadSetupDragDrop(this IJ
                                                                                   string? dragStyle,
                                                                                   bool allowDrop,
                                                                                   bool allowPaste,
-                                                                                  bool expandDirectories)
+                                                                                  bool expandDirectories,
+                                                                                  string? dropZoneSelector)
     {
         return jsRuntime.Invoke<IJSObjectReference>("BitBlazorUI.FileUpload.setupDragDrop",
                                                     dragDropZoneElement, inputFileElement, dragClass, dragStyle,
-                                                    allowDrop, allowPaste, expandDirectories);
+                                                    allowDrop, allowPaste, expandDirectories, dropZoneSelector);
     }
 
     internal static ValueTask BitFileUploadBrowse(this IJSRuntime jsRuntime, ElementReference inputFileElement)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
index c038291c54f..55b7a554795 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
@@ -96,6 +96,15 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public TimeSpan? AutoRetryDelay { get; set; }
 
+    /// <summary>
+    /// Custom delay before each automatic retry, which is what turns the fixed <see cref="AutoRetryDelay"/>
+    /// into a backoff: it receives the file - whose <see cref="BitFileInfo.ResponseStatus"/> says what the
+    /// server answered - and the number of the attempt about to be made, counting from 1, and returns how
+    /// long to wait before it. Returning null falls back to the <see cref="AutoRetryDelay"/>, which is also
+    /// what a provider that throws does, so a miscalculated delay never swallows the retry itself.
+    /// </summary>
+    public Func<BitFileInfo, int, TimeSpan?>? AutoRetryDelayProvider { get; set; }
+
     /// <summary>
     /// Whether the selected files start uploading the moment they are selected, skipping the per-file
     /// upload button entirely, for the cases where the selection itself expresses the intent to upload.
@@ -186,6 +195,17 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public bool? Directory { get; set; }
 
+    /// <summary>
+    /// A CSS selector of one or more elements outside the component that accept a drop as well, which is how
+    /// a whole form, a card or the page itself becomes the drop target while the browse button stays where it
+    /// is. The root element of the component is always a drop zone and needs no selector of its own; the
+    /// elements this one names are matched whenever a drag reaches them, so one rendered after the component
+    /// - or replaced later on - is a drop zone from the moment it matches. While files are dragged over any
+    /// of them, all of them (the root included) carry the Classes.Dragging class and the Styles.Dragging
+    /// inline style, and the focus being inside one of them is also what lets a paste land in this component.
+    /// </summary>
+    public string? DropZoneSelector { get; set; }
+
     /// <summary>
     /// The message shown for the files rejected for being already in the file list
     /// while <see cref="AllowDuplicates"/> is disabled.
@@ -446,6 +466,8 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// Whether a thumbnail of every selected image is shown at the head of its file item, produced
     /// entirely in the browser from an object URL that is handed back as soon as the file is removed or
     /// the component is reset. The same URL is on the <see cref="BitFileInfo.PreviewUrl"/> of each file.
+    /// A file that is not an image takes a glyph of its type in a box of the same size instead, so that
+    /// the names of a mixed list stay lined up along one edge.
     /// </summary>
     public bool? ShowPreview { get; set; }
 
@@ -644,6 +666,11 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.AutoRetryDelay = AutoRetryDelay.Value;
         }
 
+        if (AutoRetryDelayProvider is not null && bitFileUpload.HasNotBeenSet(nameof(AutoRetryDelayProvider)))
+        {
+            bitFileUpload.AutoRetryDelayProvider = AutoRetryDelayProvider;
+        }
+
         if (AutoUpload.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoUpload)))
         {
             bitFileUpload.AutoUpload = AutoUpload.Value;
@@ -713,6 +740,11 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.Directory = Directory.Value;
         }
 
+        if (DropZoneSelector.HasValue() && bitFileUpload.HasNotBeenSet(nameof(DropZoneSelector)))
+        {
+            bitFileUpload.DropZoneSelector = DropZoneSelector;
+        }
+
         if (DuplicateErrorMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(DuplicateErrorMessage)))
         {
             bitFileUpload.DuplicateErrorMessage = DuplicateErrorMessage!;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
index 6fa92ee0cff..545e680e595 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
@@ -16,17 +16,32 @@
     <div role="listitem"
          style="@FileUpload.Styles?.FileItem"
          class="bit-upl-itm @GetFileElClass(Item.Status) @FileUpload.Classes?.FileItem">
-        @if (FileUpload.ShowPreview && Item.PreviewUrl is not null)
+        @if (FileUpload.ShowPreview)
         {
-            @* draggable is off so that dragging a thumbnail does not start a drag over the drop zone itself.
-               the alt is empty on purpose: the thumbnail is decorative and its name is already
-               right next to it, so announcing it again would just repeat the same text. *@
-            <img src="@Item.PreviewUrl"
-                 alt=""
-                 draggable="false"
-                 decoding="async"
-                 style="@FileUpload.Styles?.Preview"
-                 class="bit-upl-prv @FileUpload.Classes?.Preview" />
+            if (Item.PreviewUrl is not null)
+            {
+                @* draggable is off so that dragging a thumbnail does not start a drag over the drop zone itself.
+                   the alt is empty on purpose: the thumbnail is decorative and its name is already
+                   right next to it, so announcing it again would just repeat the same text. *@
+                <img src="@Item.PreviewUrl"
+                     alt=""
+                     draggable="false"
+                     decoding="async"
+                     style="@FileUpload.Styles?.Preview"
+                     class="bit-upl-prv @FileUpload.Classes?.Preview" />
+            }
+            else
+            {
+                @* only an image has a thumbnail of its own, and a list of mixed files would otherwise be
+                   ragged - every other kind takes a glyph of its type in a box of exactly the same size.
+                   it says nothing a screen reader has not already been told by the name beside it. *@
+                <div aria-hidden="true"
+                     style="@FileUpload.Styles?.Preview"
+                     class="bit-upl-prv bit-upl-pvi @FileUpload.Classes?.Preview">
+                    <i style="@FileUpload.Styles?.PreviewIcon"
+                       class="bit-icon bit-icon--@GetFileGlyph(Item) @FileUpload.Classes?.PreviewIcon" />
+                </div>
+            }
         }
         <div class="bit-upl-fic">
             <div title="@Item.Name" class="bit-upl-fnc">
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
index 1d1d044b5b3..262b0494072 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
@@ -111,6 +111,35 @@ private static long GetFileUploadSize(BitFileInfo file)
         return Math.Min(file.Size, file.TotalUploadedSize + file.LastChunkUploadedSize);
     }
 
+    // The glyph standing in for a file that has no thumbnail of its own. The content type the browser
+    // reports is asked first, since it is what the file really is, and the extension only answers for the
+    // types a browser leaves blank - a .zip or a .csv on a machine that has nothing registered for them.
+    private static string GetFileGlyph(BitFileInfo file)
+    {
+        var contentType = file.ContentType;
+
+        if (contentType.HasValue())
+        {
+            if (contentType.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) return "Photo2";
+            if (contentType.StartsWith("video/", StringComparison.OrdinalIgnoreCase)) return "Video";
+            if (contentType.StartsWith("audio/", StringComparison.OrdinalIgnoreCase)) return "MusicInCollection";
+            if (contentType.Equals("application/pdf", StringComparison.OrdinalIgnoreCase)) return "PDF";
+            if (contentType.StartsWith("text/", StringComparison.OrdinalIgnoreCase)) return "TextDocument";
+        }
+
+        return Path.GetExtension(file.Name).ToLowerInvariant() switch
+        {
+            ".pdf" => "PDF",
+            ".doc" or ".docx" or ".rtf" or ".odt" => "WordDocument",
+            ".xls" or ".xlsx" or ".csv" or ".ods" => "ExcelDocument",
+            ".ppt" or ".pptx" or ".odp" => "PowerPointDocument",
+            ".zip" or ".rar" or ".7z" or ".tar" or ".gz" => "ZipFolder",
+            ".txt" or ".md" or ".log" => "TextDocument",
+            ".json" or ".xml" or ".html" or ".htm" or ".css" or ".js" or ".ts" or ".cs" => "FileCode",
+            _ => "Page"
+        };
+    }
+
     private string FormatSize(long size)
     {
         return FileUpload.FileSizeFormatter is null ? FileSizeHumanizer.Humanize(size) : FileUpload.FileSizeFormatter(size);
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index 52d19d9027f..61129abd2dc 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -6,7 +6,7 @@
             Description="An upload component that sends files to a server endpoint over HTTP, with browse, drag-and-drop, paste, folder and camera selection, chunked transfers, progress, retries and validation." />
 
 <DemoPage Name="FileUpload"
-          Description="BitFileUpload is the transport half of working with files: it takes the files the user hands over and uploads them to a server endpoint over HTTP. Files arrive through the file dialog, a drag out of the OS, a clipboard paste, a whole folder or the camera on a phone, and go out automatically on selection or on demand, as a single request per file or in chunks. Every file reports its own progress and can be paused, resumed, canceled, retried and removed from the server again, and selections are validated on arrival against size, count, extension, MIME type, duplicate, image dimension and custom rules. The upload and remove requests are customizable down to a per-request async provider, which is what makes an expiring token or a presigned URL work over a long transfer, and the whole control is themable, templatable and announced to screen readers. For plain file selection without any uploading, reach for the BitFileInput component instead."
+          Description="BitFileUpload is the transport half of working with files: it takes the files the user hands over and uploads them to a server endpoint over HTTP. Files arrive through the file dialog, a drag out of the OS onto the component or onto a drop zone of your own, a clipboard paste, a whole folder or the camera on a phone, and go out automatically on selection or on demand, as a single request per file or in chunks. Every file reports its own progress and can be paused, resumed, canceled, retried and removed from the server again, and selections are validated on arrival against size, count, extension, MIME type, duplicate, image dimension and custom rules. The upload and remove requests are customizable down to a per-request async provider, which is what makes an expiring token or a presigned URL work over a long transfer, and the whole control is themable, templatable and announced to screen readers. For plain file selection without any uploading, reach for the BitFileInput component instead."
           Parameters="componentParameters"
           SubClasses="componentSubClasses"
           SubEnums="componentSubEnums"
@@ -27,7 +27,8 @@
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" />
     </DemoExample>
 
-    <DemoExample Title="AllowDrop & AllowPaste" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+    <DemoExample Title="Drop zone" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode"
+                 CodeFiles="@example2CodeFiles" Id="example2">
         <div>
             The two alternative routes switch off independently. <b>AllowDrop</b> controls dropping files out of the
             OS: turning it off shows a "no drop" cursor and still swallows the event, so the browser does not
@@ -41,6 +42,25 @@
         <BitCheckbox @bind-Value="allowPaste" Label="AllowPaste" />
         <br />
         <BitFileUpload Label="Select, drop or paste files" UploadUrl="@UploadUrl" AllowDrop="allowDrop" AllowPaste="allowPaste" />
+
+        <br /><br /><br />
+
+        <div>
+            The component itself is always a drop zone, and <b>DropZoneSelector</b> nominates more of them: any
+            element matching the selector takes a drop as well, so a whole form, a card or the page becomes the
+            target while the browse button stays where it is. The element is matched when the drag reaches it, so
+            one rendered later works with nothing to re-wire, and while a drag is in flight every zone - this
+            component included - carries <b>Classes.Dragging</b> and <b>Styles.Dragging</b>, which is the hook the
+            card below highlights itself with. Having the focus inside a zone also lets a paste land in the
+            component.
+        </div>
+        <br />
+        <div id="fileupload-drop-zone" class="drop-zone">
+            <div>Drop files anywhere in this card</div>
+            <BitFileUpload Label="...or browse for them" UploadUrl="@UploadUrl" Multiple
+                           DropZoneSelector="#fileupload-drop-zone"
+                           Classes="@(new() { Dragging = "drop-zone-dragging" })" />
+        </div>
     </DemoExample>
 
     <DemoExample Title="Description" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
@@ -215,15 +235,23 @@
                        Description="Opens the front camera on a mobile device." />
     </DemoExample>
 
-    <DemoExample Title="Image preview & dimensions" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <DemoExample Title="Preview & image dimensions" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
             <b>ShowPreview</b> puts a thumbnail of every selected image at the head of its item, so the user can
             confirm they picked the right picture before a byte goes out. It is produced in the browser from an
             object URL - nothing is uploaded to render it - and the URL is handed back as soon as the file is removed
             or the component is reset, which is what keeps a long-lived page from holding every picture ever picked.
-            <b>BitFileInfo.PreviewUrl</b> exposes the same URL to a custom <b>FileViewTemplate</b>.
+            <b>BitFileInfo.PreviewUrl</b> exposes the same URL to a custom <b>FileViewTemplate</b>. Only an image has
+            a thumbnail of its own, so every other kind of file takes a glyph of its type - read off the content type,
+            falling back to the extension - in a box of exactly the same size, which is what keeps the names of a
+            mixed list lined up along one edge.
         </div>
         <br />
+        <div>A mixed selection - pick an image, a PDF and an archive to compare:</div>
+        <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple ShowPreview
+                       ShowRemoveButton RemoveUrl="@RemoveUrl" />
+        <br />
         <div>
             A limit in bytes is a poor way to say "nothing bigger than 4K": what matters for an image is its pixels.
             <b>ReadImageDimensions</b> decodes every selected image in the browser and fills the <b>Width</b> and
@@ -266,13 +294,23 @@
             once the whole batch has reached a terminal state. Try a file over 1 MB to see <b>OnInvalid</b> at work.
         </div>
         <br />
+        <div>
+            Each callback receives the <b>BitFileInfo</b> of the file, which carries what the server said about it:
+            <b>ResponseStatus</b> is the HTTP status code of its last upload or removal response - 0 when the request
+            never reached the server at all - and <b>Message</b> is the response body. That is what tells an expired
+            token (401) from a payload the server refused (413) from a network that dropped, so a failure can be
+            answered instead of only reported.
+        </div>
+        <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple MaxSize="1024 * 1024 * 1"
                        OnAllUploadsComplete="@(() => onAllUploadsCompleteText = "All files are uploaded")"
                        OnInvalid="@(files => onInvalidText = $"{files.Length} file(s) rejected: {string.Join(", ", files.Select(f => f.Name))}")"
+                       OnUploadFailed="@(info => onUploadFailedText = $"{info.Name} failed with status {info.ResponseStatus}")"
                        OnUploading="@(info => info.HttpHeaders = new Dictionary<string, string> { {"key1", "value1"} })" />
         <br />
         <div>@onAllUploadsCompleteText</div>
         <div>@onInvalidText</div>
+        <div>@onUploadFailedText</div>
     </DemoExample>
 
     <DemoExample Title="Chunked" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
@@ -365,6 +403,13 @@
             <b>ShouldAutoRetry</b> replaces that rule with your own, receiving the file and the status code.
         </div>
         <br />
+        <div>
+            Hammering a server that is already struggling with evenly spaced retries is what turns a blip into an
+            outage, so <b>AutoRetryDelayProvider</b> replaces the fixed delay with one worked out per attempt - it
+            receives the file, whose <b>ResponseStatus</b> says what came back, and the number of the attempt about
+            to be made, and the usual answer is an exponential backoff with a little jitter.
+        </div>
+        <br />
         <div>
             Once the budget is exhausted the file settles as failed and the item offers a retry button - distinct
             from the upload button of a never-started file in both icon and wording, so a second attempt never reads
@@ -391,6 +436,14 @@
                        AutoRetries="2" AutoRetryDelay="TimeSpan.FromSeconds(1)"
                        ShouldAutoRetry="@((file, status) => true)"
                        RetryButtonTitle="Try again" />
+        <br /><br />
+        <div>The same, backing off 1s, 2s then 4s instead of retrying on a fixed beat:</div>
+        <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@NonExistingUploadUrl"
+                       AutoRetries="3"
+                       ShouldAutoRetry="@((file, status) => true)"
+                       AutoRetryDelayProvider="@BackOff"
+                       RetryButtonTitle="Try again" />
     </DemoExample>
 
     <DemoExample Title="ConcurrentUploads" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
@@ -842,9 +895,10 @@
         <div>
             <b>Style</b> and <b>Class</b> land on the root element. For anything deeper, <b>Styles</b> and
             <b>Classes</b> reach the individual parts - the browse button, the description, the file list, each item,
-            its name, size, percentage, progress bar, status message and every action button and icon - and their
-            <b>Dragging</b> entry applies to the root only while files are dragged over the component, which is how
-            the examples below restyle the drop state without touching the idle look.
+            its preview, name, size, percentage, progress bar, status message and every action button and icon - and
+            their <b>Dragging</b> entry applies only while files are dragged over the component (or over one of its
+            <BitLink Href="#example2">drop zones</BitLink>), which is how the examples below restyle the drop state
+            without touching the idle look.
         </div>
 
         <br /><br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index 0e684b0a09f..1c6f90ae84d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -84,6 +84,13 @@ public partial class BitFileUploadDemo
             Description = "The delay before each automatic retry of a failed upload. Set to null (the default) to retry immediately."
         },
         new()
+        {
+            Name = "AutoRetryDelayProvider",
+            Type = "Func<BitFileInfo, int, TimeSpan?>?",
+            DefaultValue = "null",
+            Description = "Custom delay before each automatic retry, which is what turns the fixed AutoRetryDelay into a backoff: it receives the file - whose ResponseStatus says what the server answered - and the number of the attempt about to be made, counting from 1, and returns how long to wait before it. Returning null falls back to the AutoRetryDelay, which is also what a provider that throws does, so a miscalculated delay never swallows the retry itself."
+        },
+        new()
         {
             Name = "AutoUpload",
             Type = "bool",
@@ -190,6 +197,13 @@ public partial class BitFileUploadDemo
             Description = "Whether to select folders (directories) instead of files, rendered as the webkitdirectory attribute. All files inside the selected folder and its subfolders will be added to the file list. It also makes a dropped folder expand into its contents instead of being ignored.",
         },
         new()
+        {
+            Name = "DropZoneSelector",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "A CSS selector of one or more elements outside the component that accept a drop as well, which is how a whole form, a card or the page itself becomes the drop target while the browse button stays where it is. The root element is always a drop zone and needs no selector of its own; the elements this one names are matched whenever a drag reaches them, so one rendered later is a drop zone from the moment it matches. While files are dragged over any of them, all of them carry the Classes.Dragging class and the Styles.Dragging inline style, and the focus being inside one of them is also what lets a paste land in this component.",
+        },
+        new()
         {
             Name = "DuplicateErrorMessage",
             Type = "string",
@@ -559,7 +573,7 @@ public partial class BitFileUploadDemo
             Name = "ShowPreview",
             Type = "bool",
             DefaultValue = "false",
-            Description = "Whether a thumbnail of every selected image is shown at the head of its file item, produced entirely in the browser from an object URL that is handed back as soon as the file is removed or the component is reset. The same URL is on the PreviewUrl of each file."
+            Description = "Whether a thumbnail of every selected image is shown at the head of its file item, produced entirely in the browser from an object URL that is handed back as soon as the file is removed or the component is reset. The same URL is on the PreviewUrl of each file. A file that is not an image takes a glyph of its type in a box of the same size instead, so that the names of a mixed list stay lined up along one edge."
         },
         new()
         {
@@ -852,6 +866,13 @@ public partial class BitFileUploadDemo
                    Description = "The message attached to the current Status of the file: the reason it was rejected by the validations before the upload, or the body of the server response of its upload or removal."
                },
                new()
+               {
+                   Name = "ResponseStatus",
+                   Type = "int?",
+                   DefaultValue = "null",
+                   Description = "The HTTP status code of the last upload or removal response this file received, which is what tells an authorization problem from a payload that was too large or from a server that is temporarily down. It is 0 when the request never reached the server at all - a network error, a timeout or an abort - and null while no request of this file has come back yet."
+               },
+               new()
                {
                    Name = "Status",
                    Type = "BitFileUploadStatus",
@@ -929,7 +950,14 @@ public partial class BitFileUploadDemo
                    Name = "Preview",
                    Type = "string?",
                    DefaultValue = "null",
-                   Description = "Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileUpload."
+                   Description = "Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileUpload, and for the box that takes its place with a type glyph for a file that is not an image."
+               },
+               new()
+               {
+                   Name = "PreviewIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the type glyph shown in place of the preview thumbnail of a file item that is not an image."
                },
                new()
                {
@@ -1428,6 +1456,12 @@ public partial class BitFileUploadDemo
             Description = "Text size of a file item's name.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-item-font-weight",
+            DefaultValue = "--bit-tg-fw-light",
+            Description = "Text weight of a file item's name.",
+        },
+        new()
         {
             Name = "--bit-FileUpload-success-color",
             DefaultValue = "--bit-clr-suc",
@@ -1458,6 +1492,24 @@ public partial class BitFileUploadDemo
             Description = "Corner radius of the image preview thumbnail.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-preview-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Fill of the box that stands in for the thumbnail of a file that is not an image.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-preview-icon-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "The file type glyph inside that box.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-preview-icon-size",
+            DefaultValue = "Per Size (--bit-siz-icon-sm / -md / -lg)",
+            Description = "Size of that glyph.",
+        },
+        new()
         {
             Name = "--bit-FileUpload-progress-color",
             DefaultValue = "The Color role's main color",
@@ -1570,6 +1622,7 @@ public partial class BitFileUploadDemo
     private int tokenRequestCount;
     private BitVariant variant = BitVariant.Fill;
     private string onInvalidText = string.Empty;
+    private string onUploadFailedText = string.Empty;
     private string onAllUploadsCompleteText = "No File";
     private string UploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/UploadNonChunkedFile";
     private string ChunkedUploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/UploadChunkedFile";
@@ -1621,6 +1674,12 @@ protected override void OnInitialized()
         return file.Size == 0 ? "Empty files cannot be uploaded." : null;
     }
 
+    // 1s, 2s, 4s, ... with a little jitter, so a batch that failed together does not come back together.
+    private static TimeSpan? BackOff(BitFileInfo file, int attempt)
+    {
+        return TimeSpan.FromSeconds(Math.Pow(2, attempt - 1)) + TimeSpan.FromMilliseconds(Random.Shared.Next(250));
+    }
+
     private static string? ValidateImageDimensions(BitFileInfo file)
     {
         // an image the browser could not decode has no dimensions to judge, which is not the same
@@ -1709,11 +1768,40 @@ private async Task HandleBrowseFileOnClick()
 <BitCheckbox @bind-Value=""allowDrop"" Label=""AllowDrop"" />
 <BitCheckbox @bind-Value=""allowPaste"" Label=""AllowPaste"" />
 
-<BitFileUpload Label=""Select, drop or paste files"" UploadUrl=""@UploadUrl"" AllowDrop=""allowDrop"" AllowPaste=""allowPaste"" />";
+<BitFileUpload Label=""Select, drop or paste files"" UploadUrl=""@UploadUrl"" AllowDrop=""allowDrop"" AllowPaste=""allowPaste"" />
+
+<div id=""fileupload-drop-zone"" class=""drop-zone"">
+    <div>Drop files anywhere in this card</div>
+    <BitFileUpload Label=""...or browse for them"" UploadUrl=""@UploadUrl"" Multiple
+                   DropZoneSelector=""#fileupload-drop-zone""
+                   Classes=""@(new() { Dragging = ""drop-zone-dragging"" })"" />
+</div>";
     private readonly string example2CsharpCode = @"
 private bool allowDrop = true;
 private bool allowPaste = true;
 private string UploadUrl = ""/Upload"";";
+    private const string example2ScssCode = @"
+// every drop zone carries Classes.Dragging while files are dragged over any of them,
+// which is the hook the card highlights itself with.
+.drop-zone {
+    gap: 1rem;
+    display: flex;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    border: 2px dashed var(--bit-clr-brd-pri);
+    transition: border-color 0.2s, background-color 0.2s;
+
+    &.drop-zone-dragging {
+        border-color: var(--bit-clr-pri);
+        background-color: var(--bit-clr-bg-sec);
+    }
+}";
+    private readonly DemoCodeFile[] example2CodeFiles =
+    [
+        new("BitFileUploadDemo.razor.scss", example2ScssCode),
+    ];
 
     private readonly string example3RazorCode = @"
 <BitFileUpload Label=""Browse for a document"" UploadUrl=""@UploadUrl"" Accept="".pdf,.docx"" MaxSize=""1024 * 1024 * 5""
@@ -1801,6 +1889,9 @@ private async Task HandleBrowseFileOnClick()
 </style>
 
 
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
+               ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+
 <BitFileUpload Label=""Select or drag and drop images"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
                Accept=""image/*"" ReadImageDimensions FileValidator=""@ValidateImageDimensions""
                ShowRemoveButton RemoveUrl=""@RemoveUrl""
@@ -1836,13 +1927,16 @@ private async Task HandleBrowseFileOnClick()
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple MaxSize=""1024 * 1024 * 1""
                OnAllUploadsComplete=""@(() => onAllUploadsCompleteText = ""All files are uploaded"")""
                OnInvalid=""@(files => onInvalidText = $""{files.Length} file(s) rejected: {string.Join("", "", files.Select(f => f.Name))}"")""
+               OnUploadFailed=""@(info => onUploadFailedText = $""{info.Name} failed with status {info.ResponseStatus}"")""
                OnUploading=""@(info => info.HttpHeaders = new Dictionary<string, string> { {""key1"", ""value1""} })"" />
 
 <div>@onAllUploadsCompleteText</div>
-<div>@onInvalidText</div>";
+<div>@onInvalidText</div>
+<div>@onUploadFailedText</div>";
     private readonly string example10CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string onInvalidText = string.Empty;
+private string onUploadFailedText = string.Empty;
 private string onAllUploadsCompleteText = ""No File"";";
 
     private readonly string example11RazorCode = @"
@@ -1897,10 +1991,22 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@NonExistingUploadUrl""
                AutoRetries=""2"" AutoRetryDelay=""TimeSpan.FromSeconds(1)""
                ShouldAutoRetry=""@((file, status) => true)""
+               RetryButtonTitle=""Try again"" />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@NonExistingUploadUrl""
+               AutoRetries=""3""
+               ShouldAutoRetry=""@((file, status) => true)""
+               AutoRetryDelayProvider=""@BackOff""
                RetryButtonTitle=""Try again"" />";
     private readonly string example13CsharpCode = @"
 private string UploadUrl = ""/Upload"";
-private string NonExistingUploadUrl = ""/MissingUploadEndpoint"";";
+private string NonExistingUploadUrl = ""/MissingUploadEndpoint"";
+
+// 1s, 2s, 4s, ... with a little jitter, so a batch that failed together does not come back together.
+private static TimeSpan? BackOff(BitFileInfo file, int attempt)
+{
+    return TimeSpan.FromSeconds(Math.Pow(2, attempt - 1)) + TimeSpan.FromMilliseconds(Random.Shared.Next(250));
+}";
 
     private readonly string example14RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ConcurrentUploads=""2"" />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
index 08ffad1e796..27374217660 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
@@ -16,6 +16,25 @@
     flex-flow: column nowrap;
 }
 
+// every element a DropZoneSelector names carries Classes.Dragging while files are dragged over any of
+// the zones, which is the hook this card highlights itself with - no ::deep, since the class lands on
+// a plain element written right in this page.
+.drop-zone {
+    gap: 1rem;
+    display: flex;
+    padding: 1.5rem;
+    border-radius: 0.5rem;
+    flex-flow: column nowrap;
+    align-items: flex-start;
+    border: 2px dashed var(--bit-clr-brd-pri);
+    transition: border-color 0.2s, background-color 0.2s;
+
+    &.drop-zone-dragging {
+        border-color: var(--bit-clr-pri);
+        background-color: var(--bit-clr-bg-sec);
+    }
+}
+
 .dimensions-item {
     gap: 1rem;
     display: flex;
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
index a45097ec5b1..1a97f861a96 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
@@ -1596,7 +1596,7 @@ public void BitFileUploadShouldNotRenderThePreviewWhenShowPreviewIsOff()
     }
 
     [TestMethod]
-    public void BitFileUploadShouldNotRenderThePreviewOfANonImageFile()
+    public void BitFileUploadShouldNotRenderAThumbnailForANonImageFile()
     {
         SetupFiles([new() { Name = "notes.txt", Size = 100, FileId = "1", Index = 0 }]);
 
@@ -1607,7 +1607,10 @@ public void BitFileUploadShouldNotRenderThePreviewOfANonImageFile()
 
         SelectFiles(com);
 
-        Assert.IsEmpty(com.FindAll(".bit-upl-prv"));
+        // only an image has a thumbnail of its own; the box is still there, carrying a type glyph,
+        // so the names of a mixed list stay lined up along one edge.
+        Assert.IsEmpty(com.FindAll("img.bit-upl-prv"));
+        Assert.HasCount(1, com.FindAll(".bit-upl-prv.bit-upl-pvi"));
     }
 
     [TestMethod]
@@ -2997,6 +3000,198 @@ public async Task BitFileUploadShouldMoveTheFocusOnWhenAnItemButtonRemovesItsFil
         Context.JSInterop.VerifyInvoke("Blazor._internal.domWrapper.focus");
     }
 
+    [TestMethod]
+    public async Task BitFileUploadShouldReportTheHttpStatusOfTheUploadResponse()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        BitFileInfo? failed = null;
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.OnUploadFailed, file => failed = file);
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 413, "too large"));
+
+        // the status is what tells an expired token from a payload the server refused from a network
+        // that dropped, none of which the response body is obliged to say anything about.
+        Assert.IsNotNull(failed);
+        Assert.AreEqual(413, failed.ResponseStatus);
+        Assert.AreEqual("too large", failed.Message);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldReportTheHttpStatusOfASuccessfulUploadResponse()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>();
+
+        SelectFiles(com);
+
+        Assert.IsNull(com.Instance.Files[0].ResponseStatus);
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 201, "done"));
+
+        Assert.AreEqual(201, com.Instance.Files[0].ResponseStatus);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldReportTheHttpStatusOfTheRemovalResponse()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "file-1", Index = 0 }]);
+
+        SetupHttpClient(HttpStatusCode.Forbidden);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.RemoveUrl, "https://localhost/remove");
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 200, "done"));
+        await com.InvokeAsync(() => com.Instance.RemoveFile(com.Instance.Files[0]));
+
+        Assert.AreEqual(BitFileUploadStatus.RemoveFailed, com.Instance.Files[0].Status);
+        Assert.AreEqual(403, com.Instance.Files[0].ResponseStatus);
+    }
+
+    [TestMethod,
+       DataRow("photo.png", "image/png", "Photo2"),
+       DataRow("clip.mp4", "video/mp4", "Video"),
+       DataRow("report.pdf", "", "PDF"),
+       DataRow("sheet.xlsx", "", "ExcelDocument"),
+       DataRow("bundle.zip", "", "ZipFolder"),
+       DataRow("data.bin", "", "Page")
+    ]
+    public void BitFileUploadShouldShowATypeGlyphForAFileWithoutAThumbnail(string name, string contentType, string glyph)
+    {
+        SetupFiles([new() { Name = name, ContentType = contentType, Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.ShowPreview, true);
+        });
+
+        SelectFiles(com);
+
+        // the preview box is there whatever the file is, so the names of a mixed list line up; only an
+        // image ever carries a thumbnail of its own, and the browser is what produces that.
+        var preview = com.Find(".bit-upl-prv");
+
+        Assert.AreEqual("DIV", preview.TagName);
+        Assert.Contains("bit-upl-pvi", preview.ClassName);
+        Assert.Contains($"bit-icon--{glyph}", preview.InnerHtml);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldShowTheThumbnailOfAnImageThatHasOne()
+    {
+        SetupFiles([new() { Name = "photo.png", ContentType = "image/png", Size = 100, FileId = "1", Index = 0,
+                            PreviewUrl = "blob:preview" }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.ShowPreview, true);
+        });
+
+        SelectFiles(com);
+
+        var preview = com.Find(".bit-upl-prv");
+
+        Assert.AreEqual("IMG", preview.TagName);
+        Assert.AreEqual("blob:preview", preview.GetAttribute("src"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldNotShowAPreviewBoxWithoutShowPreview()
+    {
+        SetupFiles([new() { Name = "report.pdf", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>();
+
+        SelectFiles(com);
+
+        Assert.IsEmpty(com.FindAll(".bit-upl-prv"));
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldAskTheAutoRetryDelayProviderForEachAttempt()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        List<int> attempts = [];
+        List<int?> statuses = [];
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.AutoRetries, 2);
+            parameters.Add(p => p.AutoRetryDelayProvider, (file, attempt) =>
+            {
+                attempts.Add(attempt);
+                statuses.Add(file.ResponseStatus);
+
+                return TimeSpan.Zero;
+            });
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 503, "busy"));
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 503, "busy"));
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 503, "busy"));
+
+        // the attempts count from 1, and the file carries the status of the response that failed, which
+        // is what a backoff answering a 503 differently from a 429 reads.
+        Assert.AreEqual("1,2", string.Join(",", attempts));
+        Assert.AreEqual("503,503", string.Join(",", statuses));
+        Assert.AreEqual(BitFileUploadStatus.Failed, com.Instance.Files[0].Status);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldStillRetryWhenTheAutoRetryDelayProviderThrows()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.AutoRetries, 1);
+            parameters.Add(p => p.AutoRetryDelayProvider, (_, _) => throw new InvalidOperationException("boom"));
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUpload(0, 500, "boom"));
+
+        // a provider that throws decides nothing, and the retry it was asked about still happens.
+        Assert.AreEqual(BitFileUploadStatus.InProgress, com.Instance.Files[0].Status);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldPassTheDropZoneSelectorToTheDragDropSetup()
+    {
+        RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.DropZoneSelector, "#zone");
+        });
+
+        var invocation = Context.JSInterop.Invocations
+                                .Single(i => i.Identifier == "BitBlazorUI.FileUpload.setupDragDrop");
+
+        // the selector is the last argument of the setup, and it is what makes an element the app owns
+        // a drop zone of this component.
+        Assert.AreEqual("#zone", invocation.Arguments[^1]);
+    }
+
     private void SetupFiles(BitFileInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInfo[]>("BitBlazorUI.FileUpload.setup", _ => true).SetResult(files);

From 0812d2ee22209d6ea2692f806edfc1ac11731ee5 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 09:51:24 +0330
Subject: [PATCH 3/8] resolve review comments

---
 .../Components/Inputs/FileUpload/BitFileUpload.scss |  2 +-
 .../Inputs/FileUpload/BitFileUploadTests.cs         | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
index 5d1ee3dcc74..03118690754 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
@@ -428,7 +428,7 @@
 
     &:disabled {
         cursor: default;
-        color: $clr-fg-dis;
+        color: var(--bit-FileUpload-disabled-color, #{$clr-fg-dis});
         background-color: transparent;
     }
 
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
index 1a97f861a96..c1bdd8fb9eb 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
@@ -2991,13 +2991,24 @@ public async Task BitFileUploadShouldMoveTheFocusOnWhenAnItemButtonRemovesItsFil
 
         Assert.HasCount(2, removeButtons);
 
+        var focusCountBeforeRemove = Context.JSInterop.Invocations["Blazor._internal.domWrapper.focus"].Count;
+
+        // the item of b.txt is keyed, so its button survives the removal as the same element - and the
+        // reference id of an element is written into the markup by the render that captured it, never
+        // again by the renders it lives through. so the button is picked up before the click.
+        var remainingRemoveButton = com.FindAll(".bit-upl-itm .bit-upl-usi[aria-label='Remove b.txt']")[0];
+
         await com.Find(".bit-upl-itm .bit-upl-usi[aria-label='Remove a.txt']").ClickAsync(new());
 
         // the removed file leaves the list, and the focus is handed to the item that takes its place
         // rather than being dropped on the document body with the button that was pressed.
         Assert.AreEqual(BitFileUploadStatus.Removed, com.Instance.Files[0].Status);
         Assert.HasCount(1, com.FindAll(".bit-upl-itm"));
-        Context.JSInterop.VerifyInvoke("Blazor._internal.domWrapper.focus");
+
+        var focused = Context.JSInterop.Invocations["Blazor._internal.domWrapper.focus"].ToList();
+
+        Assert.AreEqual(focusCountBeforeRemove + 1, focused.Count);
+        focused[^1].Arguments[0].ShouldBeElementReferenceTo(remainingRemoveButton);
     }
 
     [TestMethod]

From 68ff1ece0e51b69bb2fa27abbf2e593a0ffc2d98 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 11:50:36 +0330
Subject: [PATCH 4/8] code review

---
 .../Inputs/FileUpload/BitFileUpload.ts        | 67 ++++++++++++++-----
 .../Inputs/FileUpload/BitFileUploadParams.cs  | 14 +++-
 .../FileUpload/BitFileUploadDemo.razor.cs     |  2 +-
 3 files changed, 62 insertions(+), 21 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
index dd12d9ff5d0..8f6d5e0170e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
@@ -104,9 +104,9 @@ namespace BitBlazorUI {
             // element the app owns gets exactly its own style back rather than losing it.
             const originalStyles = new Map<HTMLElement, string | null>();
 
-            // a page can well point two uploaders at one shared drop zone, so a drop landing in it is
-            // claimed by the first of them to see it rather than handed to every one of them.
-            const handledFlag = '__bitUplDrop';
+            // a page can well point two uploaders at one shared zone, so a drop or a paste landing in it
+            // is claimed by the first of them to see it rather than handed to every one of them.
+            const handledFlag = '__bitUplHandled';
 
             function claim(e: Event) {
                 if ((e as any)[handledFlag]) return false;
@@ -164,16 +164,37 @@ namespace BitBlazorUI {
                 return allowDrop && !inputElement.disabled && hasFiles(e);
             }
 
+            function paintZone(zone: HTMLElement) {
+                zone.classList.add(...dragClasses);
+
+                if (!dragStyle) return;
+                const original = zone.getAttribute('style');
+                originalStyles.set(zone, original);
+                zone.setAttribute('style', [original, dragStyle].filter(s => s).join(';'));
+            }
+
             function applyDragStyling() {
                 zones = resolveZones();
 
-                zones.forEach(zone => {
-                    zone.classList.add(...dragClasses);
+                zones.forEach(zone => paintZone(zone));
+            }
 
-                    if (!dragStyle) return;
-                    const original = zone.getAttribute('style');
-                    originalStyles.set(zone, original);
-                    zone.setAttribute('style', [original, dragStyle].filter(s => s).join(';'));
+            // a zone can be rendered - or start matching the selector - while the drag is already in
+            // flight, and a zone that takes the drop is a zone that shows it is about to. the ones already
+            // painted are left alone so that the style they had before the drag is remembered once rather
+            // than overwritten with the dragging one.
+            // the painted zones are asked by containment rather than by running the selector again, so this
+            // costs nothing on a dragover, which fires several times a second.
+            function isPainted(target: EventTarget | null) {
+                return target instanceof Node && zones.some(zone => zone.contains(target));
+            }
+
+            function syncDragStyling() {
+                resolveZones().forEach(zone => {
+                    if (zones.indexOf(zone) >= 0) return;
+
+                    zones.push(zone);
+                    paintZone(zone);
                 });
             }
 
@@ -196,7 +217,10 @@ namespace BitBlazorUI {
 
             function addDragState() {
                 dragCounter++;
-                if (dragCounter > 1) return;
+                if (dragCounter > 1) {
+                    syncDragStyling();
+                    return;
+                }
 
                 applyDragStyling();
             }
@@ -228,8 +252,16 @@ namespace BitBlazorUI {
 
                 if (!e.dataTransfer) return;
 
+                const accepts = canAcceptDrop(e);
+
                 // gives the OS the correct drag cursor (a copy badge or a no-drop sign).
-                e.dataTransfer.dropEffect = canAcceptDrop(e) ? 'copy' : 'none';
+                e.dataTransfer.dropEffect = accepts ? 'copy' : 'none';
+
+                // a zone can also come up underneath a pointer that is already over it, which leaves no
+                // dragenter of its own for it to be noticed by.
+                if (accepts && dragCounter > 0 && !isPainted(e.target)) {
+                    syncDragStyling();
+                }
             }
 
             function onDragLeave(e: DragEvent) {
@@ -306,8 +338,7 @@ namespace BitBlazorUI {
             // nor the hidden file input can ever hold it, so the listener sits on the document and decides
             // for itself whether the paste was meant for this component: the focus being somewhere inside
             // it, or nothing on the page holding the focus at all. in that second case the paste belongs to
-            // no one in particular, so the first paste enabled upload on the page takes it and marks the
-            // event, otherwise a second one would end up with a copy of the same files.
+            // no one in particular, so whichever paste enabled upload on the page sees it first takes it.
             function onPaste(e: ClipboardEvent) {
                 if (!allowPaste || inputElement.disabled) return;
                 if (!e.clipboardData || e.clipboardData.files.length === 0) return;
@@ -315,12 +346,12 @@ namespace BitBlazorUI {
                 const focused = document.activeElement;
                 const isFocusedHere = focused !== null && (focused === inputElement || isInZone(focused));
 
-                if (!isFocusedHere) {
-                    if (focused !== null && focused !== document.body) return;
-                    if ((e as any).bitPasteHandled) return;
+                // the focus sitting inside some unrelated element is a paste meant for that element.
+                if (!isFocusedHere && focused !== null && focused !== document.body) return;
 
-                    (e as any).bitPasteHandled = true;
-                }
+                // the focus can be inside a zone two uploaders share just as well as it can be nowhere at
+                // all, so either way the files belong to one of them rather than to both at once.
+                if (!claim(e)) return;
 
                 setFiles(e.clipboardData.files);
             }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
index 55b7a554795..b530c86e90a 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
@@ -611,6 +611,10 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
 
         UpdateBaseParameters(bitFileUpload);
 
+        // the working chunk size is only worth deriving again when one of the two parameters it comes from
+        // actually moves, exactly as the generated setter of each of them decides.
+        var chunkSizeChanged = false;
+
         if (Accept.HasValue() && bitFileUpload.HasNotBeenSet(nameof(Accept)))
         {
             bitFileUpload.Accept = Accept;
@@ -648,6 +652,8 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
 
         if (AutoChunkSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(AutoChunkSize)))
         {
+            chunkSizeChanged = chunkSizeChanged || bitFileUpload.AutoChunkSize != AutoChunkSize.Value;
+
             bitFileUpload.AutoChunkSize = AutoChunkSize.Value;
         }
 
@@ -703,6 +709,8 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
 
         if (ChunkSize.HasValue && bitFileUpload.HasNotBeenSet(nameof(ChunkSize)))
         {
+            chunkSizeChanged = chunkSizeChanged || bitFileUpload.ChunkSize != ChunkSize.Value;
+
             bitFileUpload.ChunkSize = ChunkSize.Value;
         }
 
@@ -1037,8 +1045,10 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
         }
 
         // The working chunk size is derived from ChunkSize and AutoChunkSize by a setter that assigning
-        // the properties here goes around, so it is derived again once both of them are in place.
-        if (ChunkSize.HasValue || AutoChunkSize.HasValue)
+        // the properties here goes around, so it is derived again once both of them are in place. Deriving
+        // it on every parameter set instead would throw away the speed AutoChunkSize has measured, since
+        // this runs on each render of whatever holds the BitParams rather than only when one of them moves.
+        if (chunkSizeChanged)
         {
             bitFileUpload.OnSetChunkSize();
         }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index 1c6f90ae84d..95dbbad6454 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -1458,7 +1458,7 @@ public partial class BitFileUploadDemo
         new()
         {
             Name = "--bit-FileUpload-item-font-weight",
-            DefaultValue = "--bit-tg-fw-light",
+            DefaultValue = "--bit-tpg-fw-light",
             Description = "Text weight of a file item's name.",
         },
         new()

From 3bcad67202149c937543b3c2704b42f51b953879 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Tue, 22 Sep 2026 13:39:00 +0330
Subject: [PATCH 5/8] improve further

---
 .../Inputs/FileUpload/BitFileInfo.cs          |  11 +-
 .../Inputs/FileUpload/BitFileUpload.razor.cs  | 246 ++++++++++--
 .../Inputs/FileUpload/BitFileUpload.scss      |  20 +
 .../Inputs/FileUpload/BitFileUploadParams.cs  |  11 +
 .../FileUpload/_BitFileUploadItem.razor       |  10 +-
 .../FileUpload/_BitFileUploadItem.razor.cs    |   7 +-
 .../Inputs/FileUpload/BitFileUploadDemo.razor |  46 ++-
 .../FileUpload/BitFileUploadDemo.razor.cs     | 126 +++++-
 .../Inputs/FileUpload/BitFileUploadTests.cs   | 373 ++++++++++++++++++
 9 files changed, 783 insertions(+), 67 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
index 28c6e9837c4..5360ced23fc 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
@@ -32,7 +32,8 @@ public class BitFileInfo
     [JsonPropertyName("fileId")] public string FileId { get; set; } = string.Empty;
 
     /// <summary>
-    /// The index of the selected file.
+    /// The index of the file among the ones picked in this browser, which is what names the transfer behind
+    /// it. A preloaded file was never picked and has no transfer of its own, so its index is -1.
     /// </summary>
     [JsonPropertyName("index")] public int Index { get; set; }
 
@@ -95,6 +96,14 @@ public class BitFileInfo
     /// </summary>
     [JsonIgnore] public bool IsQueued { get; internal set; }
 
+    /// <summary>
+    /// Whether the file was handed over through the PreloadedFiles parameter of the BitFileUpload instead of
+    /// being picked in the browser, which is to say it is already on the server: there is no content on this
+    /// side to send, so it is never uploaded, and removing it deletes it from the server through the
+    /// RemoveUrl exactly like a file whose bytes got there through this component.
+    /// </summary>
+    [JsonIgnore] public bool IsPreloaded { get; internal set; }
+
 
     // Whether a request of this file is on the wire right now. A second request for the same file would
     // take over the connection of the first one and start it over from the beginning, so a repeated
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
index ec9f01d786e..823dc264fbe 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
@@ -16,6 +16,10 @@ public partial class BitFileUpload : BitComponentBase
     private const int MIN_CHUNK_SIZE = 512 * 1024; // 512 kb
     private const int MAX_CHUNK_SIZE = 10 * 1024 * 1024; // 10 mb
 
+    // A preloaded file has no picked file behind it and so no uploader in JavaScript to be named by an
+    // index. It gets one no uploader can ever have, so that a call meant for it reaches no other file's.
+    private const int PRELOADED_FILE_INDEX = -1;
+
     // roughly three repaints a second, which is as often as a progress bar is worth redrawing and
     // far less often than the browser reports the progress of the requests behind it.
     private static readonly TimeSpan PROGRESS_RENDER_INTERVAL = TimeSpan.FromMilliseconds(300);
@@ -32,6 +36,10 @@ public partial class BitFileUpload : BitComponentBase
     private string? _announcement;
     private bool _announcementMarker;
     private int _removingCount;
+    // The collection of preloaded files the list was last built from, and what was in it, so that the same
+    // files arriving again with every render do not put the ones the user has since removed back.
+    private IReadOnlyCollection<BitFileInfo>? _appliedPreloadedFiles;
+    private string[] _appliedPreloadedSignature = [];
     private string _buttonId = default!;
     private string _descriptionId = default!;
     private ElementReference _inputRef;
@@ -89,7 +97,9 @@ public partial class BitFileUpload : BitComponentBase
     /// Whether a file that is already in the file list can be selected again.
     /// When disabled, a newly selected file matching an existing one by name, size and last modified time
     /// is rejected with the <see cref="DuplicateErrorMessage"/> instead of being uploaded a second time,
-    /// becoming eligible again once the file it duplicates is removed.
+    /// becoming eligible again once the file it duplicates is removed. A file of <see cref="PreloadedFiles"/>
+    /// counts as one already in the list, matched by name and size alone since a server reports no
+    /// modification time, which is what keeps an attachment the record already has from being sent again.
     /// The default value is true.
     /// </summary>
     [Parameter] public bool AllowDuplicates { get; set; } = true;
@@ -480,6 +490,28 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public string? PauseButtonTitle { get; set; }
 
+    /// <summary>
+    /// The status message shown for the files of <see cref="PreloadedFiles"/>, which are already on the
+    /// server rather than freshly uploaded and would otherwise read as an upload that just succeeded.
+    /// </summary>
+    [Parameter] public string PreloadedFileMessage { get; set; } = "Already uploaded";
+
+    /// <summary>
+    /// The files that are already on the server, shown in the list from the start so that a form editing a
+    /// record can present the attachments it already has next to the ones the user is adding. They carry no
+    /// content on this side, so they are never uploaded: each of them starts out completed, counts towards
+    /// <see cref="MaxCount"/> and <see cref="MaxTotalSize"/> like any other file, and offers the same remove
+    /// button, which deletes it from the server through the <see cref="RemoveUrl"/> with the
+    /// <see cref="BitFileInfo.FileId"/> in the BIT_FILE_ID header - so that id is what the server's own id
+    /// belongs in. A <see cref="BitFileInfo.PreviewUrl"/> pointing at a thumbnail the server serves is
+    /// rendered by <see cref="ShowPreview"/> just like a locally generated one.
+    /// The list is built from the collection again whenever the files in it change - which files, by their
+    /// <see cref="BitFileInfo.FileId"/>, rather than which array they arrive in, so one written inline in the
+    /// markup does not undo what the user has done on every render. The instances are the very ones the list
+    /// then holds, so their <see cref="BitFileInfo.Status"/> is where to read what became of each of them.
+    /// </summary>
+    [Parameter] public IReadOnlyCollection<BitFileInfo>? PreloadedFiles { get; set; }
+
     /// <summary>
     /// The message shown for the files waiting in the queue for a free slot of the <see cref="ConcurrentUploads"/>
     /// limit, which is what tells a file that is about to start apart from one that was never asked to upload.
@@ -991,13 +1023,19 @@ public async Task Browse()
     }
 
     /// <summary>
-    /// Resets the file upload.
+    /// Resets the file upload, taking the whole selection and its upload state back to where they started.
+    /// The files of <see cref="PreloadedFiles"/> stay: they belong to the record rather than to this
+    /// selection - except the ones already deleted from the server, which nothing on this side brings back.
     /// </summary>
     public async Task Reset()
     {
         if (IsDisposed) return;
 
+        // a reset undoes what was picked here, and what is on the server was never picked here.
+        var preloaded = _files.Where(f => f.IsPreloaded && f.Status is not BitFileUploadStatus.Removed).ToArray();
+
         _files.Clear();
+        _files.AddRange(preloaded);
         _uploadQueue.Clear();
         // the removals of the files that just went away have nobody left to report to, so the counter
         // they were holding is dropped with them rather than leaving the component removing forever.
@@ -1019,9 +1057,7 @@ public async Task Reset()
     [JSInvokable("HandleChunkUploadProgress")]
     public async Task __HandleChunkUploadProgress(int index, long loaded)
     {
-        if (index < 0 || index >= _files.Count) return;
-
-        var file = _files[index];
+        if (GetFileByUploaderIndex(index) is not { } file) return;
         if (file.Status != BitFileUploadStatus.InProgress) return;
 
         file.LastChunkUploadedSize = loaded;
@@ -1048,9 +1084,7 @@ public async Task __HandleChunkUploadProgress(int index, long loaded)
     [JSInvokable("HandleChunkUpload")]
     public async Task __HandleChunkUpload(int fileIndex, int responseStatus, string responseText)
     {
-        if (fileIndex < 0 || fileIndex >= _files.Count) return;
-
-        var file = _files[fileIndex];
+        if (GetFileByUploaderIndex(fileIndex) is not { } file) return;
 
         // whatever this response says, the request it answers is over and the file is free again.
         file.IsRequestInFlight = false;
@@ -1065,7 +1099,7 @@ public async Task __HandleChunkUpload(int fileIndex, int responseStatus, string
             file.TotalUploadedSize += file.PendingChunkSize;
             file.AutoRetryAttempts = 0;
 
-            UpdateChunkSize(fileIndex);
+            UpdateChunkSize(file);
 
             if (file.TotalUploadedSize < file.Size)
             {
@@ -1184,6 +1218,17 @@ protected override async Task OnParametersSetAsync()
 
         await base.OnParametersSetAsync();
 
+        if (ShouldApplyPreloadedFiles())
+        {
+            ApplyPreloadedFiles();
+
+            // the preloaded files take their share of the count and total size budgets, so the files the
+            // user had already picked are judged against the list as it stands with them in it.
+            ApplyListValidations();
+
+            Announce();
+        }
+
         if (_dropZoneRef is null) return;
 
         await UpdateDropZone();
@@ -1285,7 +1330,9 @@ internal string GetStatusMessage(BitFileInfo file)
     {
         return file.Status switch
         {
-            BitFileUploadStatus.Completed => SuccessfulUploadMessage,
+            // a file that was already on the server when the list was built did not just finish uploading,
+            // and saying that it did would credit this visit with something that happened long before it.
+            BitFileUploadStatus.Completed => file.IsPreloaded ? PreloadedFileMessage : SuccessfulUploadMessage,
             BitFileUploadStatus.Failed => FailedUploadMessage,
             BitFileUploadStatus.Canceled => CanceledUploadMessage,
             BitFileUploadStatus.RemoveFailed => FailedRemoveMessage,
@@ -1351,9 +1398,22 @@ private async Task RestorePendingFocus()
         catch (JSException) { } // an element taken out of the DOM between the render and this call cannot be focused
     }
 
+    // The file an uploader of the JavaScript side speaks for. The index is that uploader's own, which is the
+    // position of the file among the ones picked here - the preloaded files sit in the list beside them
+    // without an uploader of their own, so the list cannot simply be indexed into.
+    private BitFileInfo? GetFileByUploaderIndex(int index)
+    {
+        if (index < 0) return null;
+
+        return _files.FirstOrDefault(f => f.IsPreloaded is false && f.Index == index);
+    }
+
     private static bool IsCountedInOverallProgress(BitFileInfo file)
     {
-        return file.Status is not BitFileUploadStatus.NotAllowed and not BitFileUploadStatus.Removed;
+        // a file that is already on the server is not part of this transfer at all, and counting it would
+        // report a batch nobody has started yet as complete and water down the progress of a real one.
+        return file.IsPreloaded is false
+            && file.Status is not BitFileUploadStatus.NotAllowed and not BitFileUploadStatus.Removed;
     }
 
     private string GetDragClass() => $"bit-upl-drg {Classes?.Dragging}".Trim();
@@ -1496,7 +1556,10 @@ private async Task HandleOnChange()
 
         if (Append is false)
         {
-            _files.Clear();
+            // a selection replaces the selection, not the record: the files that are already on the server
+            // are not this component's to drop from the view, and taking them out here would hide
+            // attachments that are still very much there.
+            _files.RemoveAll(f => f.IsPreloaded is false);
             _uploadQueue.Clear();
             UploadStatus = BitFileUploadStatus.Pending;
         }
@@ -1512,11 +1575,6 @@ private async Task HandleOnChange()
 
         _files.AddRange(newFiles);
 
-        for (var i = 0; i < _files.Count; i++)
-        {
-            _files[i].Index = i;
-        }
-
         if (_files.Any() is false) return;
 
         // a selection appended to a batch that is still uploading leaves the status of that batch alone:
@@ -1563,6 +1621,84 @@ private static string GetFileIdentity(BitFileInfo file)
         return $"{file.Name}|{file.Size}|{file.LastModified}";
     }
 
+    // a file the server reported has no last modified time of a file system behind it, so a file picked
+    // here is the same one as an attachment already on the record when its name and size are - which is
+    // as much as the two of them have in common to be compared on.
+    private static string GetServerFileIdentity(BitFileInfo file)
+    {
+        return $"{file.Name}|{file.Size}";
+    }
+
+    // Whether the list has to be built from the preloaded files again. The collection arriving as another
+    // instance is the obvious case, but a collection written inline in the markup is another instance on
+    // every single render: rebuilding on that alone would put the files the user has removed back and
+    // announce the whole list again each time, so what decides is which files are in it rather than which
+    // array they came in.
+    private bool ShouldApplyPreloadedFiles()
+    {
+        if (ReferenceEquals(_appliedPreloadedFiles, PreloadedFiles)) return false;
+
+        _appliedPreloadedFiles = PreloadedFiles;
+
+        var signature = GetPreloadedSignature();
+
+        if (signature.SequenceEqual(_appliedPreloadedSignature, StringComparer.Ordinal)) return false;
+
+        _appliedPreloadedSignature = signature;
+
+        return true;
+    }
+
+    // What a preloaded file is recognized by from one render to the next: the id the app gave it, and
+    // failing that - the component mints one for a file handed over without it - what it says about itself.
+    private string[] GetPreloadedSignature()
+    {
+        if (PreloadedFiles is null) return [];
+
+        return [.. PreloadedFiles.Where(f => f is not null)
+                                 .Select(f => f.FileId.HasValue() ? f.FileId : GetServerFileIdentity(f))];
+    }
+
+    // The files that are already on the server take the head of the list, ahead of anything picked here, and
+    // are rebuilt from scratch whenever the collection they come from is replaced - a form that has just
+    // loaded the record it edits hands its attachments over exactly that way. They are adopted rather than
+    // copied, so the very instances the app holds are the ones the list works on and their Status is what
+    // tells it what became of each of them.
+    private void ApplyPreloadedFiles()
+    {
+        _files.RemoveAll(f => f.IsPreloaded);
+
+        if (PreloadedFiles is null) return;
+
+        var position = 0;
+
+        foreach (var file in PreloadedFiles)
+        {
+            if (file is null) continue;
+
+            file.IsPreloaded = true;
+            // there is no picked file and so no uploader behind this one, and the index is what would name
+            // that uploader: it is left invalid on purpose, so that a stray call cannot reach another file's.
+            file.Index = PRELOADED_FILE_INDEX;
+            file.IsQueued = false;
+            file.IsRequestInFlight = false;
+            file.Status = BitFileUploadStatus.Completed;
+            // the whole file is on the server already, which is what makes it count as fully uploaded
+            // towards the progress of the batch instead of dragging it down to nothing.
+            file.TotalUploadedSize = file.Size;
+            file.LastChunkUploadedSize = 0;
+
+            // the id travels to the server in the BIT_FILE_ID header of the remove request, so the one the
+            // app gave it stands; only a file handed over without one needs something to be named by.
+            if (file.FileId.HasNoValue())
+            {
+                file.FileId = Guid.NewGuid().ToString();
+            }
+
+            _files.Insert(position++, file);
+        }
+    }
+
     // the rules that judge a file against the rest of the list - being a duplicate, the maximum count and the
     // maximum total size - are re-evaluated from scratch every time the list changes, so that a file rejected
     // by one of them can be taken back as soon as a removal frees up room or drops the original it duplicated.
@@ -1580,6 +1716,9 @@ private void ApplyListValidations()
         if (AllowDuplicates is false)
         {
             var knownFiles = new HashSet<string>(StringComparer.Ordinal);
+            // the attachments the record already has, which sit at the head of the list, so a file picked
+            // here is judged against them by the time it is reached.
+            var knownServerFiles = new HashSet<string>(StringComparer.Ordinal);
 
             foreach (var file in _files)
             {
@@ -1587,7 +1726,18 @@ private void ApplyListValidations()
 
                 // every file registers its identity, even a rejected one, so that a re-selection of a file
                 // already in the list is caught no matter why that file was rejected.
-                if (knownFiles.Add(GetFileIdentity(file))) continue;
+                var isFirstOfItsKind = knownFiles.Add(GetFileIdentity(file));
+
+                // what the server says is on the record is the truth about it, so one of its files is never
+                // turned away as the copy of another - it only ever makes copies of itself out of the ones
+                // picked here.
+                if (file.IsPreloaded)
+                {
+                    knownServerFiles.Add(GetServerFileIdentity(file));
+                    continue;
+                }
+
+                if (isFirstOfItsKind && knownServerFiles.Contains(GetServerFileIdentity(file)) is false) continue;
 
                 // a file that already failed a validation of its own keeps that message, which would
                 // otherwise be lost as soon as the duplication is resolved, and one that already started
@@ -1715,6 +1865,8 @@ private async Task PumpUploadQueue()
     private async Task UploadOneFile(BitFileInfo fileInfo, string? uploadUrl = null)
     {
         if (_files.Any() is false) return;
+        // a file that is already on the server has nothing on this side to send.
+        if (fileInfo.IsPreloaded) return;
         if (fileInfo.Status is BitFileUploadStatus.NotAllowed or BitFileUploadStatus.Removed) return;
 
         // a file whose request is already on the wire is busy: sending a second one would take the
@@ -1885,7 +2037,7 @@ private async Task PauseOneFile(BitFileInfo file)
             _uploadQueue.Remove(file);
             file.IsQueued = false;
 
-            await PauseUploadOneFile(file.Index);
+            await PauseUploadOneFile(file);
             return;
         }
 
@@ -1895,7 +2047,7 @@ private async Task PauseOneFile(BitFileInfo file)
 
         // aborting right away instead of waiting for the next chunk boundary, so that pausing
         // also works for non-chunked uploads whose only request is already in flight.
-        await PauseUploadOneFile(file.Index);
+        await PauseUploadOneFile(file);
     }
 
     private async Task CancelOneFile(BitFileInfo file)
@@ -1915,35 +2067,36 @@ or BitFileUploadStatus.Removed
         _uploadQueue.Remove(file);
         file.IsQueued = false;
 
-        await CancelUploadOneFile(file.Index);
+        await CancelUploadOneFile(file);
     }
 
-    private async Task PauseUploadOneFile(int index)
+    private async Task PauseUploadOneFile(BitFileInfo file)
     {
-        if (index < 0 || index >= _files.Count) return;
-
-        var file = _files[index];
-
         // the status changes before the abort, so that the abort callback coming back from JavaScript
         // finds the file already paused instead of mistaking the aborted request for a failed upload.
         await UpdateStatus(BitFileUploadStatus.Paused, file);
         file.IsRequestInFlight = false;
 
-        await _js.BitFileUploadPause(UniqueId, index);
+        await AbortRequestOf(file);
     }
 
-    private async Task CancelUploadOneFile(int index)
+    private async Task CancelUploadOneFile(BitFileInfo file)
     {
-        if (index < 0 || index >= _files.Count) return;
-
-        var file = _files[index];
-
         // the status changes before the abort, so that the abort callback coming back from JavaScript
         // finds the file already canceled instead of mistaking the aborted request for a failed upload.
         await UpdateStatus(BitFileUploadStatus.Canceled, file);
         file.IsRequestInFlight = false;
 
-        await _js.BitFileUploadPause(UniqueId, index);
+        await AbortRequestOf(file);
+    }
+
+    // a file with no uploader of its own - a preloaded one - has no request to abort, and the index it
+    // carries names no uploader, which the JavaScript side would read as "every file of this component".
+    private async Task AbortRequestOf(BitFileInfo file)
+    {
+        if (file.IsPreloaded) return;
+
+        await _js.BitFileUploadPause(UniqueId, file.Index);
     }
 
     // the speed of an upload is what turns a progress bar into an answer to "how long is this going to
@@ -1974,13 +2127,10 @@ private static void UpdateTransferRate(BitFileInfo file)
         file.RemainingTime = TimeSpan.FromSeconds(remaining / speed);
     }
 
-    private void UpdateChunkSize(int fileIndex)
+    private void UpdateChunkSize(BitFileInfo file)
     {
-        if (fileIndex < 0 || fileIndex >= _files.Count) return;
         if (AutoChunkSize is false || ChunkedUpload is false) return;
 
-        var file = _files[fileIndex];
-
         var dtNow = DateTime.UtcNow;
         var duration = (dtNow - file.StartTimeUpload.GetValueOrDefault(dtNow)).TotalMilliseconds;
 
@@ -2029,11 +2179,19 @@ private void Announce()
 
         if (files.Length == 0) return "No file selected.";
 
-        var completed = files.Count(f => f.Status is BitFileUploadStatus.Completed);
-        var failed = files.Count(f => f.Status is BitFileUploadStatus.Failed);
-        var notAllowed = files.Count(f => f.Status is BitFileUploadStatus.NotAllowed);
+        // the files that were already on the server were never selected here and never uploaded here, so
+        // they are counted apart rather than credited to a batch that may not have sent a single byte.
+        var attached = files.Count(f => f.IsPreloaded);
+        var selected = files.Where(f => f.IsPreloaded is false).ToArray();
 
-        return $"{files.Length} file{(files.Length == 1 ? string.Empty : "s")} selected." +
+        var completed = selected.Count(f => f.Status is BitFileUploadStatus.Completed);
+        var failed = selected.Count(f => f.Status is BitFileUploadStatus.Failed);
+        var notAllowed = selected.Count(f => f.Status is BitFileUploadStatus.NotAllowed);
+
+        return (selected.Length > 0
+                    ? $"{selected.Length} file{(selected.Length == 1 ? string.Empty : "s")} selected."
+                    : "No file selected.") +
+               (attached > 0 ? $" {attached} already attached." : string.Empty) +
                (completed > 0 ? $" {completed} uploaded." : string.Empty) +
                (failed > 0 ? $" {failed} failed." : string.Empty) +
                (notAllowed > 0 ? $" {notAllowed} not allowed." : string.Empty);
@@ -2123,7 +2281,7 @@ private async Task RemoveOneFile(BitFileInfo fileInfo)
         // told to delete them.
         if (fileInfo.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Paused)
         {
-            await _js.BitFileUploadPause(UniqueId, fileInfo.Index);
+            await AbortRequestOf(fileInfo);
         }
 
         // a completed file counts as being on the server even when it carried no byte at all,
@@ -2149,6 +2307,10 @@ private async Task RemoveOneFile(BitFileInfo fileInfo)
         // a removed file is never going to be sent again, so everything the browser was holding on to for
         // it is handed back: the picked file itself, which would otherwise stay in memory for the whole
         // life of the page, and the object URL of the thumbnail that is not rendered anymore.
+        // a preloaded file's thumbnail is a URL of the server's own, which this side neither created nor
+        // gets to hand back, and there is no uploader holding anything for it either.
+        if (fileInfo.IsPreloaded) return;
+
         fileInfo.PreviewUrl = null;
 
         try
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
index 03118690754..77c3d699604 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
@@ -32,10 +32,14 @@
 //   --bit-FileUpload-item-padding               padding around the name, size and progress     (default: spacing(1) spacing(2))
 //   --bit-FileUpload-item-font-size             file name size                                 (default: per size)
 //   --bit-FileUpload-item-font-weight           file name weight                               (default: $tg-fw-light)
+//   --bit-FileUpload-list-max-height            tallest the file list grows before it
+//                                               scrolls, for a folder or a long batch          (default: none)
 //
 //   --bit-FileUpload-success-color              status line of a completed file                (default: $clr-suc)
 //   --bit-FileUpload-error-color                status line of a failed or rejected file       (default: $clr-err)
 //   --bit-FileUpload-paused-color               status line of a paused or canceled file       (default: the Color role's main color)
+//   --bit-FileUpload-preloaded-color            status line of a file that was already on
+//                                               the server when the list was built             (default: $clr-fg-sec)
 //
 //   --bit-FileUpload-preview-size               image thumbnail side                           (default: per size)
 //   --bit-FileUpload-preview-radius             image thumbnail corner radius                  (default: $shp-radius-control)
@@ -247,6 +251,14 @@
     display: flex;
     flex-flow: column nowrap;
     gap: var(--bit-FileUpload-gap, #{spacing(0.5)});
+    // A folder or a long batch can put hundreds of items in this list, which would otherwise push the rest
+    // of the form off the screen. The list is left unbounded by default - a height nobody asked for would
+    // be as surprising as no bound at all - and scrolls as soon as one is set.
+    max-height: var(--bit-FileUpload-list-max-height, none);
+    overflow-y: auto;
+    // the items carry the action buttons a keyboard reaches them by, and a button scrolled to by Tab must
+    // not be flush against the edge it came in at.
+    scroll-padding-block: var(--bit-FileUpload-gap, #{spacing(0.5)});
 }
 
 .bit-upl-itm {
@@ -295,6 +307,14 @@
     }
 }
 
+// a file that was already on the server when the list was built is a state rather than an outcome, so it
+// stays in the secondary foreground instead of taking the success color of an upload that just landed.
+.bit-upl-pre {
+    .bit-upl-us {
+        color: var(--bit-FileUpload-preloaded-color, #{$clr-fg-sec});
+    }
+}
+
 .bit-upl-prv {
     flex-shrink: 0;
     object-fit: cover;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
index b530c86e90a..f5fc352999e 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
@@ -347,6 +347,12 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </remarks>
     public string? PauseIconName { get; set; }
 
+    /// <summary>
+    /// The status message shown for the files of the PreloadedFiles parameter, which are already on the
+    /// server rather than freshly uploaded and would otherwise read as an upload that just succeeded.
+    /// </summary>
+    public string? PreloadedFileMessage { get; set; }
+
     /// <summary>
     /// The message shown for the files waiting in the queue for a free slot of the <see cref="ConcurrentUploads"/>
     /// limit, which is what tells a file that is about to start apart from one that was never asked to upload.
@@ -863,6 +869,11 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.PauseIconName = PauseIconName;
         }
 
+        if (PreloadedFileMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(PreloadedFileMessage)))
+        {
+            bitFileUpload.PreloadedFileMessage = PreloadedFileMessage!;
+        }
+
         if (QueuedUploadMessage.HasValue() && bitFileUpload.HasNotBeenSet(nameof(QueuedUploadMessage)))
         {
             bitFileUpload.QueuedUploadMessage = QueuedUploadMessage!;
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
index 545e680e595..4a62206eeb0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor
@@ -15,7 +15,7 @@
 {
     <div role="listitem"
          style="@FileUpload.Styles?.FileItem"
-         class="bit-upl-itm @GetFileElClass(Item.Status) @FileUpload.Classes?.FileItem">
+         class="bit-upl-itm @GetFileElClass(Item) @FileUpload.Classes?.FileItem">
         @if (FileUpload.ShowPreview)
         {
             if (Item.PreviewUrl is not null)
@@ -48,12 +48,16 @@
                 <div style="@FileUpload.Styles?.FileName" class="bit-upl-fn @FileUpload.Classes?.FileName">@Item.Name</div>
             </div>
             <div class="bit-upl-fsc">
+                @* a file that is already on the server never travels anywhere from here, so it has one size
+                   rather than a count running up to it - "1.2 MB/1.2 MB" reads as a transfer that just ran. *@
                 <span style="@FileUpload.Styles?.FileSize" class="bit-upl-fs @FileUpload.Classes?.FileSize">
-                    @($"{FormatSize(GetFileUploadSize(Item))}/{FormatSize(Item.Size)}")
+                    @(Item.IsPreloaded
+                        ? FormatSize(Item.Size)
+                        : $"{FormatSize(GetFileUploadSize(Item))}/{FormatSize(Item.Size)}")
                 </span>
                 @* a file that was never going to be sent has no progress to report, and a "0%" next to
                    the reason it was turned away only reads as something that failed halfway. *@
-                @if (Item.Status != BitFileUploadStatus.NotAllowed)
+                @if (Item.Status != BitFileUploadStatus.NotAllowed && Item.IsPreloaded is false)
                 {
                     <span style="@FileUpload.Styles?.Percentage" class="bit-upl-pct @FileUpload.Classes?.Percentage">
                         @fileUploadPercent%
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
index 262b0494072..bb8d965b65f 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/_BitFileUploadItem.razor.cs
@@ -145,9 +145,12 @@ private string FormatSize(long size)
         return FileUpload.FileSizeFormatter is null ? FileSizeHumanizer.Humanize(size) : FileUpload.FileSizeFormatter(size);
     }
 
-    private static string GetFileElClass(BitFileUploadStatus status)
-        => status switch
+    private static string GetFileElClass(BitFileInfo file)
+        => file.Status switch
         {
+            // a file that was already on the server when the list was built is a state rather than an
+            // outcome, so it reads as neutral instead of taking the green of an upload that just landed.
+            BitFileUploadStatus.Completed when file.IsPreloaded => $"{ROOT_ELEMENT_CLASS}-pre",
             BitFileUploadStatus.Completed => $"{ROOT_ELEMENT_CLASS}-uld",
             BitFileUploadStatus.Failed or BitFileUploadStatus.NotAllowed or BitFileUploadStatus.RemoveFailed => $"{ROOT_ELEMENT_CLASS}-fld",
             BitFileUploadStatus.Paused or BitFileUploadStatus.Canceled => $"{ROOT_ELEMENT_CLASS}-psd",
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index 61129abd2dc..3ea4220a705 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -740,7 +740,7 @@
         <div>
             The browse button is the visual weight the component carries, and <b>Variant</b> decides how much of it
             there is. <b>Fill</b> - the default - paints it in a solid block of the
-            <BitLink Href="#example22">Color</BitLink>, for when uploading is the main thing the screen is for.
+            <BitLink Href="#example23">Color</BitLink>, for when uploading is the main thing the screen is for.
             <b>Outline</b> keeps only the rule around it, for an uploader among other form fields. <b>Text</b> drops
             both rule and fill, for a secondary affordance. The drop indicator and the file list follow along, and a
             disabled component drops the role colors entirely for the neutral disabled look, whichever variant it
@@ -758,7 +758,39 @@
         <BitFileUpload Label="Disabled" UploadUrl="@UploadUrl" Variant="variant" IsEnabled="false" />
     </DemoExample>
 
-    <DemoExample Title="Cascading parameters" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
+    <DemoExample Title="Preloaded files" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
+        <div>
+            A form editing a record usually opens with attachments already on the server, and
+            <b>PreloadedFiles</b> is how they get into the list beside the ones the user is about to add.
+            They carry no content on this side, so they are never uploaded: each starts out completed, shows
+            its size alone rather than a transfer that just ran, says so through
+            <b>PreloadedFileMessage</b>, and counts towards <b>MaxCount</b> and <b>MaxTotalSize</b> like any
+            other file. Give each one the server's own id as its <b>FileId</b> - that is what travels in the
+            <b>BIT_FILE_ID</b> header when the remove button deletes it through the
+            <BitLink Href="#example4">RemoveUrl</BitLink> - and a <b>PreviewUrl</b> pointing at a thumbnail
+            the server serves, which <b>ShowPreview</b> renders like a locally generated one.
+        </div>
+        <br />
+        <div>
+            The list is rebuilt whenever the files in the collection change - which files, by their
+            <b>FileId</b>, not which array they arrive in - so a record that loads late lands in the list
+            while one written inline in the markup does not undo the user's edits on every render. The
+            instances are adopted rather than copied, so each one's <b>Status</b> is where to read what
+            became of it - <b>Removed</b> for the ones the user deleted - when the form is saved. They also
+            survive what clears the rest: browsing without <b>Append</b> replaces the selection and
+            <b>Reset</b> empties it, and both leave the record's own files where they are.
+        </div>
+        <br />
+        <BitFileUpload Label="Add more attachments" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
+                       Multiple Append ShowPreview ShowRemoveButton
+                       PreloadedFiles="@attachments"
+                       PreloadedFileMessage="Saved with this record"
+                       Description="Remove an existing attachment or add new ones." />
+        <br />
+        <BitButton OnClick="LoadAttachments">Reload the record</BitButton>
+    </DemoExample>
+
+    <DemoExample Title="Cascading parameters" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
         <div>
             <b>BitParams</b> carries a <b>BitFileUploadParams</b> down to every file upload under it, so a form, a
             card or a whole page sets the shared endpoint, the shared limits and the shared look once instead of on
@@ -783,7 +815,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+    <DemoExample Title="Color" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
         <div>
             <b>Color</b> picks the role the component speaks in, and it is not only the browse button: the dashed
             drop indicator, the progress bar of every running file, the paused status message, the removal spinner,
@@ -818,7 +850,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
+    <DemoExample Title="External Icons" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
         <div>
             The action button icons are not limited to the built-in icon font: <b>UploadIcon</b>, <b>RetryIcon</b>,
             <b>PauseIcon</b>, <b>CancelIcon</b> and <b>RemoveIcon</b> take a
@@ -875,7 +907,7 @@
                        RemoveIcon="@BitIconInfo.Bi("trash")" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
+    <DemoExample Title="Size" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
         <div>
             <b>Size</b> scales the whole control in one move - the height, padding and font of the browse button, the
             text of the file items and their size line, the action buttons and their icons, and the preview
@@ -891,7 +923,7 @@
         <BitFileUpload Label="Large" UploadUrl="@UploadUrl" Size="BitSize.Large" ShowRemoveButton RemoveUrl="@RemoveUrl" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example25RazorCode" Id="example25">
+    <DemoExample Title="Style & Class" RazorCode="@example26RazorCode" Id="example26">
         <div>
             <b>Style</b> and <b>Class</b> land on the root element. For anything deeper, <b>Styles</b> and
             <b>Classes</b> reach the individual parts - the browse button, the description, the file list, each item,
@@ -966,7 +998,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example26RazorCode" Id="example26">
+    <DemoExample Title="RTL" RazorCode="@example27RazorCode" Id="example27">
         <div>
             Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout - the browse button, the file names,
             sizes, progress bars and action buttons all follow - and the localizable texts (the <b>Label</b>, the
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index 95dbbad6454..9c9489fd5c1 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -23,7 +23,7 @@ public partial class BitFileUploadDemo
             Name = "AllowDuplicates",
             Type = "bool",
             DefaultValue = "true",
-            Description = "Whether a file that is already in the file list can be selected again. When disabled, a newly selected file matching an existing one by name, size and last modified time is rejected with the DuplicateErrorMessage instead of being uploaded a second time, becoming eligible again once the file it duplicates is removed.",
+            Description = "Whether a file that is already in the file list can be selected again. When disabled, a newly selected file matching an existing one by name, size and last modified time is rejected with the DuplicateErrorMessage instead of being uploaded a second time, becoming eligible again once the file it duplicates is removed. A file of PreloadedFiles counts as one already in the list, matched by name and size alone since a server reports no modification time.",
         },
         new()
         {
@@ -452,6 +452,22 @@ public partial class BitFileUploadDemo
             Href = "https://blazorui.bitplatform.dev/iconography"
         },
         new()
+        {
+            Name = "PreloadedFileMessage",
+            Type = "string",
+            DefaultValue = "Already uploaded",
+            Description = "The status message shown for the files of PreloadedFiles, which are already on the server rather than freshly uploaded and would otherwise read as an upload that just succeeded."
+        },
+        new()
+        {
+            Name = "PreloadedFiles",
+            Type = "IReadOnlyCollection<BitFileInfo>?",
+            DefaultValue = "null",
+            Description = "The files that are already on the server, shown in the list from the start so that a form editing a record can present the attachments it already has next to the ones the user is adding. They carry no content on this side, so they are never uploaded: each starts out completed, counts towards MaxCount and MaxTotalSize like any other file, and its remove button deletes it from the server through the RemoveUrl with its FileId in the BIT_FILE_ID header. The list is built from the collection again whenever the files in it change - which files, by their FileId, rather than which array they arrive in - and the instances in it are the very ones the list then holds, so their Status is where to read what became of each of them.",
+            LinkType = LinkType.Link,
+            Href = "#file-info"
+        },
+        new()
         {
             Name = "QueuedUploadMessage",
             Type = "string",
@@ -790,7 +806,7 @@ public partial class BitFileUploadDemo
                {
                    Name = "Index",
                    Type = "int",
-                   Description = "The index of the selected file."
+                   Description = "The index of the file among the ones picked in this browser, which is what names the transfer behind it. A preloaded file was never picked and has no transfer of its own, so its index is -1."
                },
                new()
                {
@@ -859,6 +875,13 @@ public partial class BitFileUploadDemo
                    Description = "Whether the file is waiting in the upload queue for a free slot of the ConcurrentUploads limit, which is what tells a file that is about to start apart from one that was never asked to upload."
                },
                new()
+               {
+                   Name = "IsPreloaded",
+                   Type = "bool",
+                   DefaultValue = "false",
+                   Description = "Whether the file was handed over through the PreloadedFiles parameter instead of being picked in the browser, which is to say it is already on the server: there is no content on this side to send, so it is never uploaded, and removing it deletes it from the server through the RemoveUrl."
+               },
+               new()
                {
                    Name = "Message",
                    Type = "string?",
@@ -1309,7 +1332,7 @@ public partial class BitFileUploadDemo
             Name = "Reset",
             Type = "() => Task",
             DefaultValue = "",
-            Description = "Resets the file upload, clearing the file list and the upload state.",
+            Description = "Resets the file upload, clearing the file list and the upload state. The files of PreloadedFiles stay, since they belong to the record rather than to this selection - except the ones already deleted from the server, which nothing on this side brings back.",
         }
     ];
 
@@ -1462,6 +1485,12 @@ public partial class BitFileUploadDemo
             Description = "Text weight of a file item's name.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-list-max-height",
+            DefaultValue = "none",
+            Description = "Tallest the file list grows before it scrolls, for a folder or a long batch.",
+        },
+        new()
         {
             Name = "--bit-FileUpload-success-color",
             DefaultValue = "--bit-clr-suc",
@@ -1480,6 +1509,12 @@ public partial class BitFileUploadDemo
             Description = "Status line of a paused or canceled file.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-preloaded-color",
+            DefaultValue = "--bit-clr-fg-sec",
+            Description = "Status line of a file that was already on the server when the list was built.",
+        },
+        new()
         {
             Name = "--bit-FileUpload-preview-size",
             DefaultValue = "Per Size (2rem / 2.5rem / 3.25rem)",
@@ -1634,8 +1669,35 @@ public partial class BitFileUploadDemo
     // keeps its identity across renders instead of re-rendering every uploader under it.
     private BitFileUploadParams[]? fileUploadParams;
 
+    // The attachments the record being edited already has, exactly as a server would report them: an id the
+    // remove endpoint knows each file by, a name, a size, and a thumbnail URL for the ones worth previewing.
+    private IReadOnlyCollection<BitFileInfo>? attachments;
+    private int attachmentsRevision;
+
+    private void LoadAttachments()
+    {
+        attachmentsRevision++;
+
+        // a new collection is what the component reads as a new record; handing the same one over again
+        // would leave the list exactly as the user has since edited it.
+        attachments =
+        [
+            new() { FileId = $"invoice-{attachmentsRevision}", Name = "invoice.pdf", Size = 82_140, ContentType = "application/pdf" },
+            new()
+            {
+                FileId = $"logo-{attachmentsRevision}",
+                Name = "logo.png",
+                Size = 15_300,
+                ContentType = "image/png",
+                PreviewUrl = "_content/Bit.BlazorUI.Demo.Client.Core/images/bit-logo-blue.png"
+            }
+        ];
+    }
+
     protected override void OnInitialized()
     {
+        LoadAttachments();
+
         fileUploadParams =
         [
             new()
@@ -2420,6 +2482,46 @@ private async Task HandleBrowseFileOnClick()
 private BitVariant variant = BitVariant.Fill;";
 
     private readonly string example21RazorCode = @"
+<BitFileUpload Label=""Add more attachments"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl""
+               Multiple Append ShowPreview ShowRemoveButton
+               PreloadedFiles=""@attachments""
+               PreloadedFileMessage=""Saved with this record""
+               Description=""Remove an existing attachment or add new ones."" />
+
+<BitButton OnClick=""LoadAttachments"">Reload the record</BitButton>";
+    private readonly string example21CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";
+
+private IReadOnlyCollection<BitFileInfo>? attachments;
+
+protected override void OnInitialized() => LoadAttachments();
+
+private void LoadAttachments()
+{
+    // a new collection is what the component reads as a new record; handing the same one over again
+    // would leave the list exactly as the user has since edited it.
+    attachments =
+    [
+        // the FileId is the server's own id of the file: it travels in the BIT_FILE_ID header
+        // of the request the remove button sends to the RemoveUrl.
+        new() { FileId = ""a2f1..."", Name = ""invoice.pdf"", Size = 82_140, ContentType = ""application/pdf"" },
+        new()
+        {
+            FileId = ""9c07..."",
+            Name = ""logo.png"",
+            Size = 15_300,
+            ContentType = ""image/png"",
+            PreviewUrl = ""/thumbnails/9c07.png""
+        }
+    ];
+}
+
+// what to save: the ones the user deleted have come back marked as removed.
+private IEnumerable<BitFileInfo> RemainingAttachments =>
+    attachments?.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
+
+    private readonly string example22RazorCode = @"
 <BitParams Parameters=""@fileUploadParams"">
     <BitFileUpload Label=""Takes the endpoint, the limits and the look from the cascade"" />
 
@@ -2431,7 +2533,7 @@ private async Task HandleBrowseFileOnClick()
 
 
 <BitFileUpload Label=""Outside the cascade, and back to the defaults"" UploadUrl=""@UploadUrl"" />";
-    private readonly string example21CsharpCode = @"
+    private readonly string example22CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 
 private readonly BitFileUploadParams[] fileUploadParams =
@@ -2448,7 +2550,7 @@ private async Task HandleBrowseFileOnClick()
     }
 ];";
 
-    private readonly string example22RazorCode = @"
+    private readonly string example23RazorCode = @"
 <BitFileUpload Label=""Primary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Primary"" />
 <BitFileUpload Label=""Secondary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Secondary"" />
 <BitFileUpload Label=""Tertiary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Tertiary"" />
@@ -2467,10 +2569,10 @@ private async Task HandleBrowseFileOnClick()
 <BitFileUpload Label=""PrimaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.PrimaryBorder"" />
 <BitFileUpload Label=""SecondaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.SecondaryBorder"" />
 <BitFileUpload Label=""TertiaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.TertiaryBorder"" />";
-    private readonly string example22CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example23RazorCode = @"
+    private readonly string example24RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <div>FontAwesome:</div>
@@ -2512,21 +2614,21 @@ private async Task HandleBrowseFileOnClick()
                RetryIcon=""@BitIconInfo.Bi(""arrow-repeat"")""
                CancelIcon=""@BitIconInfo.Bi(""x-circle"")""
                RemoveIcon=""@BitIconInfo.Bi(""trash"")"" />";
-    private readonly string example23CsharpCode = @"
+    private readonly string example24CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example24RazorCode = @"
+    private readonly string example25RazorCode = @"
 <BitFileUpload Label=""Small"" UploadUrl=""@UploadUrl"" Size=""BitSize.Small"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
 <BitFileUpload Label=""Medium"" UploadUrl=""@UploadUrl"" Size=""BitSize.Medium"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
 <BitFileUpload Label=""Large"" UploadUrl=""@UploadUrl"" Size=""BitSize.Large"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
-    private readonly string example24CsharpCode = @"
+    private readonly string example25CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example25RazorCode = @"
+    private readonly string example26RazorCode = @"
 <style>
     .custom-class {
         padding: 0.5rem;
@@ -2607,7 +2709,7 @@ private async Task HandleBrowseFileOnClick()
                    UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 </div>";
 
-    private readonly string example26RazorCode = @"
+    private readonly string example27RazorCode = @"
 <div dir=""rtl"">
     <BitFileUpload Dir=""BitDir.Rtl""
                    Label=""انتخاب یا رها کردن فایل""
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
index c1bdd8fb9eb..a5c4c7b3621 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
@@ -3203,6 +3203,379 @@ public void BitFileUploadShouldPassTheDropZoneSelectorToTheDragDropSetup()
         Assert.AreEqual("#zone", invocation.Arguments[^1]);
     }
 
+    [TestMethod]
+    public void BitFileUploadShouldRenderThePreloadedFilesAsAlreadyUploaded()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "invoice.pdf", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        var file = com.Instance.Files.Single();
+
+        Assert.IsTrue(file.IsPreloaded);
+        Assert.AreEqual(BitFileUploadStatus.Completed, file.Status);
+        // the whole file is on the server already.
+        Assert.AreEqual(100, file.TotalUploadedSize);
+        // it takes no part in the transfer, though, so it neither inflates the batch nor reports one
+        // nobody has started as finished.
+        Assert.AreEqual(0, com.Instance.TotalSize);
+        Assert.AreEqual(0, com.Instance.OverallUploadProgress);
+        Assert.AreEqual("Already uploaded", com.Find(".bit-upl-us").TextContent.Trim());
+        // a file that never travelled from here shows its size alone rather than a count running up to it.
+        Assert.AreEqual(0, com.FindAll(".bit-upl-pct").Count);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldGiveThePreloadedFilesAnIdWhenTheyArriveWithoutOne()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 1 }
+            ]);
+        });
+
+        // the id names the file in the BIT_FILE_ID header of its remove request, so it cannot stay empty.
+        Assert.IsTrue(com.Instance.Files.Single().FileId.HasValue());
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldNeverUploadAPreloadedFile()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+
+        // there is no content on this side to send, so no request is even attempted for it.
+        Assert.IsEmpty(Context.JSInterop.Invocations["BitBlazorUI.FileUpload.upload"]);
+        Assert.AreEqual(BitFileUploadStatus.Completed, com.Instance.Files.Single().Status);
+        Assert.AreEqual(BitFileUploadStatus.Pending, com.Instance.UploadStatus);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldCountThePreloadedFilesTowardsTheListLimits()
+    {
+        SetupFiles([new() { Name = "b.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.MaxCount, 1);
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        SelectFiles(com);
+
+        // the file that is already on the server holds the only slot the list has.
+        Assert.AreEqual(BitFileUploadStatus.NotAllowed, com.Instance.Files[1].Status);
+        Assert.AreEqual("The maximum number of files is exceeded", com.Instance.Files[1].Message);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldKeepThePreloadedFilesThroughASelectionThatReplacesTheList()
+    {
+        SetupFiles([new() { Name = "b.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        SelectFiles(com);
+
+        // a selection replaces the selection, not the record: the attachments are still on the server.
+        Assert.HasCount(2, com.Instance.Files);
+        Assert.IsTrue(com.Instance.Files[0].IsPreloaded);
+        Assert.AreEqual("b.txt", com.Instance.Files[1].Name);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldAddressThePickedFilesByTheirOwnIndexBesideThePreloadedOnes()
+    {
+        SetupFiles([new() { Name = "b.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.Upload());
+        await com.InvokeAsync(() => com.Instance.__HandleChunkUploadProgress(0, 40));
+
+        // the index names the uploader of the picked file, which the preloaded one ahead of it in the
+        // list has none of - so the progress belongs to the second item rather than to the first.
+        Assert.AreEqual(40, com.Instance.Files[1].LastChunkUploadedSize);
+        Assert.AreEqual(0, com.Instance.Files[0].LastChunkUploadedSize);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldRemoveAPreloadedFileFromTheServer()
+    {
+        var handler = SetupHttpClient(HttpStatusCode.OK);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.RemoveUrl, "https://localhost/remove");
+            parameters.Add(p => p.ShowRemoveButton, true);
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        await com.InvokeAsync(() => com.Instance.RemoveFile(com.Instance.Files[0]));
+
+        Assert.AreEqual(BitFileUploadStatus.Removed, com.Instance.Files[0].Status);
+        Assert.AreEqual("server-1", handler.LastRequest!.Headers.GetValues("BIT_FILE_ID").Single());
+        // there is no uploader holding anything for it, so nothing is asked to hand anything back.
+        Assert.IsEmpty(Context.JSInterop.Invocations["BitBlazorUI.FileUpload.release"]);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldNotBringARemovedPreloadedFileBackWhileTheCollectionStaysTheSame()
+    {
+        SetupHttpClient(HttpStatusCode.OK);
+
+        IReadOnlyCollection<BitFileInfo> files = [new() { Name = "a.txt", Size = 100, FileId = "server-1" }];
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.RemoveUrl, "https://localhost/remove");
+            parameters.Add(p => p.PreloadedFiles, files);
+        });
+
+        await com.InvokeAsync(() => com.Instance.RemoveFile(com.Instance.Files[0]));
+
+        com.Render(parameters => parameters.Add(p => p.PreloadedFiles, files));
+
+        // the same collection is the same record, and the render it arrives on is not a reason to undo
+        // what the user has done to the list since.
+        Assert.AreEqual(BitFileUploadStatus.Removed, com.Instance.Files[0].Status);
+        Assert.AreEqual(0, com.FindAll(".bit-upl-itm").Count);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldRebuildThePreloadedFilesWhenTheCollectionIsReplaced()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        com.Render(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "b.txt", Size = 200, FileId = "server-2" }
+            ]);
+        });
+
+        // a new collection is a new record, so the preloaded part of the list is built from it again.
+        Assert.AreEqual("b.txt", com.Instance.Files.Single().Name);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldRenderACustomMessageForThePreloadedFiles()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFileMessage, "Saved with this record");
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        Assert.AreEqual("Saved with this record", com.Find(".bit-upl-us").TextContent.Trim());
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldKeepThePreloadedFilesThroughAReset()
+    {
+        SetupFiles([new() { Name = "b.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.Reset());
+
+        // a reset undoes the selection, and what is on the server was never part of it - which is also
+        // what keeps AutoReset from hiding the attachments of the record on every browse.
+        Assert.AreEqual("a.txt", com.Instance.Files.Single().Name);
+        Assert.AreEqual(BitFileUploadStatus.Pending, com.Instance.UploadStatus);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldNotBringAPreloadedFileDeletedFromTheServerBackOnAReset()
+    {
+        SetupHttpClient(HttpStatusCode.OK);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.RemoveUrl, "https://localhost/remove");
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        await com.InvokeAsync(() => com.Instance.RemoveFile(com.Instance.Files[0]));
+        await com.InvokeAsync(() => com.Instance.Reset());
+
+        // the file is gone from the server, and nothing on this side gets to claim otherwise.
+        Assert.IsEmpty(com.Instance.Files);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldRejectASelectedFileThatTheRecordAlreadyHas()
+    {
+        // a file picked here carries the modification time of the file system, which the server never
+        // reports, so the two are compared on the name and the size they do have in common.
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0, LastModified = 1700000000000 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.AllowDuplicates, false);
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        SelectFiles(com);
+
+        Assert.AreEqual(BitFileUploadStatus.NotAllowed, com.Instance.Files[1].Status);
+        Assert.AreEqual("The file is already selected", com.Instance.Files[1].Message);
+        // the attachment the record has is never the one turned away.
+        Assert.AreEqual(BitFileUploadStatus.Completed, com.Instance.Files[0].Status);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldTakeASelectedFileBackOnceTheRecordsCopyOfItIsRemoved()
+    {
+        SetupHttpClient(HttpStatusCode.OK);
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0, LastModified = 1700000000000 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.AllowDuplicates, false);
+            parameters.Add(p => p.RemoveUrl, "https://localhost/remove");
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        SelectFiles(com);
+
+        await com.InvokeAsync(() => com.Instance.RemoveFile(com.Instance.Files[0]));
+
+        // the rule is re-read over the whole list on every change, so deleting the copy on the server
+        // is what makes the file picked here uploadable after all.
+        Assert.AreEqual(BitFileUploadStatus.Pending, com.Instance.Files[1].Status);
+        Assert.IsNull(com.Instance.Files[1].Message);
+    }
+
+    [TestMethod]
+    public async Task BitFileUploadShouldNotRebuildThePreloadedFilesForACollectionWrittenInline()
+    {
+        SetupHttpClient(HttpStatusCode.OK);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.RemoveUrl, "https://localhost/remove");
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        await com.InvokeAsync(() => com.Instance.RemoveFile(com.Instance.Files[0]));
+
+        // another array holding the same file is what every render of a collection written inline in the
+        // markup hands over, and it says nothing about the record having changed.
+        com.Render(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        Assert.AreEqual(BitFileUploadStatus.Removed, com.Instance.Files.Single().Status);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldRenderAPreloadedFileAsNeitherSucceededNorFailed()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        var item = com.Find(".bit-upl-itm");
+
+        // an upload that just landed is the green one; a file that was already there is a state, not an
+        // outcome, and takes a class of its own so it can be colored - and restyled - as one.
+        Assert.IsTrue(item.ClassList.Contains("bit-upl-pre"));
+        Assert.IsFalse(item.ClassList.Contains("bit-upl-uld"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldAnnounceThePreloadedFilesApartFromTheSelectedOnes()
+    {
+        SetupFiles([new() { Name = "b.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.PreloadedFiles, (IReadOnlyCollection<BitFileInfo>)
+            [
+                new() { Name = "a.txt", Size = 100, FileId = "server-1" }
+            ]);
+        });
+
+        // nothing has been selected or uploaded in this visit yet, whatever the record already holds.
+        StringAssert.StartsWith(com.Find(".bit-upl-lvr").TextContent, "No file selected. 1 already attached.");
+
+        SelectFiles(com);
+
+        StringAssert.StartsWith(com.Find(".bit-upl-lvr").TextContent, "1 file selected. 1 already attached.");
+    }
+
     private void SetupFiles(BitFileInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInfo[]>("BitBlazorUI.FileUpload.setup", _ => true).SetResult(files);

From 438f47e6129977cb7986105f5a0397d205c152ea Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Thu, 24 Sep 2026 20:27:16 +0330
Subject: [PATCH 6/8] code review

---
 .../Inputs/FileUpload/BitFileInfo.cs          |  2 ++
 .../Inputs/FileUpload/BitFileUpload.ts        | 23 ++++++++++++++++++-
 .../Controllers/FileUploadController.cs       | 17 +++++++++-----
 .../Extensions/IConfigurationExtensions.cs    | 13 +++++++++++
 .../Inputs/FileUpload/BitFileUploadDemo.razor |  7 +++---
 .../FileUpload/BitFileUploadDemo.razor.cs     | 16 +++++++------
 .../Pages/Home/PopularComponents.razor.cs     |  4 ++--
 7 files changed, 63 insertions(+), 19 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
index 5360ced23fc..e64c73fc3e7 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileInfo.cs
@@ -137,6 +137,8 @@ public class BitFileInfo
     /// <summary>
     /// The message attached to the current <see cref="Status"/> of the file: the reason it was rejected by
     /// the validations before the upload, or the body of the server response of its upload or removal.
+    /// A response body is truncated to its first 8 KB, since it crosses the Blazor Server circuit, whose
+    /// default message size limit an error page of a failing endpoint would otherwise exceed.
     /// </summary>
     [JsonIgnore] public string? Message { get; internal set; }
 
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
index 8f6d5e0170e..6436015b165 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
@@ -562,6 +562,21 @@ namespace BitBlazorUI {
     }
 
     class BitFileUploader {
+        // a response body is handed to .NET as the Message of the file, and on Blazor Server that hop is a
+        // SignalR message whose default limit is 32 KB - so the body is cut well below it.
+        static readonly MAX_RESPONSE_TEXT_LENGTH = 8 * 1024;
+
+        // the cut counts UTF-16 code units, so it can land between the two halves of a surrogate pair; a lone
+        // high surrogate is not valid UTF-16 and .NET's JSON reader would reject the whole call, leaving the
+        // file in progress for good - so the cut steps back one unit instead of keeping half a character.
+        static capText(text: string): string {
+            const max = BitFileUploader.MAX_RESPONSE_TEXT_LENGTH;
+            if (text.length <= max) return text;
+
+            const last = text.charCodeAt(max - 1);
+            return text.substring(0, last >= 0xD800 && last <= 0xDBFF ? max - 1 : max);
+        }
+
         id: string;
         dotnetReference: DotNetObject;
         file: File | null;
@@ -612,7 +627,13 @@ namespace BitBlazorUI {
             const me = this;
             this.xhr.onreadystatechange = function (event) {
                 if (me.xhr.readyState === 4) {
-                    dotnetReference.invokeMethodAsync("HandleChunkUpload", index, me.xhr.status, me.xhr.responseText);
+                    // the body of an error response is whatever the endpoint happens to serve - an error page
+                    // of a hundred kilobytes as easily as a one line message - and it travels to .NET over the
+                    // Blazor Server circuit, whose default message size is 32 KB. A body over that limit would
+                    // tear the circuit down and take the whole page with it, so it is capped to what a Message
+                    // is actually read for rather than sent whole.
+                    const body = me.xhr.responseText ?? '';
+                    dotnetReference.invokeMethodAsync("HandleChunkUpload", index, me.xhr.status, BitFileUploader.capText(body));
                 }
             };
         }
diff --git a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Controllers/FileUploadController.cs b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Controllers/FileUploadController.cs
index f35c18730a8..3cf822a7ce5 100644
--- a/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Controllers/FileUploadController.cs
+++ b/src/BlazorUI/Demo/Bit.BlazorUI.Demo.Server/Controllers/FileUploadController.cs
@@ -8,7 +8,9 @@ public partial class FileUploadController : AppControllerBase
 
     [HttpPost]
     [RequestSizeLimit(2000 * 1024 * 1024 /*~2GB*/)]
-    public async Task<IActionResult> UploadNonChunkedFile(IFormFile file, CancellationToken cancellationToken)
+    public async Task<IActionResult> UploadNonChunkedFile(IFormFile file,
+                                                          [FromHeader(Name = "BIT_FILE_ID")][Required] string bitFileId,
+                                                          CancellationToken cancellationToken)
     {
         if (file is null)
         {
@@ -23,7 +25,9 @@ public async Task<IActionResult> UploadNonChunkedFile(IFormFile file, Cancellati
             Directory.CreateDirectory(_settings.UploadPath);
         }
 
-        var path = Path.Combine(_settings.UploadPath, file.FileName);
+        // the file is stored under the same {id}-{name} key the chunked endpoint uses, since that is the
+        // one the remove endpoint deletes by - storing it under the bare name would make every removal a 404.
+        var path = Path.Combine(_settings.UploadPath, $"{bitFileId}-{file.FileName}");
 
         if (System.IO.File.Exists(path))
         {
@@ -78,13 +82,14 @@ public IActionResult RemoveFile(string fileName,
     {
         var path = Path.Combine(_settings.UploadPath, $"{bitFileId}-{fileName}");
 
-        if (!System.IO.File.Exists(path))
+        // a delete is idempotent: a file this server never stored - the PreloadedFiles of the demo, which
+        // stand in for the attachments of a record, are exactly that - is already in the state asked for,
+        // and answering 404 would only mark it in the UI as a removal that failed.
+        if (System.IO.File.Exists(path))
         {
-            return NotFound();
+            System.IO.File.Delete(path);
         }
 
-        System.IO.File.Delete(path);
-
         return Ok();
     }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IConfigurationExtensions.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IConfigurationExtensions.cs
index 49fcd3817cb..3c9ea83b41a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IConfigurationExtensions.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IConfigurationExtensions.cs
@@ -10,4 +10,17 @@ public static string GetApiServerAddress(this IConfiguration configuration)
             ? apiServerAddress
             : throw new InvalidOperationException($"Api server address {apiServerAddress} is invalid");
     }
+
+    /// <summary>
+    /// Joins a relative api path onto the api server address. The address comes back without its trailing
+    /// slash, so a plain concatenation only works while it is empty; this puts the separator back otherwise.
+    /// </summary>
+    public static string GetApiUrl(this IConfiguration configuration, string relativePath)
+    {
+        var apiServerAddress = configuration.GetApiServerAddress();
+
+        return string.IsNullOrEmpty(apiServerAddress)
+            ? relativePath
+            : $"{apiServerAddress}/{relativePath.TrimStart('/')}";
+    }
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index 3ea4220a705..93b6652ba21 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -349,7 +349,7 @@
             from the form rather than from the URL.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl" ShowRemoveButton
                        UploadRequestQueryStrings="@(new Dictionary<string, string>{ {"qs1", "qsValue1" } })"
                        UploadRequestHttpHeaders="@(new Dictionary<string, string>{ {"header1", "value1" } })"
                        UploadRequestFormFields="@(new Dictionary<string, string>{ {"folder", "invoices" } })"
@@ -365,8 +365,9 @@
             value that never changes belongs in the static parameter, since a provider costs an await per request.
         </div>
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple ChunkedUpload
-                       UploadRequestHttpHeadersProvider="@GetFreshAuthHeaders" />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" Multiple ChunkedUpload
+                       UploadRequestHttpHeadersProvider="@GetFreshAuthHeaders"
+                       OnChange="@(_ => StateHasChanged())" OnProgress="@(_ => StateHasChanged())" />
         <br />
         <div>Requests so far: @tokenRequestCount</div>
         <br /><br />
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index 9c9489fd5c1..f1c8fcc284e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -1659,10 +1659,10 @@ public partial class BitFileUploadDemo
     private string onInvalidText = string.Empty;
     private string onUploadFailedText = string.Empty;
     private string onAllUploadsCompleteText = "No File";
-    private string UploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/UploadNonChunkedFile";
-    private string ChunkedUploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/UploadChunkedFile";
-    private string NonExistingUploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/MissingUploadEndpoint";
-    private string RemoveUrl => $"{_configuration.GetApiServerAddress()}FileUpload/RemoveFile";
+    private string UploadUrl => _configuration.GetApiUrl("api/FileUpload/UploadNonChunkedFile");
+    private string ChunkedUploadUrl => _configuration.GetApiUrl("api/FileUpload/UploadChunkedFile");
+    private string NonExistingUploadUrl => _configuration.GetApiUrl("api/FileUpload/MissingUploadEndpoint");
+    private string RemoveUrl => _configuration.GetApiUrl("api/FileUpload/RemoveFile");
 
     // the endpoints come from the injected configuration, so the cascaded parameters are built once the
     // injection has happened rather than in a field initializer - and once, so that the cascading value
@@ -2009,15 +2009,16 @@ private async Task HandleBrowseFileOnClick()
 private string ChunkedUploadUrl = ""/ChunkedUpload"";";
 
     private readonly string example12RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl""
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl"" ShowRemoveButton
                UploadRequestQueryStrings=""@(new Dictionary<string, string>{ {""qs1"", ""qsValue1"" } })""
                UploadRequestHttpHeaders=""@(new Dictionary<string, string>{ {""header1"", ""value1"" } })""
                UploadRequestFormFields=""@(new Dictionary<string, string>{ {""folder"", ""invoices"" } })""
                RemoveRequestQueryStrings=""@(new Dictionary<string, string>{ {""qs2"", ""qsValue2"" } })""
                RemoveRequestHttpHeaders=""@(new Dictionary<string, string>{ {""header2"", ""value2"" } })"" />
 
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ChunkedUpload
-               UploadRequestHttpHeadersProvider=""@GetFreshAuthHeaders"" />
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" Multiple ChunkedUpload
+               UploadRequestHttpHeadersProvider=""@GetFreshAuthHeaders""
+               OnChange=""@(_ => StateHasChanged())"" OnProgress=""@(_ => StateHasChanged())"" />
 
 <div>Requests so far: @tokenRequestCount</div>
 
@@ -2031,6 +2032,7 @@ private async Task HandleBrowseFileOnClick()
     private readonly string example12CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
+private string ChunkedUploadUrl = ""/ChunkedUpload"";
 private int tokenRequestCount;
 
 private Task<Dictionary<string, string>> GetFreshAuthHeaders()
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor.cs
index c5ee4b33fd3..161ddb2afe6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Home/PopularComponents.razor.cs
@@ -157,8 +157,8 @@ private void SelectComponent(PopularComponent com)
     private double Alpha = 1;
 
 
-    private string UploadUrl => $"{Configuration.GetApiServerAddress()}FileUpload/UploadChunkedFile";
-    private string RemoveUrl => $"{Configuration.GetApiServerAddress()}FileUpload/RemoveFile";
+    private string UploadUrl => Configuration.GetApiUrl("api/FileUpload/UploadChunkedFile");
+    private string RemoveUrl => Configuration.GetApiUrl("api/FileUpload/RemoveFile");
 
 
 

From 03ef0d4766551c11131b732c1de674bbed78df64 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Thu, 24 Sep 2026 21:49:19 +0330
Subject: [PATCH 7/8] improve further

---
 .../Inputs/FileUpload/BitFileUpload.razor     |  47 ++
 .../Inputs/FileUpload/BitFileUpload.razor.cs  | 174 +++-
 .../Inputs/FileUpload/BitFileUpload.scss      | 198 ++++-
 .../Inputs/FileUpload/BitFileUpload.ts        |  73 +-
 .../FileUpload/BitFileUploadClassStyles.cs    |  22 +
 .../BitFileUploadJsRuntimeExtensions.cs       |   9 +-
 .../Inputs/FileUpload/BitFileUploadParams.cs  |  86 ++
 .../Inputs/FileUpload/BitFileUploadDemo.razor | 748 ++++++------------
 .../FileUpload/BitFileUploadDemo.razor.cs     | 585 +++++++++-----
 .../FileUpload/BitFileUploadDemo.razor.scss   |   7 -
 .../Inputs/FileUpload/BitFileUploadTests.cs   | 238 +++++-
 11 files changed, 1446 insertions(+), 741 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor
index 5a9c58bf5b6..a2a9e970f5b 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor
@@ -22,6 +22,13 @@
                 aria-describedby="@(_HasDescription ? _descriptionId : null)"
                 style="@Styles?.Label"
                 class="bit-upl-lbl @Classes?.Label">
+            @* the drop area is the one place a label reads better with a glyph than without, so it brings one
+               of its own; anywhere else the icon is opt-in. the text beside it already names the button. *@
+            @{ var labelIcon = BitIconInfo.From(LabelIcon, LabelIconName ?? (ShowDropArea ? "CloudUpload" : null)); }
+            @if (labelIcon is { IsEmpty: false })
+            {
+                <i style="@Styles?.LabelIcon" class="bit-upl-lic @labelIcon.GetCssClasses() @Classes?.LabelIcon" aria-hidden="true" />
+            }
             @Label
         </button>
     }
@@ -83,5 +90,45 @@
         </div>
     }
 
+    @* the batch buttons stay where they are for as long as the list has files picked here, and the ones with
+       nothing to act on right now are marked aria-disabled rather than taken out or natively disabled: the
+       state changes on its own as uploads settle, and a focused button that vanished - or turned disabled -
+       under the keyboard would drop the focus on the document body. *@
+    @if (ShowBatchActions && _HasPickedFiles)
+    {
+        var canUploadAll = _CanUploadAll;
+        var canCancelAll = _CanCancelAll;
+        var canClear = _CanClear;
+        <div style="@Styles?.BatchActions" class="bit-upl-bat @Classes?.BatchActions">
+            @if (AutoUpload is false)
+            {
+                <button @onclick="HandleUploadAll"
+                        type="button"
+                        disabled="@(IsEnabled is false)"
+                        aria-disabled="@(canUploadAll ? null : "true")"
+                        style="@Styles?.BatchActionButton"
+                        class="bit-upl-bab @Classes?.BatchActionButton">
+                    @UploadAllText
+                </button>
+            }
+            <button @onclick="HandleCancelAll"
+                    type="button"
+                    disabled="@(IsEnabled is false)"
+                    aria-disabled="@(canCancelAll ? null : "true")"
+                    style="@Styles?.BatchActionButton"
+                    class="bit-upl-bab @Classes?.BatchActionButton">
+                @CancelAllText
+            </button>
+            <button @onclick="HandleClear"
+                    type="button"
+                    disabled="@(IsEnabled is false)"
+                    aria-disabled="@(canClear ? null : "true")"
+                    style="@Styles?.BatchActionButton"
+                    class="bit-upl-bab @Classes?.BatchActionButton">
+                @ClearText
+            </button>
+        </div>
+    }
+
     <div role="status" aria-live="polite" aria-atomic="true" class="bit-upl-lvr">@_announcement</div>
 </div>
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
index 823dc264fbe..fb04a8a47af 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.razor.cs
@@ -7,9 +7,10 @@ namespace Bit.BlazorUI;
 
 /// <summary>
 /// BitFileUpload wraps the HTML file input element(s) and uploads them to a given URL, with support for
-/// drag-and-drop onto the component or onto drop zones of the app's own, clipboard paste, folder and camera
-/// capture selection, image previews, chunked and resumable uploads, a concurrency limit, pause/cancel,
-/// automatic retries, validation, and server-side removal.
+/// drag-and-drop onto the component, a built-in drop area or drop zones of the app's own (flagging a drag the
+/// rules will refuse before it lands), clipboard paste, folder and camera capture selection, image previews,
+/// chunked and resumable uploads, a concurrency limit, pause/cancel, batch actions, automatic retries,
+/// validation, and server-side removal.
 /// </summary>
 public partial class BitFileUpload : BitComponentBase
 {
@@ -33,6 +34,10 @@ public partial class BitFileUpload : BitComponentBase
     private string? _dropZoneSelector;
     private string? _dragClass;
     private string? _dragStyle;
+    private string? _rejectClass;
+    private string? _rejectStyle;
+    private string[]? _acceptedMimeTypes;
+    private int _remainingSlots = -1;
     private string? _announcement;
     private bool _announcementMarker;
     private int _removingCount;
@@ -200,6 +205,11 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public string? CancelButtonTitle { get; set; }
 
+    /// <summary>
+    /// The text of the "Cancel all" button of the batch actions (see <see cref="ShowBatchActions"/>).
+    /// </summary>
+    [Parameter] public string CancelAllText { get; set; } = "Cancel all";
+
     /// <summary>
     /// The message shown for canceled file uploads.
     /// </summary>
@@ -232,6 +242,12 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public BitFileUploadClassStyles? Classes { get; set; }
 
+    /// <summary>
+    /// The text of the "Clear" button of the batch actions (see <see cref="ShowBatchActions"/>), which resets
+    /// the component through <see cref="Reset"/>.
+    /// </summary>
+    [Parameter] public string ClearText { get; set; } = "Clear";
+
     /// <summary>
     /// The general color of the file upload, applied to the browse button, the drag-and-drop indicator,
     /// the progress bars and the hovered action buttons.
@@ -337,6 +353,32 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public string Label { get; set; } = "Browse";
 
+    /// <summary>
+    /// The icon of the browse button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="LabelIconName"/> when both are set.
+    /// </summary>
+    /// <remarks>
+    /// Use this property to render an icon from external libraries like FontAwesome or Bootstrap Icons.
+    /// For built-in Fluent UI icons, use <see cref="LabelIconName"/> instead.
+    /// </remarks>
+    [Parameter] public BitIconInfo? LabelIcon { get; set; }
+
+    /// <summary>
+    /// The name of the icon of the browse button from the built-in Fluent UI icons.
+    /// Defaults to <c>CloudUpload</c> in the <see cref="ShowDropArea"/> mode, and to no icon otherwise.
+    /// </summary>
+    /// <remarks>
+    /// For external icon libraries, use <see cref="LabelIcon"/> instead.
+    /// </remarks>
+    [Parameter] public string? LabelIconName { get; set; }
+
+    /// <summary>
+    /// The position of the icon of the browse button relative to its text: before it (the default) or after it.
+    /// In the <see cref="ShowDropArea"/> mode the icon is stacked above or below the text instead.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitIconPosition? LabelIconPosition { get; set; }
+
     /// <summary>
     /// Custom Razor template rendered in place of the browse button, which also replaces the built-in
     /// dashed drop indicator living on that button - a custom label should bring its own drag feedback
@@ -627,6 +669,22 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public Func<BitFileInfo, int, bool>? ShouldAutoRetry { get; set; }
 
+    /// <summary>
+    /// Whether an action bar with "Upload all", "Cancel all" and "Clear" buttons is rendered under the file
+    /// list of picked files. The buttons keep their places, and one with nothing to act on is marked
+    /// aria-disabled rather than removed, so a keyboard user never loses the focus to it. The texts come from
+    /// <see cref="UploadAllText"/>, <see cref="CancelAllText"/> and <see cref="ClearText"/>.
+    /// </summary>
+    [Parameter] public bool ShowBatchActions { get; set; }
+
+    /// <summary>
+    /// Whether the browse button is rendered as a large drop area - a full-width dashed panel with an icon
+    /// over the <see cref="Label"/> - instead of a regular button. It is still a real button, so it is reached
+    /// with Tab and opens the file dialog with Enter or Space.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool ShowDropArea { get; set; }
+
     /// <summary>
     /// Whether a thumbnail of every selected image is shown at the head of its file item, produced
     /// entirely in the browser from an object URL that is handed back as soon as the file is removed or
@@ -658,6 +716,11 @@ public partial class BitFileUpload : BitComponentBase
     /// </summary>
     [Parameter] public string SuccessfulUploadMessage { get; set; } = "File upload succeeded";
 
+    /// <summary>
+    /// The text of the "Upload all" button of the batch actions (see <see cref="ShowBatchActions"/>).
+    /// </summary>
+    [Parameter] public string UploadAllText { get; set; } = "Upload all";
+
     /// <summary>
     /// Gets or sets the icon to use for the upload button using custom CSS classes for external icon libraries.
     /// Takes precedence over <see cref="UploadIconName"/> when both are set.
@@ -1195,6 +1258,10 @@ protected override void RegisterCssClasses()
             BitSize.Large => "bit-upl-lg",
             _ => "bit-upl-md"
         });
+
+        ClassBuilder.Register(() => ShowDropArea ? "bit-upl-dra" : string.Empty);
+
+        ClassBuilder.Register(() => LabelIconPosition is BitIconPosition.End ? "bit-upl-eni" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
@@ -1238,6 +1305,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     {
         if (firstRender is false)
         {
+            // the room MaxCount leaves changes with every selection and removal rather than only with the
+            // parameters, so the drop zone is brought up to date after each render; it only calls into
+            // JavaScript when something it judges a drag by has actually moved.
+            if (_dropZoneRef is not null)
+            {
+                await UpdateDropZone();
+            }
+
             await RestorePendingFocus();
             return;
         }
@@ -1250,9 +1325,14 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         _dropZoneSelector = DropZoneSelector;
         _dragClass = GetDragClass();
         _dragStyle = Styles?.Dragging;
+        _rejectClass = GetRejectClass();
+        _rejectStyle = Styles?.DraggingRejected;
+        _acceptedMimeTypes = GetDragAcceptedMimeTypes();
+        _remainingSlots = GetRemainingSlots();
 
         _dropZoneRef = await _js.BitFileUploadSetupDragDrop(RootElement, _inputRef, _dragClass, _dragStyle,
-                                                           _allowDrop, _allowPaste, _expandDirectories, _dropZoneSelector);
+                                                           _allowDrop, _allowPaste, _expandDirectories, _dropZoneSelector,
+                                                           _rejectClass, _rejectStyle, _acceptedMimeTypes, _remainingSlots);
 
         if (IsDisposed) return;
         if (_dropZoneRef is null) return;
@@ -1319,6 +1399,44 @@ internal async Task HandleItemRemove(BitFileInfo file)
         await RemoveFile(file);
     }
 
+    // an aria-disabled button still takes a click, so each handler asks for itself whether it has anything to do.
+    private async Task HandleUploadAll()
+    {
+        if (_CanUploadAll is false) return;
+
+        await Upload();
+    }
+
+    private async Task HandleCancelAll()
+    {
+        if (_CanCancelAll is false) return;
+
+        await CancelUpload();
+    }
+
+    private async Task HandleClear()
+    {
+        if (_CanClear is false) return;
+
+        // the whole list goes away with the action bar, so the focus returns to where a new selection starts.
+        RequestFocus(null, BitFileUploadFocusTarget.Upload);
+
+        await Reset();
+    }
+
+    private bool _HasPickedFiles => _files.Any(f => f.IsPreloaded is false && f.Status is not BitFileUploadStatus.Removed);
+
+    // "Upload all" is offered while a file that nobody has started yet - or that was paused, failed or was
+    // canceled - is waiting for it; a file already on the wire or in the queue has been asked already.
+    private bool _CanUploadAll => AutoUpload is false &&
+                                  _files.Any(f => f.IsQueued is false && f.Status is not BitFileUploadStatus.InProgress && HasPendingWork(f));
+
+    private bool _CanCancelAll => _files.Any(f => f.IsQueued || f.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Paused);
+
+    // clearing mid-transfer would throw away the uploads in flight, so "Clear" waits for the list to settle.
+    private bool _CanClear => IsRemoving is false && _HasPickedFiles &&
+                              _files.Any(f => f.IsQueued || f.Status is BitFileUploadStatus.InProgress) is false;
+
     internal bool IsFileTypeNotAllowed(BitFileInfo file)
     {
         if (AllowsAllFileTypes(AllowedExtensions)) return false;
@@ -1355,11 +1473,11 @@ private void RequestRender()
         StateHasChanged();
     }
 
-    private void RequestFocus(BitFileInfo file, BitFileUploadFocusTarget target, BitFileInfo? fallback = null)
+    private void RequestFocus(BitFileInfo? file, BitFileUploadFocusTarget target, BitFileInfo? fallback = null)
     {
         _pendingFocus = true;
         _pendingFocusTarget = target;
-        _pendingFocusFileId = file.FileId;
+        _pendingFocusFileId = file?.FileId;
         _pendingFocusFallbackFileId = fallback?.FileId;
     }
 
@@ -1418,13 +1536,48 @@ private static bool IsCountedInOverallProgress(BitFileInfo file)
 
     private string GetDragClass() => $"bit-upl-drg {Classes?.Dragging}".Trim();
 
+    private string GetRejectClass() => $"bit-upl-drj {Classes?.DraggingRejected}".Trim();
+
+    // What a drag in flight can be judged against. A browser exposes the MIME type of a dragged file but
+    // never its name until it is dropped, so the rule can only be checked mid-drag when every entry of it is
+    // a MIME type; an extension anywhere in it leaves the drag unjudged rather than guessed at.
+    private string[]? GetDragAcceptedMimeTypes()
+    {
+        if (AllowsAllFileTypes(AllowedExtensions)) return null;
+
+        var entries = GetNormalizedExtensions(AllowedExtensions).ToArray();
+
+        if (entries.Length == 0 || entries.Any(e => e.Contains('/') is false)) return null;
+
+        return entries;
+    }
+
+    // How many more files the list can take before MaxCount turns them away (-1 for no limit). A selection
+    // that does not append replaces everything picked here, so only the record's own files count against it.
+    private int GetRemainingSlots()
+    {
+        if (MaxCount <= 0) return -1;
+
+        var taken = _files.Count(f => f.Status is not BitFileUploadStatus.NotAllowed and not BitFileUploadStatus.Removed
+                                      && (Append || f.IsPreloaded));
+
+        return Math.Max(0, MaxCount - taken);
+    }
+
     private async Task UpdateDropZone()
     {
         var dragClass = GetDragClass();
         var dragStyle = Styles?.Dragging;
+        var rejectClass = GetRejectClass();
+        var rejectStyle = Styles?.DraggingRejected;
+        var acceptedMimeTypes = GetDragAcceptedMimeTypes();
+        var remainingSlots = GetRemainingSlots();
 
         if (_allowDrop == AllowDrop && _allowPaste == AllowPaste && _expandDirectories == Directory &&
-            _dropZoneSelector == DropZoneSelector && _dragClass == dragClass && _dragStyle == dragStyle) return;
+            _dropZoneSelector == DropZoneSelector && _dragClass == dragClass && _dragStyle == dragStyle &&
+            _rejectClass == rejectClass && _rejectStyle == rejectStyle && _remainingSlots == remainingSlots &&
+            (_acceptedMimeTypes ?? []).SequenceEqual(acceptedMimeTypes ?? [], StringComparer.Ordinal) &&
+            (_acceptedMimeTypes is null) == (acceptedMimeTypes is null)) return;
 
         _allowDrop = AllowDrop;
         _allowPaste = AllowPaste;
@@ -1432,11 +1585,16 @@ private async Task UpdateDropZone()
         _dropZoneSelector = DropZoneSelector;
         _dragClass = dragClass;
         _dragStyle = dragStyle;
+        _rejectClass = rejectClass;
+        _rejectStyle = rejectStyle;
+        _acceptedMimeTypes = acceptedMimeTypes;
+        _remainingSlots = remainingSlots;
 
         try
         {
             await _dropZoneRef.InvokeVoidAsync("update", _allowDrop, _allowPaste, _expandDirectories,
-                                               _dragClass, _dragStyle, _dropZoneSelector);
+                                               _dragClass, _dragStyle, _dropZoneSelector,
+                                               _rejectClass, _rejectStyle, _acceptedMimeTypes, _remainingSlots);
         }
         catch (JSDisconnectedException) { } // we can ignore this exception here
     }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
index 77c3d699604..1e9ac2ce879 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.scss
@@ -18,9 +18,23 @@
 //   --bit-FileUpload-label-min-height           browse button height floor                     (default: per size, $siz-ctrl-*)
 //   --bit-FileUpload-label-padding              browse button padding                          (default: per size, $siz-ctrl-pad-*)
 //   --bit-FileUpload-label-font-size            browse button text size                        (default: per size, from the type ramp)
-//   --bit-FileUpload-label-font-weight          browse button text weight                      (default: $tg-fw-light)
+//   --bit-FileUpload-label-font-weight          browse button text weight                      (default: $tg-font-weight)
+//   --bit-FileUpload-label-gap                  room between the browse button icon and text   (default: spacing(0.75))
+//   --bit-FileUpload-label-icon-size            browse button icon size                        (default: per size, $siz-icon-*)
 //   --bit-FileUpload-focus-color                keyboard focus ring color                      (default: the role's focus color)
 //
+//   --bit-FileUpload-drop-area-min-height       height floor of the ShowDropArea panel         (default: spacing(16))
+//   --bit-FileUpload-drop-area-padding          its padding                                    (default: spacing(3))
+//   --bit-FileUpload-drop-area-color            its text                                       (default: $clr-fg-pri)
+//   --bit-FileUpload-drop-area-background       its surface at rest                            (default: $clr-bg-sec)
+//   --bit-FileUpload-drop-area-border-color     its dashed rule at rest                        (default: $clr-brd-pri)
+//   --bit-FileUpload-drop-area-border-style     its rule style                                 (default: dashed)
+//   --bit-FileUpload-drop-area-radius           its corner radius                              (default: $shp-radius-surface)
+//   --bit-FileUpload-drop-area-hover-border-color its rule on hover                            (default: the Color role's main color)
+//   --bit-FileUpload-drop-area-hover-background its surface on hover and while dragged over    (default: the role's main color at 8%)
+//   --bit-FileUpload-drop-area-icon-color       its large icon                                 (default: the Color role's main color)
+//   --bit-FileUpload-drop-area-icon-size        its large icon size                            (default: spacing(4))
+//
 //   --bit-FileUpload-description-color          hint text under the browse button              (default: $clr-fg-sec)
 //   --bit-FileUpload-description-font-size      hint text size                                 (default: per size)
 //
@@ -32,6 +46,7 @@
 //   --bit-FileUpload-item-padding               padding around the name, size and progress     (default: spacing(1) spacing(2))
 //   --bit-FileUpload-item-font-size             file name size                                 (default: per size)
 //   --bit-FileUpload-item-font-weight           file name weight                               (default: $tg-fw-light)
+//   --bit-FileUpload-item-meta-font-size        size and percentage line under the file name   (default: per size)
 //   --bit-FileUpload-list-max-height            tallest the file list grows before it
 //                                               scrolls, for a folder or a long batch          (default: none)
 //
@@ -65,6 +80,13 @@
 //   --bit-FileUpload-drop-background            its fill in the same state                     (default: the role's hover color)
 //   --bit-FileUpload-drop-border-color          its rule in the same state                     (default: the role's on-color)
 //   --bit-FileUpload-drop-border-style          its rule style in the same state               (default: dashed)
+//   --bit-FileUpload-drop-reject-color          browse button text while the dragged files are
+//                                               known to be turned away                        (default: $clr-err-text)
+//   --bit-FileUpload-drop-reject-background     its fill in the same state                     (default: $clr-err)
+//   --bit-FileUpload-drop-reject-border-color   its rule in the same state                     (default: $clr-err-text)
+//
+//   --bit-FileUpload-batch-action-color         text of the Upload all/Cancel all/Clear buttons (default: the Color role's main color)
+//   --bit-FileUpload-batch-action-hover-background their tint on hover                         (default: the role's main color at 10%)
 //
 //   --bit-FileUpload-disabled-color             text of a disabled component                   (default: $clr-fg-dis)
 //   --bit-FileUpload-disabled-background        fill of a disabled browse button                (default: $clr-bg-dis)
@@ -78,9 +100,9 @@
     max-width: var(--bit-FileUpload-max-width, #{spacing(43.75)});
 
     &.bit-dis {
+        // only the text dims on the root: its border and fill are the browse button's to carry, and a fill
+        // here would lay a grey slab behind the description and the whole file list.
         color: var(--bit-FileUpload-disabled-color, #{$clr-fg-dis});
-        border-color: var(--bit-FileUpload-disabled-border-color, #{$clr-brd-dis});
-        background-color: var(--bit-FileUpload-disabled-background, #{$clr-bg-dis});
 
         //the browse button carries the role color while enabled, but a disabled file upload reads as a
         //neutral form field whatever its role and variant (see the disabled conventions in
@@ -126,7 +148,8 @@
     text-transform: $tg-ctrl-text-transform;
     -webkit-tap-highlight-color: transparent;
     border-radius: var(--bit-FileUpload-label-radius, #{$shp-radius-button});
-    font-weight: var(--bit-FileUpload-label-font-weight, #{$tg-fw-light});
+    gap: var(--bit-FileUpload-label-gap, #{spacing(0.75)});
+    font-weight: var(--bit-FileUpload-label-font-weight, #{$tg-font-weight});
     // The control height of the size class, as a floor rather than a height, so the button still lines up
     // with the other controls of its size and stays above the 24px minimum pointer target of WCAG 2.2 (SC 2.5.8).
     min-height: var(--bit-FileUpload-label-min-height, var(--bit-upl-lbl-height));
@@ -142,9 +165,16 @@
         @include focus-ring(var(--bit-FileUpload-focus-color, var(--bit-upl-clr-focus)));
     }
 
-    i {
-        margin-inline-end: spacing(0.625);
-    }
+}
+
+.bit-upl-lic {
+    line-height: 1;
+    flex-shrink: 0;
+    font-size: var(--bit-FileUpload-label-icon-size, var(--bit-upl-ico-fontsize));
+}
+
+.bit-upl-eni .bit-upl-lbl {
+    flex-direction: row-reverse;
 }
 
 //Fill - the default: a solid block of the role color labelled in the role's on-color.
@@ -240,6 +270,93 @@
     }
 }
 
+// while the dragged files are known to be turned away the drop indicator says so in the error role instead
+// of inviting the drop. the class list is longer than the drag state's so that this one wins over it.
+.bit-upl.bit-upl-drg.bit-upl-drj {
+    .bit-upl-lbl {
+        color: var(--bit-FileUpload-drop-reject-color, #{$clr-err-text});
+        border-color: var(--bit-FileUpload-drop-reject-border-color, #{$clr-err-text});
+        background-color: var(--bit-FileUpload-drop-reject-background, #{$clr-err});
+    }
+}
+
+// ShowDropArea: the browse button grows into a full-width panel with its icon stacked over the text. It
+// stays one button, so the whole area is the click target and a keyboard reaches it with Tab. At rest it is
+// a neutral surface under a dashed rule, since a panel this size in the full role color would outweigh
+// everything around it; the role takes over the rule and a tint on hover and while files hover over it.
+.bit-upl.bit-upl-dra {
+    max-width: var(--bit-FileUpload-max-width, none);
+
+    .bit-upl-lbl {
+        width: 100%;
+        flex-direction: column;
+        text-align: center;
+        white-space: normal;
+        border-style: var(--bit-FileUpload-drop-area-border-style, dashed);
+        border-radius: var(--bit-FileUpload-drop-area-radius, #{$shp-radius-surface});
+        min-height: var(--bit-FileUpload-drop-area-min-height, #{spacing(16)});
+        padding: var(--bit-FileUpload-drop-area-padding, #{spacing(3)});
+        color: var(--bit-FileUpload-drop-area-color, #{$clr-fg-pri});
+        border-color: var(--bit-FileUpload-drop-area-border-color, #{$clr-brd-pri});
+        background-color: var(--bit-FileUpload-drop-area-background, #{$clr-bg-sec});
+
+        @media (hover: hover) {
+            &:hover {
+                color: var(--bit-FileUpload-drop-area-color, #{$clr-fg-pri});
+                border-color: var(--bit-FileUpload-drop-area-hover-border-color, var(--bit-upl-clr));
+                background-color: var(--bit-FileUpload-drop-area-hover-background, #{translucent(var(--bit-upl-clr), 8%)});
+            }
+        }
+
+        &:active {
+            color: var(--bit-FileUpload-drop-area-color, #{$clr-fg-pri});
+            border-color: var(--bit-FileUpload-drop-area-hover-border-color, var(--bit-upl-clr));
+            background-color: var(--bit-FileUpload-drop-area-hover-background, #{translucent(var(--bit-upl-clr), 8%)});
+        }
+    }
+
+    .bit-upl-lic {
+        color: var(--bit-FileUpload-drop-area-icon-color, var(--bit-upl-clr));
+        font-size: var(--bit-FileUpload-label-icon-size, var(--bit-FileUpload-drop-area-icon-size, #{spacing(4)}));
+    }
+
+    &.bit-upl-eni .bit-upl-lbl {
+        flex-direction: column-reverse;
+    }
+
+    &.bit-upl-drg .bit-upl-lbl {
+        color: var(--bit-FileUpload-drop-area-color, #{$clr-fg-pri});
+        border-color: var(--bit-FileUpload-drop-border-color, var(--bit-upl-clr));
+        background-color: var(--bit-FileUpload-drop-area-hover-background, #{translucent(var(--bit-upl-clr), 8%)});
+    }
+
+    // the panel only takes a tint of the error role rather than its full fill, so its rule is drawn in the
+    // error color itself - the role's on-color, which the regular drop indicator uses, would vanish here.
+    &.bit-upl-drg.bit-upl-drj .bit-upl-lbl {
+        color: var(--bit-FileUpload-drop-area-color, #{$clr-fg-pri});
+        border-color: var(--bit-FileUpload-drop-reject-border-color, #{$clr-err});
+        background-color: translucent($clr-err, 8%);
+
+        .bit-upl-lic {
+            color: $clr-err;
+        }
+    }
+
+    &.bit-dis .bit-upl-lbl {
+        color: var(--bit-FileUpload-disabled-color, #{$clr-fg-dis});
+        border-color: var(--bit-FileUpload-disabled-border-color, #{$clr-brd-dis});
+        background-color: var(--bit-FileUpload-disabled-background, #{$clr-bg-dis});
+
+        .bit-upl-lic {
+            color: inherit;
+        }
+    }
+
+    .bit-upl-dsc {
+        text-align: center;
+    }
+}
+
 .bit-upl-dsc {
     color: var(--bit-FileUpload-description-color, #{$clr-fg-sec});
     font-size: var(--bit-FileUpload-description-font-size, var(--bit-upl-fs-fontsize));
@@ -376,7 +493,7 @@
     align-items: center;
     flex-flow: row nowrap;
     margin-top: spacing(0.25);
-    font-size: var(--bit-FileUpload-description-font-size, var(--bit-upl-fs-fontsize));
+    font-size: var(--bit-FileUpload-item-meta-font-size, var(--bit-upl-fs-fontsize));
 }
 
 .bit-upl-fs {
@@ -460,6 +577,53 @@
     }
 }
 
+// the batch actions are secondary to the browse button, so they take the look of a text button in the role
+// color, lined up at the end of the list they act on.
+.bit-upl-bat {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: var(--bit-FileUpload-gap, #{spacing(0.5)});
+}
+
+.bit-upl-bab {
+    margin: 0;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+    box-sizing: border-box;
+    font-family: $tg-font-family;
+    font-weight: $tg-font-weight;
+    background-color: transparent;
+    letter-spacing: $tg-ctrl-letter-spacing;
+    text-transform: $tg-ctrl-text-transform;
+    border-radius: $shp-radius-button;
+    -webkit-tap-highlight-color: transparent;
+    min-height: var(--bit-upl-bab-height);
+    font-size: var(--bit-upl-lbl-fontsize);
+    padding: var(--bit-upl-bab-padding);
+    color: var(--bit-FileUpload-batch-action-color, var(--bit-upl-clr));
+    transition: background-color $mot-duration-short $mot-easing;
+
+    @media (hover: hover) {
+        &:hover:not(:disabled, [aria-disabled="true"]) {
+            background-color: var(--bit-FileUpload-batch-action-hover-background, #{translucent(var(--bit-upl-clr), 10%)});
+        }
+    }
+
+    &:focus-visible {
+        outline: none;
+        @include focus-ring(var(--bit-FileUpload-focus-color, var(--bit-upl-clr-focus)));
+    }
+
+    // an idle action keeps its place and its focus, and only reads as unavailable.
+    &:disabled,
+    &[aria-disabled="true"] {
+        cursor: default;
+        color: var(--bit-FileUpload-disabled-color, #{$clr-fg-dis});
+    }
+}
+
 .bit-upl-lvr {
     top: auto;
     width: 1px;
@@ -508,6 +672,8 @@
     --bit-upl-lbl-height: #{$siz-ctrl-sm};
     --bit-upl-lbl-fontsize: #{$tg-fs-xs};
     --bit-upl-lbl-padding: #{$siz-ctrl-pad-y-sm} #{$siz-ctrl-pad-x-sm};
+    --bit-upl-bab-height: #{$siz-ctrl-sm};
+    --bit-upl-bab-padding: #{$siz-ctrl-pad-y-sm} #{$siz-ctrl-pad-x-sm};
     --bit-upl-itm-fontsize: #{$tg-fs-xs};
     --bit-upl-fs-fontsize: #{$tg-fs-xs};
     --bit-upl-prv-size: #{spacing(4)};
@@ -519,6 +685,8 @@
     --bit-upl-lbl-height: #{$siz-ctrl-md};
     --bit-upl-lbl-fontsize: #{$tg-fs-sm};
     --bit-upl-lbl-padding: #{$siz-ctrl-pad-y-md} #{$siz-ctrl-pad-x-md};
+    --bit-upl-bab-height: #{$siz-ctrl-sm};
+    --bit-upl-bab-padding: #{$siz-ctrl-pad-y-sm} #{$siz-ctrl-pad-x-sm};
     --bit-upl-itm-fontsize: #{$tg-fs-sm};
     --bit-upl-fs-fontsize: #{$tg-fs-xs};
     --bit-upl-prv-size: #{spacing(5)};
@@ -530,6 +698,8 @@
     --bit-upl-lbl-height: #{$siz-ctrl-lg};
     --bit-upl-lbl-fontsize: #{$tg-fs-md};
     --bit-upl-lbl-padding: #{$siz-ctrl-pad-y-lg} #{$siz-ctrl-pad-x-lg};
+    --bit-upl-bab-height: #{$siz-ctrl-md};
+    --bit-upl-bab-padding: #{$siz-ctrl-pad-y-md} #{$siz-ctrl-pad-x-md};
     --bit-upl-itm-fontsize: #{$tg-fs-md};
     --bit-upl-fs-fontsize: #{$tg-fs-sm};
     --bit-upl-prv-size: #{spacing(6.5)};
@@ -561,6 +731,18 @@
         border-color: Highlight;
     }
 
+    // a rejected drag loses its error fill as well, so its rule switches to a dotted one: a difference of
+    // shape, which is all a forced palette leaves to tell the two drag states apart.
+    .bit-upl.bit-upl-drg.bit-upl-drj .bit-upl-lbl {
+        border-style: dotted;
+        border-color: Mark;
+    }
+
+    .bit-upl-bab:disabled,
+    .bit-upl-bab[aria-disabled="true"] {
+        color: GrayText;
+    }
+
     // The track and the bar are both painted with system colors rather than outlined, since a rule around
     // a track two pixels high would leave the bar inside it no room at all to be seen.
     .bit-upl-pbc {
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
index 6436015b165..dcaf11ea070 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUpload.ts
@@ -96,10 +96,18 @@ namespace BitBlazorUI {
             allowDrop: boolean,
             allowPaste: boolean,
             expandDirectories: boolean,
-            dropZoneSelector: string | null) {
+            dropZoneSelector: string | null,
+            rejectClass: string = '',
+            rejectStyle: string | null = null,
+            acceptedMimeTypes: string[] | null = null,
+            remainingSlots: number = -1) {
 
             let dragCounter = 0;
             let dragClasses = dragClass.split(' ').filter(c => c.length > 0);
+            let rejectClasses = rejectClass.split(' ').filter(c => c.length > 0);
+            // whether the drag in flight is known to carry files the component is going to turn away, decided
+            // once when it enters, since what is being dragged does not change until it is dropped.
+            let isRejected = false;
             // the inline style every zone carried before the drag state was applied to it, so that the
             // element the app owns gets exactly its own style back rather than losing it.
             const originalStyles = new Map<HTMLElement, string | null>();
@@ -164,13 +172,47 @@ namespace BitBlazorUI {
                 return allowDrop && !inputElement.disabled && hasFiles(e);
             }
 
+            // a browser shows the kind and the MIME type of a dragged file but never its name until the drop,
+            // so only what those two can tell is judged here: a type the MIME-only rule does not accept, or
+            // more files than the MaxCount still has room for. anything unknown - a folder, a type the OS left
+            // blank - counts as accepted, and the validations have the final word once the files land anyway.
+            function judgeDrag(e: DragEvent) {
+                const items = e.dataTransfer?.items;
+                if (!items) return false;
+
+                const files = Array.prototype.filter.call(items, (i: DataTransferItem) => i.kind === 'file') as DataTransferItem[];
+                if (files.length === 0) return false;
+
+                if (remainingSlots >= 0) {
+                    const acceptsMany = inputElement.multiple || inputElement.webkitdirectory;
+                    const count = acceptsMany ? files.length : 1;
+                    if (count > remainingSlots) return true;
+                }
+
+                if (!acceptedMimeTypes || acceptedMimeTypes.length === 0) return false;
+
+                return files.some(f => {
+                    const type = (f.type || '').toLowerCase();
+                    if (!type) return false;
+
+                    return !acceptedMimeTypes!.some(a => {
+                        const entry = a.toLowerCase();
+                        return entry.endsWith('/*') ? type.startsWith(entry.substring(0, entry.length - 1)) : type === entry;
+                    });
+                });
+            }
+
             function paintZone(zone: HTMLElement) {
                 zone.classList.add(...dragClasses);
+                if (isRejected) {
+                    zone.classList.add(...rejectClasses);
+                }
 
-                if (!dragStyle) return;
+                const style = isRejected ? [dragStyle, rejectStyle].filter(s => s).join(';') : dragStyle;
+                if (!style) return;
                 const original = zone.getAttribute('style');
                 originalStyles.set(zone, original);
-                zone.setAttribute('style', [original, dragStyle].filter(s => s).join(';'));
+                zone.setAttribute('style', [original, style].filter(s => s).join(';'));
             }
 
             function applyDragStyling() {
@@ -201,8 +243,9 @@ namespace BitBlazorUI {
             function clearDragStyling() {
                 zones.forEach(zone => {
                     zone.classList.remove(...dragClasses);
+                    zone.classList.remove(...rejectClasses);
 
-                    if (!dragStyle) return;
+                    if (!originalStyles.has(zone)) return;
                     const original = originalStyles.get(zone);
                     if (original) {
                         zone.setAttribute('style', original);
@@ -215,13 +258,15 @@ namespace BitBlazorUI {
                 zones = [];
             }
 
-            function addDragState() {
+            function addDragState(e: DragEvent) {
                 dragCounter++;
                 if (dragCounter > 1) {
                     syncDragStyling();
                     return;
                 }
 
+                isRejected = judgeDrag(e);
+
                 applyDragStyling();
             }
 
@@ -240,7 +285,7 @@ namespace BitBlazorUI {
                 e.preventDefault();
                 if (!canAcceptDrop(e)) return;
 
-                addDragState();
+                addDragState(e);
             }
 
             function onDragOver(e: DragEvent) {
@@ -374,11 +419,19 @@ namespace BitBlazorUI {
                     newExpandDirectories: boolean,
                     newDragClass: string,
                     newDragStyle: string | null,
-                    newDropZoneSelector: string | null) => {
+                    newDropZoneSelector: string | null,
+                    newRejectClass: string = '',
+                    newRejectStyle: string | null = null,
+                    newAcceptedMimeTypes: string[] | null = null,
+                    newRemainingSlots: number = -1) => {
 
                     allowDrop = newAllowDrop;
                     allowPaste = newAllowPaste;
                     expandDirectories = newExpandDirectories;
+                    // what a drag is judged against only applies to the next one; the one in flight keeps
+                    // the verdict it entered with.
+                    acceptedMimeTypes = newAcceptedMimeTypes;
+                    remainingSlots = newRemainingSlots;
 
                     if (newDropZoneSelector !== dropZoneSelector) {
                         // the zones of the old selector are already wearing the drag state, and only they
@@ -395,7 +448,8 @@ namespace BitBlazorUI {
                         }
                     }
 
-                    if (newDragClass !== dragClass || newDragStyle !== dragStyle) {
+                    if (newDragClass !== dragClass || newDragStyle !== dragStyle ||
+                        newRejectClass !== rejectClass || newRejectStyle !== rejectStyle) {
                         // an ongoing drag is already showing the old class and style, which have to come off
                         // before they get replaced, otherwise nothing would ever take them off again.
                         const isDragging = dragCounter > 0;
@@ -406,6 +460,9 @@ namespace BitBlazorUI {
                         dragClass = newDragClass;
                         dragClasses = dragClass.split(' ').filter(c => c.length > 0);
                         dragStyle = newDragStyle;
+                        rejectClass = newRejectClass;
+                        rejectClasses = rejectClass.split(' ').filter(c => c.length > 0);
+                        rejectStyle = newRejectStyle;
 
                         if (isDragging) {
                             applyDragStyling();
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
index abcaf69f351..55b3ad1da0c 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadClassStyles.cs
@@ -12,11 +12,23 @@ public class BitFileUploadClassStyles
     /// </summary>
     public string? Dragging { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles added on top of <see cref="Dragging"/> while the files dragged over the
+    /// BitFileUpload are known to be turned away - a MIME type the AllowedExtensions rule does not accept,
+    /// or more files than the MaxCount leaves room for.
+    /// </summary>
+    public string? DraggingRejected { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the browse button (label) of the BitFileUpload.
     /// </summary>
     public string? Label { get; set; }
 
+    /// <summary>
+    /// Custom CSS classes/styles for the icon of the browse button of the BitFileUpload.
+    /// </summary>
+    public string? LabelIcon { get; set; }
+
     /// <summary>
     /// Custom CSS classes/styles for the description (hint) of the BitFileUpload.
     /// </summary>
@@ -125,4 +137,14 @@ public class BitFileUploadClassStyles
     /// while that file is being removed from the server.
     /// </summary>
     public string? RemoveSpinner { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for the container of the batch action buttons of the BitFileUpload.
+    /// </summary>
+    public string? BatchActions { get; set; }
+
+    /// <summary>
+    /// Custom CSS classes/styles for each batch action button ("Upload all", "Cancel all", "Clear") of the BitFileUpload.
+    /// </summary>
+    public string? BatchActionButton { get; set; }
 }
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs
index 1a72eff6b7e..4e1bc25b7bd 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadJsRuntimeExtensions.cs
@@ -62,11 +62,16 @@ internal static ValueTask<IJSObjectReference> BitFileUploadSetupDragDrop(this IJ
                                                                                   bool allowDrop,
                                                                                   bool allowPaste,
                                                                                   bool expandDirectories,
-                                                                                  string? dropZoneSelector)
+                                                                                  string? dropZoneSelector,
+                                                                                  string rejectClass,
+                                                                                  string? rejectStyle,
+                                                                                  string[]? acceptedMimeTypes,
+                                                                                  int remainingSlots)
     {
         return jsRuntime.Invoke<IJSObjectReference>("BitBlazorUI.FileUpload.setupDragDrop",
                                                     dragDropZoneElement, inputFileElement, dragClass, dragStyle,
-                                                    allowDrop, allowPaste, expandDirectories, dropZoneSelector);
+                                                    allowDrop, allowPaste, expandDirectories, dropZoneSelector,
+                                                    rejectClass, rejectStyle, acceptedMimeTypes, remainingSlots);
     }
 
     internal static ValueTask BitFileUploadBrowse(this IJSRuntime jsRuntime, ElementReference inputFileElement)
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
index f5fc352999e..4a8d738fdb0 100644
--- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
+++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/FileUpload/BitFileUploadParams.cs
@@ -117,6 +117,11 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public string? CancelButtonTitle { get; set; }
 
+    /// <summary>
+    /// The text of the "Cancel all" button of the batch actions (see <see cref="ShowBatchActions"/>).
+    /// </summary>
+    public string? CancelAllText { get; set; }
+
     /// <summary>
     /// Gets or sets the icon to use for the cancel upload button using custom CSS classes for external icon libraries.
     /// Takes precedence over <see cref="CancelIconName"/> when both are set.
@@ -169,6 +174,11 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public BitFileUploadClassStyles? Classes { get; set; }
 
+    /// <summary>
+    /// The text of the "Clear" button of the batch actions (see <see cref="ShowBatchActions"/>).
+    /// </summary>
+    public string? ClearText { get; set; }
+
     /// <summary>
     /// The general color of the file upload, applied to the browse button, the drag-and-drop indicator,
     /// the progress bars and the hovered action buttons.
@@ -260,6 +270,23 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public string? Label { get; set; }
 
+    /// <summary>
+    /// The icon of the browse button using custom CSS classes for external icon libraries.
+    /// Takes precedence over <see cref="LabelIconName"/> when both are set.
+    /// </summary>
+    public BitIconInfo? LabelIcon { get; set; }
+
+    /// <summary>
+    /// The name of the icon of the browse button from the built-in Fluent UI icons.
+    /// Defaults to <c>CloudUpload</c> in the <see cref="ShowDropArea"/> mode, and to no icon otherwise.
+    /// </summary>
+    public string? LabelIconName { get; set; }
+
+    /// <summary>
+    /// The position of the icon of the browse button relative to its text: before it (the default) or after it.
+    /// </summary>
+    public BitIconPosition? LabelIconPosition { get; set; }
+
     /// <summary>
     /// Maximum allowed number of files in the file list (0 for unlimited).
     /// Files selected beyond this count are rejected at selection time and will not be uploaded.
@@ -468,6 +495,16 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public Func<BitFileInfo, int, bool>? ShouldAutoRetry { get; set; }
 
+    /// <summary>
+    /// Whether an action bar with "Upload all", "Cancel all" and "Clear" buttons is rendered under the file list.
+    /// </summary>
+    public bool? ShowBatchActions { get; set; }
+
+    /// <summary>
+    /// Whether the browse button is rendered as a large drop area instead of a regular button.
+    /// </summary>
+    public bool? ShowDropArea { get; set; }
+
     /// <summary>
     /// Whether a thumbnail of every selected image is shown at the head of its file item, produced
     /// entirely in the browser from an object URL that is handed back as soon as the file is removed or
@@ -498,6 +535,11 @@ public class BitFileUploadParams : BitComponentBaseParams, IBitComponentParams
     /// </summary>
     public string? SuccessfulUploadMessage { get; set; }
 
+    /// <summary>
+    /// The text of the "Upload all" button of the batch actions (see <see cref="ShowBatchActions"/>).
+    /// </summary>
+    public string? UploadAllText { get; set; }
+
     /// <summary>
     /// The tooltip of the upload button, which is also used as the prefix of its accessible label
     /// (e.g., "Upload report.pdf"). Defaults to "Upload".
@@ -693,6 +735,11 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.CancelButtonTitle = CancelButtonTitle;
         }
 
+        if (CancelAllText.HasValue() && bitFileUpload.HasNotBeenSet(nameof(CancelAllText)))
+        {
+            bitFileUpload.CancelAllText = CancelAllText!;
+        }
+
         if (CancelIcon is not null && bitFileUpload.HasNotBeenSet(nameof(CancelIcon)))
         {
             bitFileUpload.CancelIcon = CancelIcon;
@@ -732,6 +779,11 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.ClassBuilder.Reset();
         }
 
+        if (ClearText.HasValue() && bitFileUpload.HasNotBeenSet(nameof(ClearText)))
+        {
+            bitFileUpload.ClearText = ClearText!;
+        }
+
         if (Color.HasValue && bitFileUpload.HasNotBeenSet(nameof(Color)))
         {
             bitFileUpload.Color = Color.Value;
@@ -804,6 +856,23 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.Label = Label!;
         }
 
+        if (LabelIcon is not null && bitFileUpload.HasNotBeenSet(nameof(LabelIcon)))
+        {
+            bitFileUpload.LabelIcon = LabelIcon;
+        }
+
+        if (LabelIconName.HasValue() && bitFileUpload.HasNotBeenSet(nameof(LabelIconName)))
+        {
+            bitFileUpload.LabelIconName = LabelIconName;
+        }
+
+        if (LabelIconPosition.HasValue && bitFileUpload.HasNotBeenSet(nameof(LabelIconPosition)))
+        {
+            bitFileUpload.LabelIconPosition = LabelIconPosition.Value;
+
+            bitFileUpload.ClassBuilder.Reset();
+        }
+
         if (MaxCount.HasValue && bitFileUpload.HasNotBeenSet(nameof(MaxCount)))
         {
             bitFileUpload.MaxCount = MaxCount.Value;
@@ -949,6 +1018,18 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.ShouldAutoRetry = ShouldAutoRetry;
         }
 
+        if (ShowBatchActions.HasValue && bitFileUpload.HasNotBeenSet(nameof(ShowBatchActions)))
+        {
+            bitFileUpload.ShowBatchActions = ShowBatchActions.Value;
+        }
+
+        if (ShowDropArea.HasValue && bitFileUpload.HasNotBeenSet(nameof(ShowDropArea)))
+        {
+            bitFileUpload.ShowDropArea = ShowDropArea.Value;
+
+            bitFileUpload.ClassBuilder.Reset();
+        }
+
         if (ShowPreview.HasValue && bitFileUpload.HasNotBeenSet(nameof(ShowPreview)))
         {
             bitFileUpload.ShowPreview = ShowPreview.Value;
@@ -978,6 +1059,11 @@ public void UpdateParameters(BitFileUpload bitFileUpload)
             bitFileUpload.SuccessfulUploadMessage = SuccessfulUploadMessage!;
         }
 
+        if (UploadAllText.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadAllText)))
+        {
+            bitFileUpload.UploadAllText = UploadAllText!;
+        }
+
         if (UploadButtonTitle.HasValue() && bitFileUpload.HasNotBeenSet(nameof(UploadButtonTitle)))
         {
             bitFileUpload.UploadButtonTitle = UploadButtonTitle;
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index 93b6652ba21..d83f0f9b07c 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -6,7 +6,7 @@
             Description="An upload component that sends files to a server endpoint over HTTP, with browse, drag-and-drop, paste, folder and camera selection, chunked transfers, progress, retries and validation." />
 
 <DemoPage Name="FileUpload"
-          Description="BitFileUpload is the transport half of working with files: it takes the files the user hands over and uploads them to a server endpoint over HTTP. Files arrive through the file dialog, a drag out of the OS onto the component or onto a drop zone of your own, a clipboard paste, a whole folder or the camera on a phone, and go out automatically on selection or on demand, as a single request per file or in chunks. Every file reports its own progress and can be paused, resumed, canceled, retried and removed from the server again, and selections are validated on arrival against size, count, extension, MIME type, duplicate, image dimension and custom rules. The upload and remove requests are customizable down to a per-request async provider, which is what makes an expiring token or a presigned URL work over a long transfer, and the whole control is themable, templatable and announced to screen readers. For plain file selection without any uploading, reach for the BitFileInput component instead."
+          Description="BitFileUpload sends the files a user picks, drops or pastes to a server endpoint over HTTP - whole or in resumable chunks - with per-file progress, pause, cancel, retry and server-side removal, validation on arrival, and a fully themable, templatable and screen-reader friendly UI. For file selection without uploading, use BitFileInput."
           Parameters="componentParameters"
           SubClasses="componentSubClasses"
           SubEnums="componentSubEnums"
@@ -16,25 +16,47 @@
           GitHubDemoUrl="Inputs/FileUpload/BitFileUploadDemo.razor">
     <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
         <div>
-            Files arrive three ways out of the box: the browse button opens the file dialog, a file dragged out of
-            the OS can be dropped anywhere on the component, and a file on the clipboard can be pasted while the
-            focus is inside it. Each selected file becomes an item with its name, its size and an upload button that
-            sends it to the <b>UploadUrl</b>; while files hover over the component the browse button turns into a
-            dashed drop indicator. During the upload the item shows a progress bar with pause and cancel buttons,
-            and once it settles, a status message reports the outcome.
+            Browse, drop a file on the component, or paste one while it has the focus. Each file gets an item with
+            an upload button that sends it to the <b>UploadUrl</b>, then a progress bar with pause and cancel, and
+            finally a status message.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" />
     </DemoExample>
 
-    <DemoExample Title="Drop zone" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode"
-                 CodeFiles="@example2CodeFiles" Id="example2">
+    <DemoExample Title="Label & description" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
         <div>
-            The two alternative routes switch off independently. <b>AllowDrop</b> controls dropping files out of the
-            OS: turning it off shows a "no drop" cursor and still swallows the event, so the browser does not
-            navigate away to the dropped file and lose the page state. <b>AllowPaste</b> controls pasting from the
-            clipboard, which is only delivered while the focus is inside the component - so the browse button has to
-            be focused first. Both take effect immediately when toggled at runtime.
+            <b>LabelIconName</b> (or <b>LabelIcon</b> for an external library) adds an icon to the browse button,
+            placed by <b>LabelIconPosition</b>. <b>Description</b> - or <b>DescriptionTemplate</b> for markup - puts
+            a hint under the button and wires it through aria-describedby, the place to state the limits up front.
+        </div>
+        <br />
+        <BitFileUpload Label="Upload a document" UploadUrl="@UploadUrl" LabelIconName="Upload"
+                       Accept=".pdf,.docx" MaxSize="1024 * 1024 * 5"
+                       Description="PDF or DOCX, up to 5 MB." />
+        <br />
+        <BitFileUpload Label="Browse for an image" UploadUrl="@UploadUrl" LabelIconName="ChevronRight"
+                       LabelIconPosition="BitIconPosition.End" Accept="image/*" MaxSize="1024 * 1024 * 2">
+            <DescriptionTemplate>
+                <i class="bit-icon bit-icon--Info" />
+                <span>Images only. Up to <b>2 MB</b>.</span>
+            </DescriptionTemplate>
+        </BitFileUpload>
+    </DemoExample>
+
+    <DemoExample Title="Drop area & drop zones" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode"
+                 CodeFiles="@example3CodeFiles" Id="example3">
+        <div>
+            <b>ShowDropArea</b> turns the browse button into a large dashed panel - still a single button, so it is
+            reached with Tab and opened with Enter or Space.
+        </div>
+        <br />
+        <BitFileUpload Label="Drag and drop files here, or click to browse" UploadUrl="@UploadUrl" ShowDropArea Multiple
+                       Description="Any file type, up to 10 MB each." MaxSize="1024 * 1024 * 10" />
+        <br /><br />
+        <div>
+            <b>AllowDrop</b> and <b>AllowPaste</b> switch the two extra routes off at runtime. A refused drop is still
+            swallowed, so the browser never navigates away to the file.
         </div>
         <br />
         <BitCheckbox @bind-Value="allowDrop" Label="AllowDrop" />
@@ -42,17 +64,10 @@
         <BitCheckbox @bind-Value="allowPaste" Label="AllowPaste" />
         <br />
         <BitFileUpload Label="Select, drop or paste files" UploadUrl="@UploadUrl" AllowDrop="allowDrop" AllowPaste="allowPaste" />
-
-        <br /><br /><br />
-
+        <br /><br />
         <div>
-            The component itself is always a drop zone, and <b>DropZoneSelector</b> nominates more of them: any
-            element matching the selector takes a drop as well, so a whole form, a card or the page becomes the
-            target while the browse button stays where it is. The element is matched when the drag reaches it, so
-            one rendered later works with nothing to re-wire, and while a drag is in flight every zone - this
-            component included - carries <b>Classes.Dragging</b> and <b>Styles.Dragging</b>, which is the hook the
-            card below highlights itself with. Having the focus inside a zone also lets a paste land in the
-            component.
+            <b>DropZoneSelector</b> makes any matching element a drop target too. While a drag is in flight every zone
+            carries <b>Classes.Dragging</b> / <b>Styles.Dragging</b>, which is what highlights the card below.
         </div>
         <br />
         <div id="fileupload-drop-zone" class="drop-zone">
@@ -63,36 +78,11 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Description" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
-        <div>
-            <b>Description</b> renders a hint under the browse button and wires it to that button through
-            aria-describedby, so a screen reader reads the constraints out with the button instead of leaving them
-            to be discovered by trial and error. Spell out there what <b>Accept</b>, <b>AllowedExtensions</b> and
-            <b>MaxSize</b> actually enforce. <b>DescriptionTemplate</b> takes over when the hint needs markup of its
-            own, and <b>Classes.Description</b> / <b>Styles.Description</b> restyle it.
-        </div>
-        <br />
-        <BitFileUpload Label="Browse for a document" UploadUrl="@UploadUrl" Accept=".pdf,.docx" MaxSize="1024 * 1024 * 5"
-                       Description="PDF or DOCX, up to 5 MB." />
-        <br />
-        <BitFileUpload Label="Browse for an image" UploadUrl="@UploadUrl" Accept="image/*" MaxSize="1024 * 1024 * 2">
-            <DescriptionTemplate>
-                <i class="bit-icon bit-icon--Info" />
-                <span>Images only. Up to <b>2 MB</b>.</span>
-            </DescriptionTemplate>
-        </BitFileUpload>
-    </DemoExample>
-
     <DemoExample Title="Removable" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
         <div>
-            <b>ShowRemoveButton</b> puts a remove button on each settled file item. A file whose bytes never reached
-            the server is simply dropped from the view, while one that has (partially or fully) uploaded is deleted
-            from the server through a DELETE request to the <b>RemoveUrl</b>, carrying the file name as a query
-            string and the file id in the <b>BIT_FILE_ID</b> header; a non-success response marks the file with the
-            <b>FailedRemoveMessage</b> instead of pretending it is gone. <b>RemoveButtonTitle</b> localizes the
-            tooltip and the accessible label. Removing with the keyboard keeps the focus where the list is - on the
-            item that takes the removed one's place, or on the browse button once the list empties - instead of
-            dropping it on the document body with the button that was pressed.
+            <b>ShowRemoveButton</b> adds a remove button to each settled item. A file that never reached the server is
+            just dropped; an uploaded one is deleted through a DELETE to the <b>RemoveUrl</b> (name in the query
+            string, id in the <b>BIT_FILE_ID</b> header). The focus moves to the next item instead of being lost.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
@@ -101,21 +91,9 @@
 
     <DemoExample Title="Selection behavior" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <div>
-            Five parameters decide what a selection does to the list. <b>Multiple</b> lets the dialog, a drop or a
-            paste carry several files at once, each uploading independently. <b>AutoUpload</b> starts sending them
-            the moment they arrive, skipping the per-file upload button - the pattern for an avatar picker or an
-            attachment area, where selecting already expresses the intent to upload. <b>Append</b> adds a new
-            selection to the end of the list instead of replacing it, keeping the upload state of what is already
-            there, so a batch can be built up over several rounds. <b>AutoReset</b> does the opposite for browsing:
-            it empties the list just before the dialog opens, even if the dialog is then cancelled.
-        </div>
-        <br />
-        <div>
-            Building a batch up makes it easy to pick the same file twice, so turning <b>AllowDuplicates</b> off
-            rejects a file matching one already in the list - by name, size and last modified time, as close to an
-            identity as the browser exposes - with the <b>DuplicateErrorMessage</b> under it. The rejection is not
-            final: remove the original and the copy becomes eligible again, since the rule is re-evaluated over the
-            whole list on every change.
+            <b>Multiple</b> takes several files at once, <b>AutoUpload</b> sends them as soon as they arrive,
+            <b>Append</b> adds a new selection to the list instead of replacing it, and <b>AutoReset</b> empties the
+            list before each browse. With <b>AllowDuplicates</b> off, re-picking a file already in the list is rejected.
         </div>
         <br />
         <div>Multiple, auto-uploaded:</div>
@@ -134,95 +112,46 @@
 
     <DemoExample Title="Validation" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <div>
-            Every rule runs at selection time, whichever way the file arrived. A file that fails one is marked as
-            not allowed with its message under it and is never sent - and it stays visible, so the user sees exactly
-            what was rejected and why instead of it disappearing silently.
+            Rules run when a file arrives, however it arrives; a rejected file stays in the list with its reason and is
+            never sent. <b>MaxSize</b> / <b>MinSize</b> bound each file, <b>MaxTotalSize</b> and <b>MaxCount</b> the
+            whole list (re-checked after every removal), and <b>FileValidator</b> adds a rule of your own. Each has
+            its own <b>...ErrorMessage</b>.
         </div>
         <br />
-        <div>
-            <b>MaxSize</b> and <b>MinSize</b> bound each file in bytes; <b>MaxTotalSize</b> bounds what the list adds
-            up to, which is the limit that matches a per-request or per-user quota; <b>MaxCount</b> caps how many
-            files the list holds. Only files that pass the other rules consume the total-size budget or a count slot,
-            so a file rejected for its type never pushes a good file over the cap. All three list-level rules are
-            re-evaluated on every change, so removing a file takes the next one waiting behind it back in.
-            <b>MaxSizeErrorMessage</b> and its siblings carry the wording.
-        </div>
-        <br />
-        <div>
-            <b>FileValidator</b> runs last, for anything the built-in rules cannot express. Returning a message
-            rejects the file, returning null accepts it, and a validator that throws invalidates only its own file,
-            using the exception message as the text.
-        </div>
-        <br />
-        <div>Max 1 MB per file, with a custom message:</div>
-        <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MaxSize="1024 * 1024 * 1"
                        MaxSizeErrorMessage="The file is too big! Please select a file smaller than 1 MB."
                        Description="Up to 1 MB per file." />
-        <br /><br />
-        <div>Min 1 KB per file:</div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" MinSize="1024" />
-        <br /><br />
-        <div>At most 3 files and 2 MB across the batch:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple Append
                        MaxCount="3" MaxTotalSize="1024 * 1024 * 2" ShowRemoveButton RemoveUrl="@RemoveUrl"
                        Description="Up to 3 files, 2 MB in total." />
-        <br /><br />
-        <div>A custom rule - empty (zero-byte) files are turned away:</div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple FileValidator="@ValidateEmptyFile" />
-    </DemoExample>
-
-    <DemoExample Title="Accept & AllowedExtensions" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
-        <div>
-            The two work at different moments. <b>Accept</b> goes straight to the accept attribute of the underlying
-            input, which only hints the <i>file dialog</i> to pre-filter what it offers - a drop, a paste or a "show
-            all files" switch walks right past it. <b>AllowedExtensions</b> is the actual rule: it checks every file
-            however it arrived and marks the mismatches as not allowed with the
-            <b>NotAllowedExtensionErrorMessage</b>.
-        </div>
         <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple FileValidator="@ValidateEmptyFile"
+                       Description="Empty (zero-byte) files are turned away." />
+        <br /><br />
         <div>
-            Its entries are matched leniently - an extension with or without its leading dot, in any casing - and an
-            entry containing a slash is treated as a MIME type, with a trailing wildcard like <b>image/*</b> covering
-            a whole group. It also generates the accept attribute when <b>Accept</b> is not set, which is why setting
-            it alone is usually all you need; set <b>Accept</b> explicitly only when the dialog filter should differ
-            from the rule.
+            <b>AllowedExtensions</b> is the type rule - extensions with or without the dot, or MIME types like
+            <b>image/*</b> - and also fills the dialog filter. <b>Accept</b> alone only filters the dialog; a drop
+            walks past it. When the rule is MIME-only, or a drag holds more files than <b>MaxCount</b> leaves room for,
+            the drop indicator turns red before the drop (<b>Classes.DraggingRejected</b> restyles it).
         </div>
         <br />
-        <div>Accept only (the dialog filters, but a dropped file of any type is still taken and uploaded):</div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Accept=".png,.jpg" />
-        <br /><br />
-        <div>AllowedExtensions (the rule, which also generates the accept attribute):</div>
+        <BitFileUpload Label="Drop images or PDFs here" UploadUrl="@UploadUrl" ShowDropArea Multiple MaxCount="3"
+                       AllowedExtensions="@(["image/*", "application/pdf"])"
+                       Description="Up to 3 images or PDFs - drag anything else over to see it refused." />
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
-                       AllowedExtensions="@(new List<string> { ".gif",".jpg",".mp4" })" />
-        <br /><br />
-        <div>MIME types (every image plus PDFs):</div>
+                       AllowedExtensions="@([".gif", ".jpg", ".mp4"])" Description="GIF, JPG or MP4." />
         <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
-                       AllowedExtensions="@(new List<string> { "image/*", "application/pdf" })" />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Accept=".png,.jpg"
+                       Description="Accept only: the dialog filters, a dropped file of any type is still taken." />
     </DemoExample>
 
-    <DemoExample Title="Directory & Capture" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <DemoExample Title="Directory & Capture" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <div>
-            <b>Directory</b> turns the picker into a folder picker, and every file inside the chosen folder - and
-            inside its subfolders, at any depth - lands in the list as a separate upload. It does the same for a drop,
-            walking a dropped folder into its contents rather than ignoring it, which a plain file input cannot do.
-            The browser warns before handing a whole folder over, and the usual validations still apply to every file
-            that comes out of it, so pairing it with <b>AllowedExtensions</b>, <b>MaxCount</b> or <b>MaxTotalSize</b>
-            is what keeps a stray folder from turning into a thousand uploads.
-        </div>
-        <br />
-        <div>
-            <b>Capture</b> asks a phone or tablet to open the camera or the microphone instead of the file browser:
-            <b>"user"</b> for the front (selfie) camera and <b>"environment"</b> for the rear one. Which one is
-            honored is up to the device, and a desktop browser ignores it and opens the usual dialog. Combine it with
-            <b>Accept</b> to say what kind of capture is wanted and with <b>AutoUpload</b> so the shot goes out the
-            moment it is taken.
+            <b>Directory</b> picks - or accepts a drop of - a whole folder, subfolders included, with every file still
+            validated. <b>Capture</b> opens the camera on a mobile device: <b>"user"</b> for the front one,
+            <b>"environment"</b> for the rear one.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop a folder" UploadUrl="@UploadUrl" Directory Multiple
@@ -235,71 +164,28 @@
                        Description="Opens the front camera on a mobile device." />
     </DemoExample>
 
-    <DemoExample Title="Preview & image dimensions" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <DemoExample Title="Preview & image dimensions" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
         <div>
-            <b>ShowPreview</b> puts a thumbnail of every selected image at the head of its item, so the user can
-            confirm they picked the right picture before a byte goes out. It is produced in the browser from an
-            object URL - nothing is uploaded to render it - and the URL is handed back as soon as the file is removed
-            or the component is reset, which is what keeps a long-lived page from holding every picture ever picked.
-            <b>BitFileInfo.PreviewUrl</b> exposes the same URL to a custom <b>FileViewTemplate</b>. Only an image has
-            a thumbnail of its own, so every other kind of file takes a glyph of its type - read off the content type,
-            falling back to the extension - in a box of exactly the same size, which is what keeps the names of a
-            mixed list lined up along one edge.
+            <b>ShowPreview</b> shows a thumbnail of each image, made in the browser and released on removal, and a
+            type glyph for anything else. <b>ReadImageDimensions</b> fills <b>Width</b> / <b>Height</b> before
+            validation, so a <b>FileValidator</b> can reject an image by its pixels.
         </div>
         <br />
-        <div>A mixed selection - pick an image, a PDF and an archive to compare:</div>
-        <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple ShowPreview
                        ShowRemoveButton RemoveUrl="@RemoveUrl" />
         <br />
-        <div>
-            A limit in bytes is a poor way to say "nothing bigger than 4K": what matters for an image is its pixels.
-            <b>ReadImageDimensions</b> decodes every selected image in the browser and fills the <b>Width</b> and
-            <b>Height</b> of its <b>BitFileInfo</b> before the validations run, so a <b>FileValidator</b> can turn an
-            image away for its dimensions without a single byte leaving the machine. Decoding is not free, which is
-            why it is off by default and runs a few images at a time. Non-image files, and images the browser cannot
-            decode, keep both values null - a validator has to read that as "unknown" rather than as a failure.
-        </div>
-        <br />
-        <div>Preview with a dimension rule (between 200x200 and 4000x4000):</div>
-        <br />
         <BitFileUpload Label="Select or drag and drop images" UploadUrl="@UploadUrl" Multiple ShowPreview
                        Accept="image/*" ReadImageDimensions FileValidator="@ValidateImageDimensions"
                        ShowRemoveButton RemoveUrl="@RemoveUrl"
                        Description="Images between 200x200 and 4000x4000 pixels." />
-        <br /><br />
-        <div>
-            Rendering the dimensions in a custom item, with the <BitLink Href="#example17">FileViewTemplate</BitLink>
-            covered further down:
-        </div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop images" UploadUrl="@UploadUrl" Multiple
-                       Accept="image/*" ReadImageDimensions>
-            <FileViewTemplate Context="file">
-                <div class="dimensions-item">
-                    <span>@file.Name</span>
-                    <span>@(file.Width is null ? "unknown size" : $"{file.Width} x {file.Height}")</span>
-                </div>
-            </FileViewTemplate>
-        </BitFileUpload>
     </DemoExample>
 
-    <DemoExample Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <DemoExample Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <div>
-            Every stage surfaces through a callback: <b>OnChange</b> whenever a file's status changes, <b>OnInvalid</b>
-            right after it whenever a selection carries rejected files - handy for a summary or for blocking a submit
-            button - <b>OnUploading</b> right before a file's first request (the natural place to attach per-file HTTP
-            headers), <b>OnProgress</b> on every progress tick, <b>OnUploadComplete</b> / <b>OnUploadFailed</b> when a
-            file settles, <b>OnRemoveComplete</b> / <b>OnRemoveFailed</b> for removals, and <b>OnAllUploadsComplete</b>
-            once the whole batch has reached a terminal state. Try a file over 1 MB to see <b>OnInvalid</b> at work.
-        </div>
-        <br />
-        <div>
-            Each callback receives the <b>BitFileInfo</b> of the file, which carries what the server said about it:
-            <b>ResponseStatus</b> is the HTTP status code of its last upload or removal response - 0 when the request
-            never reached the server at all - and <b>Message</b> is the response body. That is what tells an expired
-            token (401) from a payload the server refused (413) from a network that dropped, so a failure can be
-            answered instead of only reported.
+            <b>OnChange</b>, <b>OnInvalid</b>, <b>OnUploading</b> (set per-file headers here), <b>OnProgress</b>,
+            <b>OnUploadComplete</b> / <b>OnUploadFailed</b>, <b>OnRemoveComplete</b> / <b>OnRemoveFailed</b> and
+            <b>OnAllUploadsComplete</b>. Each file carries the server's <b>ResponseStatus</b> (0 when unreachable) and
+            <b>Message</b>. Try a file over 1 MB.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple MaxSize="1024 * 1024 * 1"
@@ -313,24 +199,12 @@
         <div>@onUploadFailedText</div>
     </DemoExample>
 
-    <DemoExample Title="Chunked" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
-        <div>
-            <b>ChunkedUpload</b> slices each file and sends it as a series of sequential requests instead of one
-            monolithic one, which is what makes pausing, resuming and recovering large uploads practical: a paused or
-            failed file resumes from the last successfully uploaded chunk, so a dropped connection costs one chunk
-            instead of the whole transfer. <b>ChunkSize</b> pins the size of each slice in bytes, while
-            <b>AutoChunkSize</b> adapts it to the observed connection speed between 512 KB and 10 MB - large enough
-            on a fast link to keep the request overhead negligible, small enough on a slow one to keep the progress
-            moving and a retry cheap.
-        </div>
-        <br />
+    <DemoExample Title="Chunked" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
         <div>
-            Every chunk request carries what the server needs to reassemble the file: the <b>BIT_FILE_ID</b> header
-            correlating the chunks of one file, and the byte range both as the standard <b>Content-Range</b> header
-            (<b>bytes from-to/total</b>) and as the plain <b>BIT_CHUNK_FROM</b>, <b>BIT_CHUNK_TO</b> and
-            <b>BIT_FILE_SIZE</b> headers for handlers that would rather not parse it. Writing each chunk at its own
-            offset rather than blindly appending is what makes the server correct in the face of a retried chunk.
-            CORS treats these as custom request headers, so a cross-origin endpoint has to allow them.
+            <b>ChunkedUpload</b> sends each file as a series of requests, so a pause or a failure resumes from the last
+            chunk. <b>ChunkSize</b> fixes the slice; <b>AutoChunkSize</b> adapts it to the connection (512 KB - 10 MB).
+            Each chunk carries <b>BIT_FILE_ID</b>, <b>Content-Range</b> and <b>BIT_CHUNK_FROM</b> /
+            <b>BIT_CHUNK_TO</b> / <b>BIT_FILE_SIZE</b> for the server to reassemble it.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload />
@@ -340,13 +214,10 @@
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload AutoChunkSize />
     </DemoExample>
 
-    <DemoExample Title="Http requests" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
+    <DemoExample Title="Http requests" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
         <div>
-            Static <b>UploadRequestHttpHeaders</b> / <b>RemoveRequestHttpHeaders</b> and
-            <b>UploadRequestQueryStrings</b> / <b>RemoveRequestQueryStrings</b> attach headers and query strings to
-            the respective requests, and <b>UploadRequestFormFields</b> adds extra multipart fields next to the file
-            content itself - a target folder, an album id, a caption - for the endpoints that read their metadata
-            from the form rather than from the URL.
+            Headers, query strings and extra form fields for the upload and remove requests are fixed at selection
+            time.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl" ShowRemoveButton
@@ -357,12 +228,8 @@
                        RemoveRequestHttpHeaders="@(new Dictionary<string, string>{ {"header2", "value2" } })" />
         <br /><br />
         <div>
-            Each has an async <b>...Provider</b> counterpart, and the difference is not only that it is a function:
-            a provider is invoked before <i>every single request</i> - each file, and each chunk of a chunked file -
-            while the static values are fixed once, when the files are selected. That is what makes a provider the
-            right place for anything that expires: an access token that has to be fresh when the request goes out, or
-            a presigned URL good for one upload only, which <b>UploadUrlProvider</b> mints for the endpoint itself. A
-            value that never changes belongs in the static parameter, since a provider costs an await per request.
+            Their async <b>...Provider</b> counterparts run before <i>every</i> request - each file and each chunk -
+            which is what keeps an expiring token or a presigned URL (<b>UploadUrlProvider</b>) fresh.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" Multiple ChunkedUpload
@@ -372,12 +239,8 @@
         <div>Requests so far: @tokenRequestCount</div>
         <br /><br />
         <div>
-            The transport is configurable too: <b>UploadRequestHttpMethod</b> switches the verb ("POST" by default -
-            a PUT is what presigned URL flows usually expect), <b>UploadFormFieldName</b> renames the form field
-            carrying the file content ("file" by default), <b>WithCredentials</b> sends cookies and authorization
-            headers on cross-origin requests, and <b>UploadTimeout</b> fails a request - each file or chunk - that
-            takes longer than the given time. <b>RemoveRequestHttpMethod</b> does the same for the removal, whose
-            "DELETE" some APIs would rather receive as a "POST".
+            The transport itself: <b>UploadRequestHttpMethod</b>, <b>UploadFormFieldName</b>,
+            <b>RemoveRequestHttpMethod</b>, <b>WithCredentials</b> and a per-request <b>UploadTimeout</b>.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
@@ -389,56 +252,21 @@
                        UploadTimeout="TimeSpan.FromMinutes(10)" />
     </DemoExample>
 
-    <DemoExample Title="Retry" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
-        <div>
-            <b>AutoRetries</b> retries a failed upload automatically - up to the given number of times per file,
-            waiting <b>AutoRetryDelay</b> before each attempt - and in the chunked mode every retry resumes from the
-            last uploaded chunk. Pausing or canceling a file while a retry is waiting out its delay wins over that
-            retry, so the outcome the user asked for is the one that stands.
-        </div>
-        <br />
-        <div>
-            The budget is only spent where a second try could go differently: network errors, timeouts, 408, 429 and
-            the 5xx server errors are retried, while the other 4xx - a 404 pointing nowhere, a 413 that is simply too
-            large, a 401 - settle the file immediately rather than repeating an identical doomed request.
-            <b>ShouldAutoRetry</b> replaces that rule with your own, receiving the file and the status code.
-        </div>
-        <br />
+    <DemoExample Title="Retry" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
         <div>
-            Hammering a server that is already struggling with evenly spaced retries is what turns a blip into an
-            outage, so <b>AutoRetryDelayProvider</b> replaces the fixed delay with one worked out per attempt - it
-            receives the file, whose <b>ResponseStatus</b> says what came back, and the number of the attempt about
-            to be made, and the usual answer is an exponential backoff with a little jitter.
+            <b>AutoRetries</b> retries a failed upload, waiting <b>AutoRetryDelay</b> (or an
+            <b>AutoRetryDelayProvider</b> backoff) in between. By default only failures a retry can fix are retried -
+            network errors, timeouts, 408, 429, 5xx; <b>ShouldAutoRetry</b> replaces that rule. After the budget is
+            spent the item offers a retry button (<b>RetryIcon</b>, <b>RetryButtonTitle</b>).
         </div>
         <br />
-        <div>
-            Once the budget is exhausted the file settles as failed and the item offers a retry button - distinct
-            from the upload button of a never-started file in both icon and wording, so a second attempt never reads
-            as a first one. Pressing it tries again with a fresh budget, exactly like calling <b>Upload(file)</b>
-            does. <b>RetryIcon</b>, <b>RetryIconName</b> and <b>RetryButtonTitle</b> restyle and localize it, falling
-            back to their upload counterparts when unset.
-        </div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
-                       AutoRetries="2" AutoRetryDelay="TimeSpan.FromSeconds(1)" />
-        <br /><br />
-        <div>
-            A non-existing endpoint (404): the built-in rule does not retry it, so the file fails at once and offers
-            the manual retry button.
-        </div>
+        <div>A 404 is not retried - the file fails at once:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@NonExistingUploadUrl"
                        AutoRetries="2" AutoRetryDelay="TimeSpan.FromSeconds(1)"
                        RetryButtonTitle="Try again" />
         <br /><br />
-        <div>The same endpoint with a <b>ShouldAutoRetry</b> that insists: watch it retry twice before settling.</div>
-        <br />
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@NonExistingUploadUrl"
-                       AutoRetries="2" AutoRetryDelay="TimeSpan.FromSeconds(1)"
-                       ShouldAutoRetry="@((file, status) => true)"
-                       RetryButtonTitle="Try again" />
-        <br /><br />
-        <div>The same, backing off 1s, 2s then 4s instead of retrying on a fixed beat:</div>
+        <div>A ShouldAutoRetry that insists, backing off 1s, 2s, 4s:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@NonExistingUploadUrl"
                        AutoRetries="3"
@@ -447,62 +275,39 @@
                        RetryButtonTitle="Try again" />
     </DemoExample>
 
-    <DemoExample Title="ConcurrentUploads" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
-        <div>
-            By default every file of a batch goes on the wire at once, which is the fastest option on a healthy
-            connection but not always the kindest: browsers keep only a handful of connections open per host, and a
-            server behind a rate limit would rather not meet fifty simultaneous uploads. <b>ConcurrentUploads</b>
-            caps how many files may be in flight; the rest wait in a queue in selection order and each starts the
-            moment a slot frees up - whether the file holding it completed, failed, was canceled or merely paused.
-            Set it to 0 (the default) to start everything at once.
-        </div>
-        <br />
+    <DemoExample Title="ConcurrentUploads" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
         <div>
-            The cap counts files, not requests: a chunked file holds its slot for the whole run of its chunks rather
-            than going back to the end of the queue between two of them. The queue only governs the start of an
-            upload, so a file started explicitly through <b>Upload(file)</b> waits its turn too.
+            <b>ConcurrentUploads</b> caps how many files are on the wire at once; the rest wait in order, show the
+            <b>QueuedUploadMessage</b> and can be canceled before their turn. 0 (the default) starts them all.
         </div>
         <br />
-        <div>
-            A waiting file says so instead of looking like one nobody asked to upload: its item shows the
-            <b>QueuedUploadMessage</b>, drops the start button and keeps a cancel button so it can be called off
-            before its turn comes. <b>BitFileInfo.IsQueued</b> exposes the same state to a custom
-            <b>FileViewTemplate</b>.
-        </div>
-        <br />
-        <div>Two files at a time:</div>
-        <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple ConcurrentUploads="2" />
         <br /><br />
-        <div>One file at a time (a strictly sequential queue), with a translated waiting message:</div>
-        <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple AutoUpload
                        ConcurrentUploads="1" QueuedUploadMessage="In the queue…" />
     </DemoExample>
 
-    <DemoExample Title="Overall progress, speed & ETA" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <DemoExample Title="Batch actions" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
         <div>
-            Besides the per-file progress, the component aggregates the batch: <b>TotalSize</b> and
-            <b>TotalUploadedSize</b> expose the combined byte counts of the files actually being uploaded - rejected
-            and removed files do not count - and <b>OverallUploadProgress</b> turns them into one percentage,
-            weighting every file by its size.
-        </div>
-        <br />
-        <div>
-            A percentage answers "how far along"; what a user waiting on a large upload wants is "how much longer".
-            Every running file measures the speed of the request in flight and exposes <b>UploadSpeed</b> (bytes per
-            second) and <b>RemainingTime</b> on its <b>BitFileInfo</b>. Both are null while a file is not on the wire
-            - before it starts, once it settles, and for the first fraction of a second, where a reading taken over
-            almost no time would say nothing but a huge number. In the chunked mode the speed is measured over the
-            chunk in flight, so it follows a connection that changes mid-file instead of averaging it away.
+            <b>ShowBatchActions</b> adds <b>Upload all</b>, <b>Cancel all</b> and <b>Clear</b> buttons under the
+            list. They keep their places as uploads settle - an idle one is only marked unavailable - so keyboard
+            focus is never lost. <b>UploadAllText</b>, <b>CancelAllText</b> and
+            <b>ClearText</b> relabel them.
         </div>
         <br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple Append
+                       ShowBatchActions ShowRemoveButton RemoveUrl="@RemoveUrl" />
+        <br /><br />
+        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" Multiple ChunkedUpload
+                       ConcurrentUploads="1" ShowBatchActions
+                       UploadAllText="Send everything" CancelAllText="Stop everything" ClearText="Start over" />
+    </DemoExample>
+
+    <DemoExample Title="Progress & file list" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <div>
-            The batch has the same two numbers: <b>TotalUploadSpeed</b> adds up every file on the wire - what the
-            connection as a whole is carrying - and <b>OverallRemainingTime</b> divides the bytes still to go by it.
-            Both are null while nothing is uploading, which is the difference between "not moving" and "moving at
-            zero". All of them update on every progress tick, so rendering them is a matter of re-reading them from
-            <b>OnProgress</b>.
+            <b>OverallUploadProgress</b>, <b>TotalUploadSpeed</b> and <b>OverallRemainingTime</b> summarize the batch,
+            and each file has its own <b>UploadSpeed</b> and <b>RemainingTime</b> (null while not on the wire). Re-read
+            them from <b>OnProgress</b>.
         </div>
         <br />
         <BitFileUpload @ref="speedFileUpload" Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple
@@ -525,25 +330,14 @@
                 (@(speedFileUpload?.OverallRemainingTime is null ? "-" : $"{speedFileUpload.OverallRemainingTime:mm\\:ss} left"))
             </b>
         </div>
-    </DemoExample>
-
-    <DemoExample Title="File list display" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+        <br /><br />
         <div>
-            <b>FileSizeFormatter</b> takes over the built-in humanizer, which speaks English and counts in binary
-            units: it receives a size in bytes and returns whatever text should appear - a localized unit name, a
-            different rounding, or the decimal base some platforms prefer.
+            <b>FileSizeFormatter</b> replaces the built-in size text, and <b>HideFileView</b> leaves the list
+            undrawn while the files are still uploaded and reported through <b>Files</b>.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Multiple
                        FileSizeFormatter="@(size => $"{size:N0} bytes")" />
-        <br /><br />
-        <div>
-            <b>HideFileView</b> takes the list away without taking the files with it: they are still selected,
-            validated, uploaded and reported through <b>Files</b> and the callbacks - they are simply not drawn. That
-            is what the surrounding page needs when it shows the attachments in its own layout, or when the uploader
-            has to collapse into a single button. Reach for <b>FileViewTemplate</b> instead when the list should stay
-            where it is and only look different.
-        </div>
         <br />
         <BitFileUpload @ref="hiddenViewFileUpload" Label="Select or drag and drop files" UploadUrl="@UploadUrl"
                        Multiple AutoUpload HideFileView
@@ -557,7 +351,6 @@
                     <li>@file.Name - @file.Status</li>
                 }
             </ul>
-            <div>Overall progress: @(hiddenViewFileUpload?.OverallUploadProgress ?? 0)%</div>
         }
         else
         {
@@ -565,22 +358,12 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
-        <div>
-            <b>LabelTemplate</b> replaces the browse button - here with a full drop-zone panel that hides itself once
-            files are selected - and <b>FileViewTemplate</b> replaces each item of the list, receiving the file info
-            as its context with its name, size, progress, speed and status. Replacing the browse button also replaces
-            the dashed drop indicator that lives on it, so a custom label should bring its own drag feedback:
-            <b>Classes.Dragging</b> puts a class on the root element for as long as files hover over the component.
-        </div>
-        <br />
+    <DemoExample Title="Templates" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
         <div>
-            Two things are worth carrying over from the default UI. The controls should be real <b>button</b>
-            elements rather than clickable divs, so they stay reachable with Tab and can be activated with Enter or
-            Space, and each should name the file it acts on through an aria-label - a list of identical "Remove"
-            buttons tells a screen reader user nothing about which file they are on. And since the context is the
-            file itself, call the per-file overloads: <b>Upload(file)</b> and <b>RemoveFile(file)</b> act on that one
-            file, while their no-argument forms sweep through the whole batch.
+            <b>LabelTemplate</b> replaces the browse button - and its drop indicator, so bring your own through
+            <b>Classes.Dragging</b> - and <b>FileViewTemplate</b> replaces each item, with the <b>BitFileInfo</b> as
+            its context. Use real buttons with an aria-label naming the file, and the per-file <b>Upload(file)</b> /
+            <b>RemoveFile(file)</b> overloads.
         </div>
         <br />
         <div>
@@ -589,8 +372,6 @@
                 <LabelTemplate>
                     @if (FileUploadIsEmpty())
                     {
-                        @* a real button rather than a clickable div, so the drop zone is reachable with Tab
-                           and activated with Enter or Space like the built-in browse button it replaces. *@
                         <button type="button" class="browse-file" @onclick="() => bitFileUpload.Browse()">
                             <div class="browse-file-header">
                                 <i class="bit-icon bit-icon--CloudUpload" />
@@ -616,52 +397,47 @@
                     }
                 </LabelTemplate>
                 <FileViewTemplate Context="file">
-                    @if (file.Status != BitFileUploadStatus.Removed)
-                    {
-                        <div class="file-list">
-                            <div class="file-info">
-                                <div class="file-info-ico">
-                                    <i class="bit-icon bit-icon--FileImage" />
-                                </div>
-                                <div class="file-info-data">
-                                    <div class="file-info-title">
-                                        <div class="file-info-name">@file.Name</div>
-                                        @* each action names the file it acts on and applies to that file
-                                           alone, which is what the context of the template is there for. *@
-                                        <div class="file-info-btns">
-                                            <button type="button" aria-label="@($"Upload {file.Name}")" @onclick="() => bitFileUpload.Upload(file)">
-                                                <i class="bit-icon bit-icon--CloudUpload upload-ico" />
-                                            </button>
-                                            <button type="button" aria-label="@($"Remove {file.Name}")" @onclick="() => bitFileUpload.RemoveFile(file)">
-                                                <i class="bit-icon bit-icon--ChromeClose remove-ico" />
-                                            </button>
-                                        </div>
+                    <div class="file-list">
+                        <div class="file-info">
+                            <div class="file-info-ico">
+                                <i class="bit-icon bit-icon--FileImage" />
+                            </div>
+                            <div class="file-info-data">
+                                <div class="file-info-title">
+                                    <div class="file-info-name">@file.Name</div>
+                                    <div class="file-info-btns">
+                                        <button type="button" aria-label="@($"Upload {file.Name}")" @onclick="() => bitFileUpload.Upload(file)">
+                                            <i class="bit-icon bit-icon--CloudUpload upload-ico" />
+                                        </button>
+                                        <button type="button" aria-label="@($"Remove {file.Name}")" @onclick="() => bitFileUpload.RemoveFile(file)">
+                                            <i class="bit-icon bit-icon--ChromeClose remove-ico" />
+                                        </button>
                                     </div>
-                                    @if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
-                                    {
-                                        var fileUploadPercent = GetFileUploadPercent(file);
-                                        <div class="file-info-subtitle">@GetFileUploadSize(file) - @fileUploadPercent%</div>
-                                        <div class="file-info-progressbar-container">
-                                            <div class="file-info-progressbar" role="progressbar" style="width:@fileUploadPercent%;" aria-valuemin="0" aria-valuemax="100" aria-valuenow="@fileUploadPercent"></div>
-                                        </div>
-                                    }
-                                    else
-                                    {
-                                        <div class="@(file.Status == BitFileUploadStatus.Completed ? "file-info-s-msg" : "file-info-e-msg")">@GetUploadMessageStr(file)</div>
-                                    }
                                 </div>
+                                @if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
+                                {
+                                    var fileUploadPercent = GetFileUploadPercent(file);
+                                    <div class="file-info-subtitle">@GetFileUploadSize(file) - @fileUploadPercent%</div>
+                                    <div class="file-info-progressbar-container">
+                                        <div class="file-info-progressbar" role="progressbar" style="width:@fileUploadPercent%;" aria-label="@file.Name" aria-valuemin="0" aria-valuemax="100" aria-valuenow="@fileUploadPercent"></div>
+                                    </div>
+                                }
+                                else
+                                {
+                                    <div class="@(file.Status == BitFileUploadStatus.Completed ? "file-info-s-msg" : "file-info-e-msg")">@GetUploadMessageStr(file)</div>
+                                }
                             </div>
+                        </div>
 
-                            <div class="file-list-footer">
-                                <div>
-                                    Max file size: 2 MB
-                                </div>
-                                <div>
-                                    Supported file types: jpg, jpeg, png, bmp
-                                </div>
+                        <div class="file-list-footer">
+                            <div>
+                                Max file size: 2 MB
+                            </div>
+                            <div>
+                                Supported file types: jpg, jpeg, png, bmp
                             </div>
                         </div>
-                    }
+                    </div>
                 </FileViewTemplate>
             </BitFileUpload>
         </div>
@@ -669,31 +445,12 @@
         <BitButton OnClick="HandleUploadOnClick">Upload</BitButton>
     </DemoExample>
 
-    <DemoExample Title="Public API" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
-        <div>
-            The component can be driven entirely from code: <b>Browse</b> opens the file dialog (here the built-in
-            button is hidden with <b>HideLabel</b> and replaced by external BitButtons), <b>Upload</b> starts the
-            upload, <b>PauseUpload</b> and <b>CancelUpload</b> stop it, <b>RemoveFile</b> removes files and
-            <b>Reset</b> clears the whole state. Each takes a single file or, with no argument, the whole batch.
-            <b>Files</b> exposes the current selection with each file's status and progress, and <b>UploadStatus</b>
-            reports the batch as a whole - pending until the first upload starts, in progress from then on, and
-            completed once every file has reached a terminal state.
-        </div>
-        <br />
-        <div>
-            The difference between the two ways of stopping is what happens next. <b>PauseUpload</b> applies to the
-            files actually on their way: it aborts the in-flight request and keeps the bytes that made it, so
-            <b>Upload</b> resumes from there - from the last completed chunk in the chunked mode - and it takes a
-            file still waiting in the concurrency queue back out of that queue. A file nobody asked to upload has
-            nothing to pause, so it is left as it is.
-        </div>
-        <br />
+    <DemoExample Title="Public API" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
         <div>
-            <b>CancelUpload</b> settles the file as canceled instead, and does so immediately whether it was running,
-            queued, paused or merely selected. Files that have already settled are left alone: a completed upload
-            cannot be taken back from the server by anything on this side, and calling off a file that already failed
-            would only replace the reason it failed with a less useful one. A canceled file can be started again
-            later, and its item offers the retry button for exactly that.
+            <b>Browse</b>, <b>Upload</b>, <b>PauseUpload</b>, <b>CancelUpload</b>, <b>RemoveFile</b> and <b>Reset</b>
+            drive the component from code, each on one file or - with no argument - on all of them. Pause keeps the
+            bytes sent so <b>Upload</b> resumes; cancel settles the file, which can be retried later. <b>Files</b> and
+            <b>UploadStatus</b> report the state.
         </div>
         <br />
         <BitFileUpload @ref="bitFileUploadWithBrowseFile" HideLabel Multiple
@@ -709,23 +466,29 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Accessibility" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+    <DemoExample Title="Preloaded files" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
         <div>
-            The whole control is operable from the keyboard and every interactive part shows a focus ring: the browse
-            button is a real button - Tab to it, Enter or Space to open the dialog - and each file item's upload,
-            pause, cancel and remove buttons follow it in the tab order, each with an aria-label naming the file it
-            acts on. An action that takes its own button out of the DOM hands the focus on rather than dropping it:
-            pausing moves it to the resume button that replaced it, and removing a file moves it to the item that
-            takes its place, or to the browse button when the list empties.
+            <b>PreloadedFiles</b> lists the files a record already has on the server. They are never uploaded, show
+            the <b>PreloadedFileMessage</b>, count towards <b>MaxCount</b> / <b>MaxTotalSize</b>, survive
+            <b>Reset</b>, and their remove button deletes them through the <b>RemoveUrl</b> with their <b>FileId</b>.
+            Read each one's <b>Status</b> back when saving.
         </div>
         <br />
+        <BitFileUpload Label="Add more attachments" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
+                       Multiple Append ShowPreview ShowRemoveButton
+                       PreloadedFiles="@attachments"
+                       PreloadedFileMessage="Saved with this record"
+                       Description="Remove an existing attachment or add new ones." />
+        <br />
+        <BitButton OnClick="LoadAttachments">Reload the record</BitButton>
+    </DemoExample>
+
+    <DemoExample Title="Accessibility" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
         <div>
-            The list carries list and listitem roles and is named by <b>FileListAriaLabel</b>; the progress bar
-            exposes its percentage through the progressbar role; and a visually hidden live region announces the
-            selection and every upload outcome, so a screen reader user hears how many files were taken and which
-            uploads succeeded or failed without going looking. <b>AnnouncementProvider</b> replaces that built-in
-            English sentence - the place to translate it or word it around your domain - and <b>AriaLabel</b> labels
-            the browse button when its visible text does not say enough on its own.
+            Every control is a real button with a visible focus ring, and each item action is labelled with its file
+            name. The list is named by <b>FileListAriaLabel</b>, progress bars expose their value, and a live region
+            announces selections and outcomes - reworded or translated through <b>AnnouncementProvider</b>.
+            <b>AriaLabel</b> names the browse button when its text is not enough.
         </div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl"
@@ -739,13 +502,8 @@
 
     <DemoExample Title="Variant" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
         <div>
-            The browse button is the visual weight the component carries, and <b>Variant</b> decides how much of it
-            there is. <b>Fill</b> - the default - paints it in a solid block of the
-            <BitLink Href="#example23">Color</BitLink>, for when uploading is the main thing the screen is for.
-            <b>Outline</b> keeps only the rule around it, for an uploader among other form fields. <b>Text</b> drops
-            both rule and fill, for a secondary affordance. The drop indicator and the file list follow along, and a
-            disabled component drops the role colors entirely for the neutral disabled look, whichever variant it
-            uses.
+            <b>Variant</b> sets how much of the <BitLink Href="#example22">Color</BitLink> the browse button carries:
+            <b>Fill</b> (default), <b>Outline</b> or <b>Text</b>. Disabled, every variant takes the neutral disabled look.
         </div>
         <br />
         <BitChoiceGroup @bind-Value="variant" Horizontal TItem="BitChoiceGroupOption<BitVariant>" TValue="BitVariant">
@@ -757,49 +515,14 @@
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" Variant="variant" />
         <br />
         <BitFileUpload Label="Disabled" UploadUrl="@UploadUrl" Variant="variant" IsEnabled="false" />
-    </DemoExample>
-
-    <DemoExample Title="Preloaded files" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
-        <div>
-            A form editing a record usually opens with attachments already on the server, and
-            <b>PreloadedFiles</b> is how they get into the list beside the ones the user is about to add.
-            They carry no content on this side, so they are never uploaded: each starts out completed, shows
-            its size alone rather than a transfer that just ran, says so through
-            <b>PreloadedFileMessage</b>, and counts towards <b>MaxCount</b> and <b>MaxTotalSize</b> like any
-            other file. Give each one the server's own id as its <b>FileId</b> - that is what travels in the
-            <b>BIT_FILE_ID</b> header when the remove button deletes it through the
-            <BitLink Href="#example4">RemoveUrl</BitLink> - and a <b>PreviewUrl</b> pointing at a thumbnail
-            the server serves, which <b>ShowPreview</b> renders like a locally generated one.
-        </div>
         <br />
-        <div>
-            The list is rebuilt whenever the files in the collection change - which files, by their
-            <b>FileId</b>, not which array they arrive in - so a record that loads late lands in the list
-            while one written inline in the markup does not undo the user's edits on every render. The
-            instances are adopted rather than copied, so each one's <b>Status</b> is where to read what
-            became of it - <b>Removed</b> for the ones the user deleted - when the form is saved. They also
-            survive what clears the rest: browsing without <b>Append</b> replaces the selection and
-            <b>Reset</b> empties it, and both leave the record's own files where they are.
-        </div>
-        <br />
-        <BitFileUpload Label="Add more attachments" UploadUrl="@UploadUrl" RemoveUrl="@RemoveUrl"
-                       Multiple Append ShowPreview ShowRemoveButton
-                       PreloadedFiles="@attachments"
-                       PreloadedFileMessage="Saved with this record"
-                       Description="Remove an existing attachment or add new ones." />
-        <br />
-        <BitButton OnClick="LoadAttachments">Reload the record</BitButton>
+        <BitFileUpload Label="Disabled drop area" UploadUrl="@UploadUrl" ShowDropArea IsEnabled="false" />
     </DemoExample>
 
-    <DemoExample Title="Cascading parameters" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+    <DemoExample Title="Cascading parameters" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
         <div>
-            <b>BitParams</b> carries a <b>BitFileUploadParams</b> down to every file upload under it, so a form, a
-            card or a whole page sets the shared endpoint, the shared limits and the shared look once instead of on
-            every uploader. What it carries is a default and not an override: an uploader that writes a parameter for
-            itself keeps its own value, and only what it left unset is filled in from the cascade - which is what
-            lets one step out of the group without the group having to know about it. Every parameter is on the
-            params object and each is filled in on its own, so one uploader can take its <b>UploadUrl</b> from the
-            cascade and its <b>MaxSize</b> from its own markup.
+            <b>BitParams</b> hands a <b>BitFileUploadParams</b> to every file upload under it as defaults: a parameter
+            an uploader sets itself wins, everything it leaves unset comes from the cascade.
         </div>
         <br />
         <div class="example-content">
@@ -816,13 +539,10 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
+    <DemoExample Title="Color" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
         <div>
-            <b>Color</b> picks the role the component speaks in, and it is not only the browse button: the dashed
-            drop indicator, the progress bar of every running file, the paused status message, the removal spinner,
-            the hovered action buttons and every focus ring take it too, so the whole control reads as one piece.
-            All the standard bit color roles are available - the semantic ones as well as the background, foreground
-            and border families - each carrying its own hover, active and focus shades and its own readable on-color.
+            <b>Color</b> drives the browse button, the drop indicator, the progress bars, the hovered actions and the
+            focus rings together.
         </div>
         <br />
         <div class="upload-grid">
@@ -849,20 +569,18 @@
             <BitFileUpload Label="SecondaryBorder" UploadUrl="@UploadUrl" Color="BitColor.SecondaryBorder" />
             <BitFileUpload Label="TertiaryBorder" UploadUrl="@UploadUrl" Color="BitColor.TertiaryBorder" />
         </div>
+        <br /><br />
+        <div>A drop area in a role color:</div>
+        <br />
+        <BitFileUpload Label="Drop files here" UploadUrl="@UploadUrl" ShowDropArea Color="BitColor.Success" />
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
+    <DemoExample Title="External Icons" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
         <div>
-            The action button icons are not limited to the built-in icon font: <b>UploadIcon</b>, <b>RetryIcon</b>,
-            <b>PauseIcon</b>, <b>CancelIcon</b> and <b>RemoveIcon</b> take a
-            <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> or a raw CSS class string pointing at any icon
-            library whose stylesheet is loaded. Use <b>BitIconInfo.Fa()</b>, <b>BitIconInfo.Bi()</b> or
-            <b>BitIconInfo.Css()</b> to build one, or stick with the built-in font and pick different icons via the
-            <b>...IconName</b> counterparts. Upload against a failing endpoint to see the retry icon take the place
-            of the upload one.
+            <b>LabelIcon</b>, <b>UploadIcon</b>, <b>RetryIcon</b>, <b>PauseIcon</b>, <b>CancelIcon</b> and
+            <b>RemoveIcon</b> take a <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> or a raw class string from
+            any loaded icon library (<b>BitIconInfo.Fa()</b>, <b>.Bi()</b>, <b>.Css()</b>).
         </div>
-
-        <br />
         <br />
 
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
@@ -870,6 +588,7 @@
         <div>FontAwesome:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
+                       LabelIcon="@("fa-solid fa-folder-open")"
                        UploadIcon="@("fa-solid fa-upload")"
                        PauseIcon="@("fa-solid fa-pause")"
                        RetryIcon="@("fa-solid fa-rotate-right")"
@@ -878,7 +597,8 @@
 
         <br /><br />
 
-        <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
+        <BitFileUpload Label="Drop files here" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" ShowDropArea
+                       LabelIcon="@BitIconInfo.Fa("solid cloud-arrow-up")"
                        UploadIcon="@BitIconInfo.Fa("solid cloud-arrow-up")"
                        PauseIcon="@BitIconInfo.Fa("solid circle-pause")"
                        RetryIcon="@BitIconInfo.Fa("solid arrow-rotate-right")"
@@ -892,6 +612,7 @@
         <div>Bootstrap:</div>
         <br />
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
+                       LabelIcon="@("bi bi-folder2-open")"
                        UploadIcon="@("bi bi-cloud-upload")"
                        PauseIcon="@("bi bi-pause-circle")"
                        RetryIcon="@("bi bi-arrow-clockwise")"
@@ -901,6 +622,7 @@
         <br /><br />
 
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl"
+                       LabelIcon="@BitIconInfo.Bi("paperclip")"
                        UploadIcon="@BitIconInfo.Bi("cloud-arrow-up")"
                        PauseIcon="@BitIconInfo.Bi("pause-circle")"
                        RetryIcon="@BitIconInfo.Bi("arrow-repeat")"
@@ -908,35 +630,24 @@
                        RemoveIcon="@BitIconInfo.Bi("trash")" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
+    <DemoExample Title="Size" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
         <div>
-            <b>Size</b> scales the whole control in one move - the height, padding and font of the browse button, the
-            text of the file items and their size line, the action buttons and their icons, and the preview
-            thumbnails all step together, off the same control-height and icon tokens every other bit control reads.
-            <b>Medium</b> is the default. Each dimension is also a public CSS variable, so one of them can be
-            fine-tuned without redefining the scale.
+            <b>Size</b> scales the browse button, the items, the action buttons, the icons and the thumbnails together;
+            <b>Medium</b> is the default.
         </div>
         <br />
-        <BitFileUpload Label="Small" UploadUrl="@UploadUrl" Size="BitSize.Small" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+        <BitFileUpload Label="Small" UploadUrl="@UploadUrl" Size="BitSize.Small" LabelIconName="Upload" ShowRemoveButton RemoveUrl="@RemoveUrl" />
         <br />
-        <BitFileUpload Label="Medium" UploadUrl="@UploadUrl" Size="BitSize.Medium" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+        <BitFileUpload Label="Medium" UploadUrl="@UploadUrl" Size="BitSize.Medium" LabelIconName="Upload" ShowRemoveButton RemoveUrl="@RemoveUrl" />
         <br />
-        <BitFileUpload Label="Large" UploadUrl="@UploadUrl" Size="BitSize.Large" ShowRemoveButton RemoveUrl="@RemoveUrl" />
+        <BitFileUpload Label="Large" UploadUrl="@UploadUrl" Size="BitSize.Large" LabelIconName="Upload" ShowRemoveButton RemoveUrl="@RemoveUrl" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example26RazorCode" Id="example26">
+    <DemoExample Title="Style & Class" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
         <div>
-            <b>Style</b> and <b>Class</b> land on the root element. For anything deeper, <b>Styles</b> and
-            <b>Classes</b> reach the individual parts - the browse button, the description, the file list, each item,
-            its preview, name, size, percentage, progress bar, status message and every action button and icon - and
-            their <b>Dragging</b> entry applies only while files are dragged over the component (or over one of its
-            <BitLink Href="#example2">drop zones</BitLink>), which is how the examples below restyle the drop state
-            without touching the idle look.
+            <b>Style</b> and <b>Class</b> land on the root; <b>Styles</b> and <b>Classes</b> reach every part, and
+            their <b>Dragging</b> / <b>DraggingRejected</b> entries apply only during a drag.
         </div>
-
-        <br /><br />
-
-        <div>Component's Style & Class:</div>
         <br />
         <div>
             <BitFileUpload Label="Styled file upload" UploadUrl="@UploadUrl"
@@ -944,15 +655,12 @@
             <br />
             <BitFileUpload Label="Classed file upload" UploadUrl="@UploadUrl" Class="custom-class" />
         </div>
-
-        <br /><br /><br />
-
-        <div><b>Styles</b> & <b>Classes</b>:</div>
-        <br />
+        <br /><br />
         <div>
-            <BitFileUpload Label="Styles" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" Styles="@(new()
+            <BitFileUpload Label="Styles" UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" LabelIconName="Upload" Styles="@(new()
                            {
                                Label = "border-color: deeppink; background-color: deeppink; color: white;",
+                               LabelIcon = "color: yellow;",
                                Dragging = "background-color: lavenderblush;",
                                FileName = "color: deeppink;",
                                ProgressBar = "background-color: deeppink;"
@@ -966,16 +674,10 @@
                                RemoveButton = "custom-remove"
                            })" />
         </div>
-
-        <br /><br /><br />
-
-        <div><b>CSS variables</b>:</div>
-        <br />
+        <br /><br />
         <div>
-            The public <b>--bit-FileUpload-*</b> variables (listed in the API section below) are read off the root
-            element, so the same declaration re-skins one instance from its <b>Style</b>, a section of the page from
-            any ancestor, or the whole app from <b>:root</b> - without a single selector of your own. They inherit,
-            which is what makes the middle case work, and each falls back to the theme value when unset.
+            The <b>--bit-FileUpload-*</b> variables (listed in the API section) inherit, so they work from an
+            instance's <b>Style</b>, from any ancestor, or from <b>:root</b>.
         </div>
         <br />
         <div>
@@ -993,30 +695,32 @@
             <div class="custom-vars">
                 <BitFileUpload Label="Two uploaders under one ancestor that sets the variables"
                                UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" />
-                <BitFileUpload Label="Neither of them declares anything of its own"
+                <BitFileUpload Label="A drop area under the same ancestor" ShowDropArea
                                UploadUrl="@UploadUrl" ShowRemoveButton RemoveUrl="@RemoveUrl" />
             </div>
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example27RazorCode" Id="example27">
+    <DemoExample Title="RTL" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26">
         <div>
-            Setting <b>Dir</b> to <b>BitDir.Rtl</b> mirrors the whole layout - the browse button, the file names,
-            sizes, progress bars and action buttons all follow - and the localizable texts (the <b>Label</b>, the
-            status messages and the button titles) complete the picture, so the BitFileUpload reads naturally inside
-            an RTL page like the Farsi example below.
+            <b>Dir="BitDir.Rtl"</b> mirrors the whole layout; the localizable texts complete it.
         </div>
         <br />
         <div dir="rtl">
             <BitFileUpload Dir="BitDir.Rtl"
                            Label="انتخاب یا رها کردن فایل"
+                           LabelIconName="Upload"
                            UploadUrl="@UploadUrl"
                            ShowRemoveButton RemoveUrl="@RemoveUrl"
+                           ShowBatchActions
                            FileListAriaLabel="فایل‌های انتخاب‌شده"
                            UploadButtonTitle="بارگذاری"
                            PauseButtonTitle="توقف"
                            CancelButtonTitle="لغو"
                            RemoveButtonTitle="حذف"
+                           UploadAllText="بارگذاری همه"
+                           CancelAllText="لغو همه"
+                           ClearText="پاک کردن"
                            SuccessfulUploadMessage="بارگذاری فایل موفق بود"
                            FailedUploadMessage="بارگذاری فایل شکست خورد" />
         </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index f1c8fcc284e..9d1cb960cc6 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -105,6 +105,13 @@ public partial class BitFileUploadDemo
             Description = "The tooltip of the cancel upload button, which is also used as the prefix of its accessible label (e.g., \"Cancel report.pdf\"). Defaults to \"Cancel\".",
         },
         new()
+        {
+            Name = "CancelAllText",
+            Type = "string",
+            DefaultValue = "Cancel all",
+            Description = "The text of the \"Cancel all\" button of the batch actions (see ShowBatchActions).",
+        },
+        new()
         {
             Name = "CancelIcon",
             Type = "BitIconInfo?",
@@ -160,6 +167,13 @@ public partial class BitFileUploadDemo
             Href = "#class-styles"
         },
         new()
+        {
+            Name = "ClearText",
+            Type = "string",
+            DefaultValue = "Clear",
+            Description = "The text of the \"Clear\" button of the batch actions (see ShowBatchActions), which resets the component.",
+        },
+        new()
         {
             Name = "Color",
             Type = "BitColor?",
@@ -228,7 +242,7 @@ public partial class BitFileUploadDemo
         {
             Name = "FileListAriaLabel",
             Type = "string",
-            DefaultValue = "\"Selected files\"",
+            DefaultValue = "Selected files",
             Description = "The accessible name of the file list, so that a screen reader user landing on it is told what the list they are in holds instead of only how many items it has. Set it to an empty string to leave the list unnamed.",
         },
         new()
@@ -278,6 +292,33 @@ public partial class BitFileUploadDemo
             Description = "The text of the browse button. Setting it to an empty string hides the button altogether."
         },
         new()
+        {
+            Name = "LabelIcon",
+            Type = "BitIconInfo?",
+            DefaultValue = "null",
+            Description = "The icon of the browse button using custom CSS classes for external icon libraries. Takes precedence over LabelIconName when both are set.",
+            LinkType = LinkType.Link,
+            Href = "#bit-icon-info"
+        },
+        new()
+        {
+            Name = "LabelIconName",
+            Type = "string?",
+            DefaultValue = "null",
+            Description = "The name of the icon of the browse button from the built-in Fluent UI icons. Defaults to CloudUpload in the ShowDropArea mode, and to no icon otherwise.",
+            LinkType = LinkType.Link,
+            Href = "https://blazorui.bitplatform.dev/iconography"
+        },
+        new()
+        {
+            Name = "LabelIconPosition",
+            Type = "BitIconPosition?",
+            DefaultValue = "null",
+            Description = "The position of the icon of the browse button relative to its text: Start (the default) or End. In the ShowDropArea mode the icon is stacked above or below the text instead.",
+            LinkType = LinkType.Link,
+            Href = "#icon-position-enum"
+        },
+        new()
         {
             Name = "LabelTemplate",
             Type = "RenderFragment?",
@@ -585,6 +626,20 @@ public partial class BitFileUploadDemo
             Href = "#file-info"
         },
         new()
+        {
+            Name = "ShowBatchActions",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether an action bar with \"Upload all\", \"Cancel all\" and \"Clear\" buttons is rendered under the file list. A button with nothing to act on stays in place, marked aria-disabled, so the focus is never lost to it. The AutoUpload mode leaves out \"Upload all\"."
+        },
+        new()
+        {
+            Name = "ShowDropArea",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Whether the browse button is rendered as a large drop area - a full-width dashed panel with an icon over the Label - instead of a regular button. It stays a real button, so it is reached with Tab and opens the file dialog with Enter or Space."
+        },
+        new()
         {
             Name = "ShowPreview",
             Type = "bool",
@@ -624,6 +679,13 @@ public partial class BitFileUploadDemo
             Description = "The message shown for successful file uploads."
         },
         new()
+        {
+            Name = "UploadAllText",
+            Type = "string",
+            DefaultValue = "Upload all",
+            Description = "The text of the \"Upload all\" button of the batch actions (see ShowBatchActions).",
+        },
+        new()
         {
             Name = "UploadButtonTitle",
             Type = "string?",
@@ -941,6 +1003,13 @@ public partial class BitFileUploadDemo
                    Description = "Custom CSS classes/styles for the root element while files are being dragged over the BitFileUpload."
                },
                new()
+               {
+                   Name = "DraggingRejected",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles added on top of Dragging while the dragged files are known to be turned away - a MIME type the AllowedExtensions rule does not accept, or more files than the MaxCount leaves room for."
+               },
+               new()
                {
                    Name = "Label",
                    Type = "string?",
@@ -948,6 +1017,13 @@ public partial class BitFileUploadDemo
                    Description = "Custom CSS classes/styles for the browse button (label) of the BitFileUpload."
                },
                new()
+               {
+                   Name = "LabelIcon",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the icon of the browse button of the BitFileUpload."
+               },
+               new()
                {
                    Name = "Description",
                    Type = "string?",
@@ -1094,6 +1170,20 @@ public partial class BitFileUploadDemo
                    DefaultValue = "null",
                    Description = "Custom CSS classes/styles for the spinner that takes the place of the remove button of a file item while that file is being removed from the server."
                },
+               new()
+               {
+                   Name = "BatchActions",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for the container of the batch action buttons of the BitFileUpload."
+               },
+               new()
+               {
+                   Name = "BatchActionButton",
+                   Type = "string?",
+                   DefaultValue = "null",
+                   Description = "Custom CSS classes/styles for each batch action button (Upload all, Cancel all, Clear) of the BitFileUpload."
+               },
             ]
         }
     ];
@@ -1139,6 +1229,17 @@ public partial class BitFileUploadDemo
             ]
         },
         new()
+        {
+            Id = "icon-position-enum",
+            Name = "BitIconPosition",
+            Description = "Describes the placement of the icon relative to the text.",
+            Items =
+            [
+                new() { Name = "Start", Description = "The icon is placed before the text.", Value = "0" },
+                new() { Name = "End", Description = "The icon is placed after the text.", Value = "1" }
+            ]
+        },
+        new()
         {
             Id = "variant-enum",
             Name = "BitVariant",
@@ -1239,7 +1340,7 @@ public partial class BitFileUploadDemo
         {
             Name = "InputId",
             Type = "string?",
-            DefaultValue = "",
+            DefaultValue = "null",
             Description = "The id of the file input element.",
         },
         new()
@@ -1415,10 +1516,88 @@ public partial class BitFileUploadDemo
         new()
         {
             Name = "--bit-FileUpload-label-font-weight",
-            DefaultValue = "--bit-tpg-fw-light",
+            DefaultValue = "--bit-tpg-font-weight",
             Description = "Text weight of the browse button.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-label-gap",
+            DefaultValue = "0.375rem",
+            Description = "Room between the browse button's icon and its text.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-label-icon-size",
+            DefaultValue = "The Size class's icon size (--bit-siz-icon-sm/md/lg)",
+            Description = "Size of the browse button's icon (LabelIcon / LabelIconName).",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-min-height",
+            DefaultValue = "8rem",
+            Description = "Height floor of the ShowDropArea panel.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-padding",
+            DefaultValue = "1.5rem",
+            Description = "Padding of the ShowDropArea panel.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-color",
+            DefaultValue = "--bit-clr-fg-pri",
+            Description = "Text color of the ShowDropArea panel.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-background",
+            DefaultValue = "--bit-clr-bg-sec",
+            Description = "Surface of the ShowDropArea panel at rest.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-border-color",
+            DefaultValue = "--bit-clr-brd-pri",
+            Description = "Dashed rule of the ShowDropArea panel at rest; the Color role takes over on hover and during a drag.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-border-style",
+            DefaultValue = "dashed",
+            Description = "Style of the ShowDropArea panel's rule.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-radius",
+            DefaultValue = "--bit-shp-radius-surface",
+            Description = "Corner radius of the ShowDropArea panel.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-hover-border-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Rule of the ShowDropArea panel on hover and while pressed.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-hover-background",
+            DefaultValue = "The Color role's main color at 8% opacity",
+            Description = "Surface of the ShowDropArea panel on hover and while files are dragged over it.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-icon-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Color of the ShowDropArea panel's large icon.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-area-icon-size",
+            DefaultValue = "2rem",
+            Description = "Size of the ShowDropArea panel's large icon (--bit-FileUpload-label-icon-size wins when set).",
+        },
+        new()
         {
             Name = "--bit-FileUpload-focus-color",
             DefaultValue = "The Color role's focus color",
@@ -1434,7 +1613,7 @@ public partial class BitFileUploadDemo
         {
             Name = "--bit-FileUpload-description-font-size",
             DefaultValue = "Per Size, from the type ramp",
-            Description = "Text size of the hint under the browse button and of each file item's size line.",
+            Description = "Text size of the hint under the browse button.",
         },
         new()
         {
@@ -1485,6 +1664,12 @@ public partial class BitFileUploadDemo
             Description = "Text weight of a file item's name.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-item-meta-font-size",
+            DefaultValue = "Per Size, from the type ramp",
+            Description = "Text size of the size and percentage line under a file item's name.",
+        },
+        new()
         {
             Name = "--bit-FileUpload-list-max-height",
             DefaultValue = "none",
@@ -1629,6 +1814,36 @@ public partial class BitFileUploadDemo
             Description = "Style of that rule, which is what makes the drop indicator read as a drop target.",
         },
         new()
+        {
+            Name = "--bit-FileUpload-drop-reject-color",
+            DefaultValue = "--bit-clr-err-text",
+            Description = "Browse button text while the dragged files are known to be turned away (a MIME type the rule refuses, or more files than MaxCount leaves room for).",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-reject-background",
+            DefaultValue = "--bit-clr-err",
+            Description = "Browse button fill in the same state.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-drop-reject-border-color",
+            DefaultValue = "--bit-clr-err-text",
+            Description = "Browse button rule in the same state.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-batch-action-color",
+            DefaultValue = "The Color role's main color",
+            Description = "Text of the Upload all, Cancel all and Clear buttons.",
+        },
+        new()
+        {
+            Name = "--bit-FileUpload-batch-action-hover-background",
+            DefaultValue = "The Color role's main color at 10% opacity",
+            Description = "Tint behind a hovered batch action button.",
+        },
+        new()
         {
             Name = "--bit-FileUpload-disabled-color",
             DefaultValue = "--bit-clr-fg-dis",
@@ -1638,7 +1853,7 @@ public partial class BitFileUploadDemo
         {
             Name = "--bit-FileUpload-disabled-background",
             DefaultValue = "--bit-clr-bg-dis",
-            Description = "Fill of a disabled browse button in the Fill variant.",
+            Description = "Fill of a disabled browse button in the Fill variant and of a disabled drop area.",
         },
         new()
         {
@@ -1708,6 +1923,7 @@ protected override void OnInitialized()
                 ShowRemoveButton = true,
                 MaxSize = 1024 * 1024 * 5,
                 Variant = BitVariant.Outline,
+                LabelIconName = "Upload",
                 Description = "Up to 5 MB per file.",
             }
         ];
@@ -1827,22 +2043,42 @@ private async Task HandleBrowseFileOnClick()
 private string UploadUrl = ""/Upload"";";
 
     private readonly string example2RazorCode = @"
+<BitFileUpload Label=""Upload a document"" UploadUrl=""@UploadUrl"" LabelIconName=""Upload""
+               Accept="".pdf,.docx"" MaxSize=""1024 * 1024 * 5""
+               Description=""PDF or DOCX, up to 5 MB."" />
+
+<BitFileUpload Label=""Browse for an image"" UploadUrl=""@UploadUrl"" LabelIconName=""ChevronRight""
+               LabelIconPosition=""BitIconPosition.End"" Accept=""image/*"" MaxSize=""1024 * 1024 * 2"">
+    <DescriptionTemplate>
+        <i class=""bit-icon bit-icon--Info"" />
+        <span>Images only. Up to <b>2 MB</b>.</span>
+    </DescriptionTemplate>
+</BitFileUpload>";
+    private readonly string example2CsharpCode = @"
+private string UploadUrl = ""/Upload"";";
+
+    private readonly string example3RazorCode = @"
+<BitFileUpload Label=""Drag and drop files here, or click to browse"" UploadUrl=""@UploadUrl"" ShowDropArea Multiple
+               Description=""Any file type, up to 10 MB each."" MaxSize=""1024 * 1024 * 10"" />
+
+
 <BitCheckbox @bind-Value=""allowDrop"" Label=""AllowDrop"" />
 <BitCheckbox @bind-Value=""allowPaste"" Label=""AllowPaste"" />
 
 <BitFileUpload Label=""Select, drop or paste files"" UploadUrl=""@UploadUrl"" AllowDrop=""allowDrop"" AllowPaste=""allowPaste"" />
 
+
 <div id=""fileupload-drop-zone"" class=""drop-zone"">
     <div>Drop files anywhere in this card</div>
     <BitFileUpload Label=""...or browse for them"" UploadUrl=""@UploadUrl"" Multiple
                    DropZoneSelector=""#fileupload-drop-zone""
                    Classes=""@(new() { Dragging = ""drop-zone-dragging"" })"" />
 </div>";
-    private readonly string example2CsharpCode = @"
+    private readonly string example3CsharpCode = @"
 private bool allowDrop = true;
 private bool allowPaste = true;
 private string UploadUrl = ""/Upload"";";
-    private const string example2ScssCode = @"
+    private const string example3ScssCode = @"
 // every drop zone carries Classes.Dragging while files are dragged over any of them,
 // which is the hook the card highlights itself with.
 .drop-zone {
@@ -1860,24 +2096,11 @@ private async Task HandleBrowseFileOnClick()
         background-color: var(--bit-clr-bg-sec);
     }
 }";
-    private readonly DemoCodeFile[] example2CodeFiles =
+    private readonly DemoCodeFile[] example3CodeFiles =
     [
-        new("BitFileUploadDemo.razor.scss", example2ScssCode),
+        new("BitFileUploadDemo.razor.scss", example3ScssCode),
     ];
 
-    private readonly string example3RazorCode = @"
-<BitFileUpload Label=""Browse for a document"" UploadUrl=""@UploadUrl"" Accept="".pdf,.docx"" MaxSize=""1024 * 1024 * 5""
-               Description=""PDF or DOCX, up to 5 MB."" />
-
-<BitFileUpload Label=""Browse for an image"" UploadUrl=""@UploadUrl"" Accept=""image/*"" MaxSize=""1024 * 1024 * 2"">
-    <DescriptionTemplate>
-        <i class=""bit-icon bit-icon--Info"" />
-        <span>Images only. Up to <b>2 MB</b>.</span>
-    </DescriptionTemplate>
-</BitFileUpload>";
-    private readonly string example3CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
-
     private readonly string example4RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
                ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
@@ -1901,13 +2124,23 @@ private async Task HandleBrowseFileOnClick()
                MaxSizeErrorMessage=""The file is too big! Please select a file smaller than 1 MB.""
                Description=""Up to 1 MB per file."" />
 
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" MinSize=""1024"" />
-
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple Append
                MaxCount=""3"" MaxTotalSize=""1024 * 1024 * 2"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
                Description=""Up to 3 files, 2 MB in total."" />
 
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple FileValidator=""@ValidateEmptyFile"" />";
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple FileValidator=""@ValidateEmptyFile""
+               Description=""Empty (zero-byte) files are turned away."" />
+
+
+<BitFileUpload Label=""Drop images or PDFs here"" UploadUrl=""@UploadUrl"" ShowDropArea Multiple MaxCount=""3""
+               AllowedExtensions=""@([""image/*"", ""application/pdf""])""
+               Description=""Up to 3 images or PDFs - drag anything else over to see it refused."" />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
+               AllowedExtensions=""@(["".gif"", "".jpg"", "".mp4""])"" Description=""GIF, JPG or MP4."" />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Accept="".png,.jpg""
+               Description=""Accept only: the dialog filters, a dropped file of any type is still taken."" />";
     private readonly string example6CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
@@ -1918,17 +2151,6 @@ private async Task HandleBrowseFileOnClick()
 }";
 
     private readonly string example7RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Accept="".png,.jpg"" />
-
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
-               AllowedExtensions=""@(new List<string> { "".gif"","".jpg"","".mp4"" })"" />
-
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
-               AllowedExtensions=""@(new List<string> { ""image/*"", ""application/pdf"" })"" />";
-    private readonly string example7CsharpCode = @"
-private string UploadUrl = ""/Upload"";";
-
-    private readonly string example8RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop a folder"" UploadUrl=""@UploadUrl"" Directory Multiple
                MaxCount=""20"" Description=""Up to 20 files out of the chosen folder."" />
 
@@ -1937,38 +2159,18 @@ private async Task HandleBrowseFileOnClick()
 
 <BitFileUpload Label=""Record a video"" UploadUrl=""@UploadUrl"" Accept=""video/*"" Capture=""user""
                Description=""Opens the front camera on a mobile device."" />";
-    private readonly string example8CsharpCode = @"
+    private readonly string example7CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example9RazorCode = @"
-<style>
-    .dimensions-item {
-        display: flex;
-        gap: 1rem;
-        justify-content: space-between;
-        padding: 0.25rem 0;
-    }
-</style>
-
-
+    private readonly string example8RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
                ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
 <BitFileUpload Label=""Select or drag and drop images"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
                Accept=""image/*"" ReadImageDimensions FileValidator=""@ValidateImageDimensions""
                ShowRemoveButton RemoveUrl=""@RemoveUrl""
-               Description=""Images between 200x200 and 4000x4000 pixels."" />
-
-<BitFileUpload Label=""Select or drag and drop images"" UploadUrl=""@UploadUrl"" Multiple
-               Accept=""image/*"" ReadImageDimensions>
-    <FileViewTemplate Context=""file"">
-        <div class=""dimensions-item"">
-            <span>@file.Name</span>
-            <span>@(file.Width is null ? ""unknown size"" : $""{file.Width} x {file.Height}"")</span>
-        </div>
-    </FileViewTemplate>
-</BitFileUpload>";
-    private readonly string example9CsharpCode = @"
+               Description=""Images between 200x200 and 4000x4000 pixels."" />";
+    private readonly string example8CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 
@@ -1985,7 +2187,7 @@ private async Task HandleBrowseFileOnClick()
     return null;
 }";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example9RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple MaxSize=""1024 * 1024 * 1""
                OnAllUploadsComplete=""@(() => onAllUploadsCompleteText = ""All files are uploaded"")""
                OnInvalid=""@(files => onInvalidText = $""{files.Length} file(s) rejected: {string.Join("", "", files.Select(f => f.Name))}"")""
@@ -1995,20 +2197,20 @@ private async Task HandleBrowseFileOnClick()
 <div>@onAllUploadsCompleteText</div>
 <div>@onInvalidText</div>
 <div>@onUploadFailedText</div>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example9CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string onInvalidText = string.Empty;
 private string onUploadFailedText = string.Empty;
 private string onAllUploadsCompleteText = ""No File"";";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example10RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload AutoChunkSize />";
-    private readonly string example11CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private string ChunkedUploadUrl = ""/ChunkedUpload"";";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl"" ShowRemoveButton
                UploadRequestQueryStrings=""@(new Dictionary<string, string>{ {""qs1"", ""qsValue1"" } })""
                UploadRequestHttpHeaders=""@(new Dictionary<string, string>{ {""header1"", ""value1"" } })""
@@ -2029,7 +2231,7 @@ private async Task HandleBrowseFileOnClick()
                ShowRemoveButton
                WithCredentials
                UploadTimeout=""TimeSpan.FromMinutes(10)"" />";
-    private readonly string example12CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 private string ChunkedUploadUrl = ""/ChunkedUpload"";
@@ -2044,17 +2246,9 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
     return Task.FromResult(new Dictionary<string, string> { { ""Authorization"", $""Bearer token-{tokenRequestCount}"" } });
 }";
 
-    private readonly string example13RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
-               AutoRetries=""2"" AutoRetryDelay=""TimeSpan.FromSeconds(1)"" />
-
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@NonExistingUploadUrl""
-               AutoRetries=""2"" AutoRetryDelay=""TimeSpan.FromSeconds(1)""
-               RetryButtonTitle=""Try again"" />
-
+    private readonly string example12RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@NonExistingUploadUrl""
                AutoRetries=""2"" AutoRetryDelay=""TimeSpan.FromSeconds(1)""
-               ShouldAutoRetry=""@((file, status) => true)""
                RetryButtonTitle=""Try again"" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@NonExistingUploadUrl""
@@ -2062,8 +2256,7 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
                ShouldAutoRetry=""@((file, status) => true)""
                AutoRetryDelayProvider=""@BackOff""
                RetryButtonTitle=""Try again"" />";
-    private readonly string example13CsharpCode = @"
-private string UploadUrl = ""/Upload"";
+    private readonly string example12CsharpCode = @"
 private string NonExistingUploadUrl = ""/MissingUploadEndpoint"";
 
 // 1s, 2s, 4s, ... with a little jitter, so a batch that failed together does not come back together.
@@ -2072,14 +2265,26 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
     return TimeSpan.FromSeconds(Math.Pow(2, attempt - 1)) + TimeSpan.FromMilliseconds(Random.Shared.Next(250));
 }";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example13RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ConcurrentUploads=""2"" />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple AutoUpload
                ConcurrentUploads=""1"" QueuedUploadMessage=""In the queue…"" />";
-    private readonly string example14CsharpCode = @"
+    private readonly string example13CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
+    private readonly string example14RazorCode = @"
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple Append
+               ShowBatchActions ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" Multiple ChunkedUpload
+               ConcurrentUploads=""1"" ShowBatchActions
+               UploadAllText=""Send everything"" CancelAllText=""Stop everything"" ClearText=""Start over"" />";
+    private readonly string example14CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";
+private string ChunkedUploadUrl = ""/ChunkedUpload"";";
+
     private readonly string example15RazorCode = @"
 <BitFileUpload @ref=""speedFileUpload"" Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
                OnChange=""@(_ => StateHasChanged())"" OnProgress=""@(_ => StateHasChanged())"" />
@@ -2100,19 +2305,12 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
         Batch: @(speedFileUpload?.TotalUploadSpeed is null ? ""idle"" : $""{speedFileUpload.TotalUploadSpeed / 1024:N0} KB/s"")
         (@(speedFileUpload?.OverallRemainingTime is null ? ""-"" : $""{speedFileUpload.OverallRemainingTime:mm\\:ss} left""))
     </b>
-</div>";
-    private readonly string example15CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private BitFileUpload? speedFileUpload;
+</div>
 
-private IEnumerable<BitFileInfo> SpeedFiles =>
-    speedFileUpload?.Files.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
 
-    private readonly string example16RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
                FileSizeFormatter=""@(size => $""{size:N0} bytes"")"" />
 
-
 <BitFileUpload @ref=""hiddenViewFileUpload"" Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
                Multiple AutoUpload HideFileView
                OnChange=""@(_ => StateHasChanged())"" OnProgress=""@(_ => StateHasChanged())"" />
@@ -2125,22 +2323,25 @@ Multiple AutoUpload HideFileView
             <li>@file.Name - @file.Status</li>
         }
     </ul>
-    <div>Overall progress: @(hiddenViewFileUpload?.OverallUploadProgress ?? 0)%</div>
 }
 else
 {
     <div>No file selected yet.</div>
 }";
-    private readonly string example16CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private string UploadUrl = ""/Upload"";
+private BitFileUpload? speedFileUpload;
 private BitFileUpload? hiddenViewFileUpload;
 
+private IEnumerable<BitFileInfo> SpeedFiles =>
+    speedFileUpload?.Files.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];
+
 // OnChange reports a single file when its status changes and the whole selection when files are picked,
 // so the summary is read back from the Files property instead of from the argument.
 private IEnumerable<BitFileInfo> HiddenViewFiles =>
     hiddenViewFileUpload?.Files.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
 
-    private readonly string example17RazorCode = @"
+    private readonly string example16RazorCode = @"
 <style>
     .browse-file {
         border: 1px solid #D2D2D7;
@@ -2331,55 +2532,52 @@ Browse file
         }
     </LabelTemplate>
     <FileViewTemplate Context=""file"">
-        @if (file.Status != BitFileUploadStatus.Removed)
-        {
-            <div class=""file-list"">
-                <div class=""file-info"">
-                    <div class=""file-info-ico"">
-                        <i class=""bit-icon bit-icon--FileImage"" />
-                    </div>
-                    <div class=""file-info-data"">
-                        <div class=""file-info-title"">
-                            <div class=""file-info-name"">@file.Name</div>
-                            <div class=""file-info-btns"">
-                                <button type=""button"" aria-label=""@($""Upload {file.Name}"")"" @onclick=""() => bitFileUpload.Upload(file)"">
-                                    <i class=""bit-icon bit-icon--CloudUpload upload-ico"" />
-                                </button>
-                                <button type=""button"" aria-label=""@($""Remove {file.Name}"")"" @onclick=""() => bitFileUpload.RemoveFile(file)"">
-                                    <i class=""bit-icon bit-icon--ChromeClose remove-ico"" />
-                                </button>
-                            </div>
+        <div class=""file-list"">
+            <div class=""file-info"">
+                <div class=""file-info-ico"">
+                    <i class=""bit-icon bit-icon--FileImage"" />
+                </div>
+                <div class=""file-info-data"">
+                    <div class=""file-info-title"">
+                        <div class=""file-info-name"">@file.Name</div>
+                        <div class=""file-info-btns"">
+                            <button type=""button"" aria-label=""@($""Upload {file.Name}"")"" @onclick=""() => bitFileUpload.Upload(file)"">
+                                <i class=""bit-icon bit-icon--CloudUpload upload-ico"" />
+                            </button>
+                            <button type=""button"" aria-label=""@($""Remove {file.Name}"")"" @onclick=""() => bitFileUpload.RemoveFile(file)"">
+                                <i class=""bit-icon bit-icon--ChromeClose remove-ico"" />
+                            </button>
                         </div>
-                        @if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
-                        {
-                            var fileUploadPercent = GetFileUploadPercent(file);
-                            <div class=""file-info-subtitle"">@GetFileUploadSize(file) - @fileUploadPercent%</div>
-                            <div class=""file-info-progressbar-container"">
-                                <div class=""file-info-progressbar"" role=""progressbar"" style=""width:@fileUploadPercent%;"" aria-valuemin=""0"" aria-valuemax=""100"" aria-valuenow=""@fileUploadPercent""></div>
-                            </div>
-                        }
-                        else
-                        {
-                            <div class=""@(file.Status == BitFileUploadStatus.Completed ? ""file-info-s-msg"" : ""file-info-e-msg"")"">@GetUploadMessageStr(file)</div>
-                        }
                     </div>
+                    @if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
+                    {
+                        var fileUploadPercent = GetFileUploadPercent(file);
+                        <div class=""file-info-subtitle"">@GetFileUploadSize(file) - @fileUploadPercent%</div>
+                        <div class=""file-info-progressbar-container"">
+                            <div class=""file-info-progressbar"" role=""progressbar"" style=""width:@fileUploadPercent%;"" aria-label=""@file.Name"" aria-valuemin=""0"" aria-valuemax=""100"" aria-valuenow=""@fileUploadPercent""></div>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class=""@(file.Status == BitFileUploadStatus.Completed ? ""file-info-s-msg"" : ""file-info-e-msg"")"">@GetUploadMessageStr(file)</div>
+                    }
                 </div>
+            </div>
 
-                <div class=""file-list-footer"">
-                    <div>
-                        Max file size: 2 MB
-                    </div>
-                    <div>
-                        Supported file types: jpg, jpeg, png, bmp
-                    </div>
+            <div class=""file-list-footer"">
+                <div>
+                    Max file size: 2 MB
+                </div>
+                <div>
+                    Supported file types: jpg, jpeg, png, bmp
                 </div>
             </div>
-        }
+        </div>
     </FileViewTemplate>
 </BitFileUpload>
 
 <BitButton OnClick=""HandleUploadOnClick"">Upload</BitButton>";
-    private readonly string example17CsharpCode = @"
+    private readonly string example16CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 
@@ -2430,7 +2628,7 @@ private static string GetFileUploadSize(BitFileInfo file)
     _ => string.Empty,
 };";
 
-    private readonly string example18RazorCode = @"
+    private readonly string example17RazorCode = @"
 <BitFileUpload @ref=""bitFileUploadWithBrowseFile"" HideLabel Multiple
                UploadUrl=""@UploadUrl""
                RemoveUrl=""@RemoveUrl"" />
@@ -2440,7 +2638,7 @@ private static string GetFileUploadSize(BitFileInfo file)
 <BitButton OnClick=""() => bitFileUploadWithBrowseFile.PauseUpload()"">Pause all</BitButton>
 <BitButton OnClick=""() => bitFileUploadWithBrowseFile.CancelUpload()"">Cancel all</BitButton>
 <BitButton OnClick=""() => bitFileUploadWithBrowseFile.Reset()"">Reset</BitButton>";
-    private readonly string example18CsharpCode = @"
+    private readonly string example17CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 private BitFileUpload bitFileUploadWithBrowseFile = default!;
@@ -2450,40 +2648,7 @@ private async Task HandleBrowseFileOnClick()
     await bitFileUploadWithBrowseFile.Browse();
 }";
 
-    private readonly string example19RazorCode = @"
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
-               AriaLabel=""Select a document to upload"" />
-
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
-               ShowRemoveButton RemoveUrl=""@RemoveUrl""
-               FileListAriaLabel=""Documents to upload""
-               AnnouncementProvider=""@AnnounceUploads"" />";
-    private readonly string example19CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private string RemoveUrl = ""/Remove"";
-
-private static string? AnnounceUploads(IReadOnlyList<BitFileInfo> files)
-{
-    var completed = files.Count(f => f.Status == BitFileUploadStatus.Completed);
-
-    return $""{files.Count} attachment(s), {completed} uploaded so far."";
-}";
-
-    private readonly string example20RazorCode = @"
-<BitChoiceGroup @bind-Value=""variant"" Horizontal TItem=""BitChoiceGroupOption<BitVariant>"" TValue=""BitVariant"">
-    <BitChoiceGroupOption Text=""Fill"" Value=""BitVariant.Fill"" />
-    <BitChoiceGroupOption Text=""Outline"" Value=""BitVariant.Outline"" />
-    <BitChoiceGroupOption Text=""Text"" Value=""BitVariant.Text"" />
-</BitChoiceGroup>
-
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Variant=""variant"" />
-
-<BitFileUpload Label=""Disabled"" UploadUrl=""@UploadUrl"" Variant=""variant"" IsEnabled=""false"" />";
-    private readonly string example20CsharpCode = @"
-private string UploadUrl = ""/Upload"";
-private BitVariant variant = BitVariant.Fill;";
-
-    private readonly string example21RazorCode = @"
+    private readonly string example18RazorCode = @"
 <BitFileUpload Label=""Add more attachments"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl""
                Multiple Append ShowPreview ShowRemoveButton
                PreloadedFiles=""@attachments""
@@ -2491,7 +2656,7 @@ Multiple Append ShowPreview ShowRemoveButton
                Description=""Remove an existing attachment or add new ones."" />
 
 <BitButton OnClick=""LoadAttachments"">Reload the record</BitButton>";
-    private readonly string example21CsharpCode = @"
+    private readonly string example18CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 
@@ -2523,7 +2688,42 @@ private void LoadAttachments()
 private IEnumerable<BitFileInfo> RemainingAttachments =>
     attachments?.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
 
-    private readonly string example22RazorCode = @"
+    private readonly string example19RazorCode = @"
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
+               AriaLabel=""Select a document to upload"" />
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
+               ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               FileListAriaLabel=""Documents to upload""
+               AnnouncementProvider=""@AnnounceUploads"" />";
+    private readonly string example19CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";
+
+private static string? AnnounceUploads(IReadOnlyList<BitFileInfo> files)
+{
+    var completed = files.Count(f => f.Status == BitFileUploadStatus.Completed);
+
+    return $""{files.Count} attachment(s), {completed} uploaded so far."";
+}";
+
+    private readonly string example20RazorCode = @"
+<BitChoiceGroup @bind-Value=""variant"" Horizontal TItem=""BitChoiceGroupOption<BitVariant>"" TValue=""BitVariant"">
+    <BitChoiceGroupOption Text=""Fill"" Value=""BitVariant.Fill"" />
+    <BitChoiceGroupOption Text=""Outline"" Value=""BitVariant.Outline"" />
+    <BitChoiceGroupOption Text=""Text"" Value=""BitVariant.Text"" />
+</BitChoiceGroup>
+
+<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Variant=""variant"" />
+
+<BitFileUpload Label=""Disabled"" UploadUrl=""@UploadUrl"" Variant=""variant"" IsEnabled=""false"" />
+
+<BitFileUpload Label=""Disabled drop area"" UploadUrl=""@UploadUrl"" ShowDropArea IsEnabled=""false"" />";
+    private readonly string example20CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+private BitVariant variant = BitVariant.Fill;";
+
+    private readonly string example21RazorCode = @"
 <BitParams Parameters=""@fileUploadParams"">
     <BitFileUpload Label=""Takes the endpoint, the limits and the look from the cascade"" />
 
@@ -2535,7 +2735,7 @@ private void LoadAttachments()
 
 
 <BitFileUpload Label=""Outside the cascade, and back to the defaults"" UploadUrl=""@UploadUrl"" />";
-    private readonly string example22CsharpCode = @"
+    private readonly string example21CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 
 private readonly BitFileUploadParams[] fileUploadParams =
@@ -2548,11 +2748,12 @@ private void LoadAttachments()
         ShowRemoveButton = true,
         MaxSize = 1024 * 1024 * 5,
         Variant = BitVariant.Outline,
+        LabelIconName = ""Upload"",
         Description = ""Up to 5 MB per file."",
     }
 ];";
 
-    private readonly string example23RazorCode = @"
+    private readonly string example22RazorCode = @"
 <BitFileUpload Label=""Primary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Primary"" />
 <BitFileUpload Label=""Secondary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Secondary"" />
 <BitFileUpload Label=""Tertiary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Tertiary"" />
@@ -2570,16 +2771,19 @@ private void LoadAttachments()
 <BitFileUpload Label=""TertiaryForeground"" UploadUrl=""@UploadUrl"" Color=""BitColor.TertiaryForeground"" />
 <BitFileUpload Label=""PrimaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.PrimaryBorder"" />
 <BitFileUpload Label=""SecondaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.SecondaryBorder"" />
-<BitFileUpload Label=""TertiaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.TertiaryBorder"" />";
-    private readonly string example23CsharpCode = @"
+<BitFileUpload Label=""TertiaryBorder"" UploadUrl=""@UploadUrl"" Color=""BitColor.TertiaryBorder"" />
+
+<BitFileUpload Label=""Drop files here"" UploadUrl=""@UploadUrl"" ShowDropArea Color=""BitColor.Success"" />";
+    private readonly string example22CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
 
-    private readonly string example24RazorCode = @"
+    private readonly string example23RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
 
 <div>FontAwesome:</div>
 <br />
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               LabelIcon=""@(""fa-solid fa-folder-open"")""
                UploadIcon=""@(""fa-solid fa-upload"")""
                PauseIcon=""@(""fa-solid fa-pause"")""
                RetryIcon=""@(""fa-solid fa-rotate-right"")""
@@ -2588,7 +2792,8 @@ private void LoadAttachments()
 
 <br /><br />
 
-<BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
+<BitFileUpload Label=""Drop files here"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" ShowDropArea
+               LabelIcon=""@BitIconInfo.Fa(""solid cloud-arrow-up"")""
                UploadIcon=""@BitIconInfo.Fa(""solid cloud-arrow-up"")""
                PauseIcon=""@BitIconInfo.Fa(""solid circle-pause"")""
                RetryIcon=""@BitIconInfo.Fa(""solid arrow-rotate-right"")""
@@ -2602,6 +2807,7 @@ private void LoadAttachments()
 <div>Bootstrap:</div>
 <br />
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               LabelIcon=""@(""bi bi-folder2-open"")""
                UploadIcon=""@(""bi bi-cloud-upload"")""
                PauseIcon=""@(""bi bi-pause-circle"")""
                RetryIcon=""@(""bi bi-arrow-clockwise"")""
@@ -2611,26 +2817,27 @@ private void LoadAttachments()
 <br /><br />
 
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl""
+               LabelIcon=""@BitIconInfo.Bi(""paperclip"")""
                UploadIcon=""@BitIconInfo.Bi(""cloud-arrow-up"")""
                PauseIcon=""@BitIconInfo.Bi(""pause-circle"")""
                RetryIcon=""@BitIconInfo.Bi(""arrow-repeat"")""
                CancelIcon=""@BitIconInfo.Bi(""x-circle"")""
                RemoveIcon=""@BitIconInfo.Bi(""trash"")"" />";
-    private readonly string example24CsharpCode = @"
+    private readonly string example23CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example25RazorCode = @"
-<BitFileUpload Label=""Small"" UploadUrl=""@UploadUrl"" Size=""BitSize.Small"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+    private readonly string example24RazorCode = @"
+<BitFileUpload Label=""Small"" UploadUrl=""@UploadUrl"" Size=""BitSize.Small"" LabelIconName=""Upload"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
-<BitFileUpload Label=""Medium"" UploadUrl=""@UploadUrl"" Size=""BitSize.Medium"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
+<BitFileUpload Label=""Medium"" UploadUrl=""@UploadUrl"" Size=""BitSize.Medium"" LabelIconName=""Upload"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 
-<BitFileUpload Label=""Large"" UploadUrl=""@UploadUrl"" Size=""BitSize.Large"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
-    private readonly string example25CsharpCode = @"
+<BitFileUpload Label=""Large"" UploadUrl=""@UploadUrl"" Size=""BitSize.Large"" LabelIconName=""Upload"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />";
+    private readonly string example24CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example26RazorCode = @"
+    private readonly string example25RazorCode = @"
 <style>
     .custom-class {
         padding: 0.5rem;
@@ -2676,9 +2883,10 @@ private void LoadAttachments()
 <BitFileUpload Label=""Classed file upload"" UploadUrl=""@UploadUrl"" Class=""custom-class"" />
 
 
-<BitFileUpload Label=""Styles"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" Styles=""@(new()
+<BitFileUpload Label=""Styles"" UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" LabelIconName=""Upload"" Styles=""@(new()
                {
                    Label = ""border-color: deeppink; background-color: deeppink; color: white;"",
+                   LabelIcon = ""color: yellow;"",
                    Dragging = ""background-color: lavenderblush;"",
                    FileName = ""color: deeppink;"",
                    ProgressBar = ""background-color: deeppink;""
@@ -2707,22 +2915,33 @@ private void LoadAttachments()
 <div class=""custom-vars"">
     <BitFileUpload Label=""Two uploaders under one ancestor that sets the variables""
                    UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
-    <BitFileUpload Label=""Neither of them declares anything of its own""
+    <BitFileUpload Label=""A drop area under the same ancestor"" ShowDropArea
                    UploadUrl=""@UploadUrl"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
 </div>";
+    private readonly string example25CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";";
 
-    private readonly string example27RazorCode = @"
+    private readonly string example26RazorCode = @"
 <div dir=""rtl"">
     <BitFileUpload Dir=""BitDir.Rtl""
                    Label=""انتخاب یا رها کردن فایل""
+                   LabelIconName=""Upload""
                    UploadUrl=""@UploadUrl""
                    ShowRemoveButton RemoveUrl=""@RemoveUrl""
+                   ShowBatchActions
                    FileListAriaLabel=""فایل‌های انتخاب‌شده""
                    UploadButtonTitle=""بارگذاری""
                    PauseButtonTitle=""توقف""
                    CancelButtonTitle=""لغو""
                    RemoveButtonTitle=""حذف""
+                   UploadAllText=""بارگذاری همه""
+                   CancelAllText=""لغو همه""
+                   ClearText=""پاک کردن""
                    SuccessfulUploadMessage=""بارگذاری فایل موفق بود""
                    FailedUploadMessage=""بارگذاری فایل شکست خورد"" />
 </div>";
+    private readonly string example26CsharpCode = @"
+private string UploadUrl = ""/Upload"";
+private string RemoveUrl = ""/Remove"";";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
index 27374217660..be3cd33477b 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.scss
@@ -35,13 +35,6 @@
     }
 }
 
-.dimensions-item {
-    gap: 1rem;
-    display: flex;
-    padding: 0.25rem 0;
-    justify-content: space-between;
-}
-
 // the public CSS variables inherit, so declaring them on any ancestor re-skins every file upload
 // underneath it - no ::deep and no selector reaching into the component is needed.
 .custom-vars {
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
index a5c4c7b3621..504e2babb82 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileUpload/BitFileUploadTests.cs
@@ -3198,9 +3198,44 @@ public void BitFileUploadShouldPassTheDropZoneSelectorToTheDragDropSetup()
         var invocation = Context.JSInterop.Invocations
                                 .Single(i => i.Identifier == "BitBlazorUI.FileUpload.setupDragDrop");
 
-        // the selector is the last argument of the setup, and it is what makes an element the app owns
-        // a drop zone of this component.
-        Assert.AreEqual("#zone", invocation.Arguments[^1]);
+        // the selector is what makes an element the app owns a drop zone of this component.
+        Assert.AreEqual("#zone", invocation.Arguments[7]);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldPassTheRejectStateToTheDragDropSetup()
+    {
+        RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.AllowedExtensions, ["image/*", "application/pdf"]);
+            parameters.Add(p => p.MaxCount, 3);
+            parameters.Add(p => p.Classes, new() { DraggingRejected = "nope" });
+            parameters.Add(p => p.Styles, new() { DraggingRejected = "color:red" });
+        });
+
+        var args = Context.JSInterop.Invocations
+                                    .Single(i => i.Identifier == "BitBlazorUI.FileUpload.setupDragDrop").Arguments;
+
+        Assert.AreEqual("bit-upl-drj nope", args[8]);
+        Assert.AreEqual("color:red", args[9]);
+        CollectionAssert.AreEqual(new[] { "image/*", "application/pdf" }, (string[])args[10]!);
+        Assert.AreEqual(3, args[11]);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldNotJudgeADragAgainstARuleWithExtensions()
+    {
+        RenderComponent<BitFileUpload>(parameters =>
+        {
+            // a dragged file shows its MIME type but not its name, so an extension cannot be checked mid-drag.
+            parameters.Add(p => p.AllowedExtensions, ["image/*", ".pdf"]);
+        });
+
+        var args = Context.JSInterop.Invocations
+                                    .Single(i => i.Identifier == "BitBlazorUI.FileUpload.setupDragDrop").Arguments;
+
+        Assert.IsNull(args[10]);
+        Assert.AreEqual(-1, args[11]);
     }
 
     [TestMethod]
@@ -3576,6 +3611,203 @@ public void BitFileUploadShouldAnnounceThePreloadedFilesApartFromTheSelectedOnes
         StringAssert.StartsWith(com.Find(".bit-upl-lvr").TextContent, "1 file selected. 1 already attached.");
     }
 
+    [TestMethod]
+    public void BitFileUploadShouldRenderNoLabelIconByDefault()
+    {
+        var com = RenderComponent<BitFileUpload>();
+
+        Assert.AreEqual(0, com.FindAll(".bit-upl-lic").Count);
+    }
+
+    [TestMethod]
+    [DataRow(null, false)]
+    [DataRow(BitIconPosition.Start, false)]
+    [DataRow(BitIconPosition.End, true)]
+    public void BitFileUploadShouldRenderTheLabelIcon(BitIconPosition? position, bool isEnd)
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.LabelIconName, "Upload");
+            parameters.Add(p => p.LabelIconPosition, position);
+            parameters.Add(p => p.Classes, new() { LabelIcon = "my-icon" });
+        });
+
+        var icon = com.Find(".bit-upl-lbl .bit-upl-lic");
+
+        Assert.IsTrue(icon.ClassList.Contains("bit-icon--Upload"));
+        Assert.IsTrue(icon.ClassList.Contains("my-icon"));
+        // the text beside it already names the button.
+        Assert.AreEqual("true", icon.GetAttribute("aria-hidden"));
+        Assert.AreEqual(isEnd, com.Find(".bit-upl").ClassList.Contains("bit-upl-eni"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldPreferTheExternalLabelIcon()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.LabelIcon, BitIconInfo.Fa("solid upload"));
+            parameters.Add(p => p.LabelIconName, "Upload");
+        });
+
+        var icon = com.Find(".bit-upl-lic");
+
+        Assert.IsTrue(icon.ClassList.Contains("fa-upload"));
+        Assert.IsFalse(icon.ClassList.Contains("bit-icon--Upload"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldRenderTheDropArea()
+    {
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.ShowDropArea, true);
+        });
+
+        Assert.IsTrue(com.Find(".bit-upl").ClassList.Contains("bit-upl-dra"));
+        // the drop area brings a glyph of its own when none is configured, and it is still the one button.
+        Assert.IsTrue(com.Find("button.bit-upl-lbl .bit-upl-lic").ClassList.Contains("bit-icon--CloudUpload"));
+
+        com.Render(parameters => parameters.Add(p => p.LabelIconName, "Add"));
+
+        Assert.IsTrue(com.Find(".bit-upl-lic").ClassList.Contains("bit-icon--Add"));
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldNotRenderTheBatchActionsByDefault()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>();
+
+        SelectFiles(com);
+
+        Assert.AreEqual(0, com.FindAll(".bit-upl-bat").Count);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldRenderTheBatchActionsOnlyWhenThereIsSomethingToActOn()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 },
+                    new() { Name = "b.txt", Size = 100, FileId = "2", Index = 1 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.ShowBatchActions, true);
+            parameters.Add(p => p.UploadAllText, "Send all");
+        });
+
+        // an empty list has nothing to act on.
+        Assert.AreEqual(0, com.FindAll(".bit-upl-bat").Count);
+
+        SelectFiles(com);
+
+        // the buttons keep their places, and the ones with nothing to do are only marked unavailable.
+        CollectionAssert.AreEqual(new[] { "Send all", "Cancel all", "Clear" },
+                                  com.FindAll(".bit-upl-bab").Select(b => b.TextContent.Trim()).ToArray());
+        CollectionAssert.AreEqual(new[] { false, true, false }, AriaDisabledStates(com));
+
+        com.FindAll(".bit-upl-bab")[0].Click();
+
+        // once everything is on its way only calling it off is left.
+        Assert.IsTrue(com.Instance.Files.All(f => f.Status == BitFileUploadStatus.InProgress));
+        CollectionAssert.AreEqual(new[] { true, false, true }, AriaDisabledStates(com));
+
+        // an unavailable button still takes the click, and does nothing with it.
+        com.FindAll(".bit-upl-bab")[2].Click();
+        Assert.AreEqual(2, com.Instance.Files.Count);
+
+        com.FindAll(".bit-upl-bab")[1].Click();
+
+        Assert.IsTrue(com.Instance.Files.All(f => f.Status == BitFileUploadStatus.Canceled));
+        // a canceled file can be retried, and a settled list cleared.
+        CollectionAssert.AreEqual(new[] { false, true, false }, AriaDisabledStates(com));
+
+        com.FindAll(".bit-upl-bab")[2].Click();
+
+        Assert.AreEqual(0, com.Instance.Files.Count);
+        Assert.AreEqual(0, com.FindAll(".bit-upl-bat").Count);
+
+        static bool[] AriaDisabledStates(IRenderedComponent<BitFileUpload> com)
+            => com.FindAll(".bit-upl-bab").Select(b => b.GetAttribute("aria-disabled") == "true").ToArray();
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldNotOfferUploadAllWhenAutoUploading()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.ShowBatchActions, true);
+            parameters.Add(p => p.AutoUpload, true);
+        });
+
+        SelectFiles(com);
+
+        // the selection already means upload, so there is no button to ask for it.
+        var buttons = com.FindAll(".bit-upl-bab").Select(b => b.TextContent.Trim()).ToArray();
+        CollectionAssert.AreEqual(new[] { "Cancel all", "Clear" }, buttons);
+    }
+
+    [TestMethod]
+    public void BitFileUploadShouldDisableTheBatchActionsWhenDisabled()
+    {
+        SetupFiles([new() { Name = "a.txt", Size = 100, FileId = "1", Index = 0 }]);
+
+        var com = RenderComponent<BitFileUpload>(parameters =>
+        {
+            parameters.Add(p => p.ShowBatchActions, true);
+        });
+
+        SelectFiles(com);
+
+        com.Render(parameters => parameters.Add(p => p.IsEnabled, false));
+
+        Assert.IsTrue(com.FindAll(".bit-upl-bab").All(b => b.HasAttribute("disabled")));
+    }
+
+    [TestMethod]
+    public void BitFileUploadParamsShouldCascadeTheNewParameters()
+    {
+        var bitParams = new BitFileUploadParams
+        {
+            ShowDropArea = true,
+            ShowBatchActions = true,
+            LabelIconName = "Add",
+            LabelIconPosition = BitIconPosition.End,
+            UploadAllText = "U",
+            CancelAllText = "C",
+            ClearText = "X",
+        };
+
+        var com = RenderComponent<BitParams>(parameters =>
+        {
+            parameters.Add(p => p.Parameters, new List<IBitComponentParams> { bitParams });
+            parameters.AddChildContent(builder =>
+            {
+                builder.OpenComponent<BitFileUpload>(0);
+                builder.AddAttribute(1, nameof(BitFileUpload.ClearText), "Own");
+                builder.CloseComponent();
+            });
+        });
+
+        var upload = com.FindComponent<BitFileUpload>().Instance;
+
+        Assert.IsTrue(upload.ShowDropArea);
+        Assert.IsTrue(upload.ShowBatchActions);
+        Assert.AreEqual("Add", upload.LabelIconName);
+        Assert.AreEqual(BitIconPosition.End, upload.LabelIconPosition);
+        Assert.AreEqual("U", upload.UploadAllText);
+        Assert.AreEqual("C", upload.CancelAllText);
+        // what the component sets for itself wins over the cascade.
+        Assert.AreEqual("Own", upload.ClearText);
+
+        var root = com.Find(".bit-upl");
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-dra"));
+        Assert.IsTrue(root.ClassList.Contains("bit-upl-eni"));
+    }
+
     private void SetupFiles(BitFileInfo[] files)
     {
         Context.JSInterop.Setup<BitFileInfo[]>("BitBlazorUI.FileUpload.setup", _ => true).SetResult(files);

From ae8bd701c0331b2af304067e6ff5f5240bc103a2 Mon Sep 17 00:00:00 2001
From: msynk <msynk@outlook.com>
Date: Thu, 24 Sep 2026 22:05:34 +0330
Subject: [PATCH 8/8] fix demo

---
 .../Inputs/FileUpload/BitFileUploadDemo.razor |  48 ++--
 .../FileUpload/BitFileUploadDemo.razor.cs     | 205 ++++++++++++++++++
 2 files changed, 229 insertions(+), 24 deletions(-)

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
index d83f0f9b07c..b80201e759a 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
@@ -14,7 +14,7 @@
           CssVariables="componentCssVariables"
           GitHubUrl="Inputs/FileUpload/BitFileUpload.razor"
           GitHubDemoUrl="Inputs/FileUpload/BitFileUploadDemo.razor">
-    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
+    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" CodeFiles="@example1CodeFiles" Id="example1">
         <div>
             Browse, drop a file on the component, or paste one while it has the focus. Each file gets an item with
             an upload button that sends it to the <b>UploadUrl</b>, then a progress bar with pause and cancel, and
@@ -24,7 +24,7 @@
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" />
     </DemoExample>
 
-    <DemoExample Title="Label & description" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" Id="example2">
+    <DemoExample Title="Label & description" RazorCode="@example2RazorCode" CsharpCode="@example2CsharpCode" CodeFiles="@example2CodeFiles" Id="example2">
         <div>
             <b>LabelIconName</b> (or <b>LabelIcon</b> for an external library) adds an icon to the browse button,
             placed by <b>LabelIconPosition</b>. <b>Description</b> - or <b>DescriptionTemplate</b> for markup - puts
@@ -78,7 +78,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Removable" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
+    <DemoExample Title="Removable" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" CodeFiles="@example4CodeFiles" Id="example4">
         <div>
             <b>ShowRemoveButton</b> adds a remove button to each settled item. A file that never reached the server is
             just dropped; an uploaded one is deleted through a DELETE to the <b>RemoveUrl</b> (name in the query
@@ -89,7 +89,7 @@
                        ShowRemoveButton RemoveUrl="@RemoveUrl" />
     </DemoExample>
 
-    <DemoExample Title="Selection behavior" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <DemoExample Title="Selection behavior" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" CodeFiles="@example5CodeFiles" Id="example5">
         <div>
             <b>Multiple</b> takes several files at once, <b>AutoUpload</b> sends them as soon as they arrive,
             <b>Append</b> adds a new selection to the list instead of replacing it, and <b>AutoReset</b> empties the
@@ -110,7 +110,7 @@
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@UploadUrl" AutoReset />
     </DemoExample>
 
-    <DemoExample Title="Validation" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
+    <DemoExample Title="Validation" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" CodeFiles="@example6CodeFiles" Id="example6">
         <div>
             Rules run when a file arrives, however it arrives; a rejected file stays in the list with its reason and is
             never sent. <b>MaxSize</b> / <b>MinSize</b> bound each file, <b>MaxTotalSize</b> and <b>MaxCount</b> the
@@ -147,7 +147,7 @@
                        Description="Accept only: the dialog filters, a dropped file of any type is still taken." />
     </DemoExample>
 
-    <DemoExample Title="Directory & Capture" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
+    <DemoExample Title="Directory & Capture" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" CodeFiles="@example7CodeFiles" Id="example7">
         <div>
             <b>Directory</b> picks - or accepts a drop of - a whole folder, subfolders included, with every file still
             validated. <b>Capture</b> opens the camera on a mobile device: <b>"user"</b> for the front one,
@@ -164,7 +164,7 @@
                        Description="Opens the front camera on a mobile device." />
     </DemoExample>
 
-    <DemoExample Title="Preview & image dimensions" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <DemoExample Title="Preview & image dimensions" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" CodeFiles="@example8CodeFiles" Id="example8">
         <div>
             <b>ShowPreview</b> shows a thumbnail of each image, made in the browser and released on removal, and a
             type glyph for anything else. <b>ReadImageDimensions</b> fills <b>Width</b> / <b>Height</b> before
@@ -180,7 +180,7 @@
                        Description="Images between 200x200 and 4000x4000 pixels." />
     </DemoExample>
 
-    <DemoExample Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <DemoExample Title="Events" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" CodeFiles="@example9CodeFiles" Id="example9">
         <div>
             <b>OnChange</b>, <b>OnInvalid</b>, <b>OnUploading</b> (set per-file headers here), <b>OnProgress</b>,
             <b>OnUploadComplete</b> / <b>OnUploadFailed</b>, <b>OnRemoveComplete</b> / <b>OnRemoveFailed</b> and
@@ -199,7 +199,7 @@
         <div>@onUploadFailedText</div>
     </DemoExample>
 
-    <DemoExample Title="Chunked" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <DemoExample Title="Chunked" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" CodeFiles="@example10CodeFiles" Id="example10">
         <div>
             <b>ChunkedUpload</b> sends each file as a series of requests, so a pause or a failure resumes from the last
             chunk. <b>ChunkSize</b> fixes the slice; <b>AutoChunkSize</b> adapts it to the connection (512 KB - 10 MB).
@@ -214,7 +214,7 @@
         <BitFileUpload Label="Select or drag and drop files" UploadUrl="@ChunkedUploadUrl" ChunkedUpload AutoChunkSize />
     </DemoExample>
 
-    <DemoExample Title="Http requests" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
+    <DemoExample Title="Http requests" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" CodeFiles="@example11CodeFiles" Id="example11">
         <div>
             Headers, query strings and extra form fields for the upload and remove requests are fixed at selection
             time.
@@ -275,7 +275,7 @@
                        RetryButtonTitle="Try again" />
     </DemoExample>
 
-    <DemoExample Title="ConcurrentUploads" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <DemoExample Title="ConcurrentUploads" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" CodeFiles="@example13CodeFiles" Id="example13">
         <div>
             <b>ConcurrentUploads</b> caps how many files are on the wire at once; the rest wait in order, show the
             <b>QueuedUploadMessage</b> and can be canceled before their turn. 0 (the default) starts them all.
@@ -287,7 +287,7 @@
                        ConcurrentUploads="1" QueuedUploadMessage="In the queue…" />
     </DemoExample>
 
-    <DemoExample Title="Batch actions" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" Id="example14">
+    <DemoExample Title="Batch actions" RazorCode="@example14RazorCode" CsharpCode="@example14CsharpCode" CodeFiles="@example14CodeFiles" Id="example14">
         <div>
             <b>ShowBatchActions</b> adds <b>Upload all</b>, <b>Cancel all</b> and <b>Clear</b> buttons under the
             list. They keep their places as uploads settle - an idle one is only marked unavailable - so keyboard
@@ -303,7 +303,7 @@
                        UploadAllText="Send everything" CancelAllText="Stop everything" ClearText="Start over" />
     </DemoExample>
 
-    <DemoExample Title="Progress & file list" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
+    <DemoExample Title="Progress & file list" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" CodeFiles="@example15CodeFiles" Id="example15">
         <div>
             <b>OverallUploadProgress</b>, <b>TotalUploadSpeed</b> and <b>OverallRemainingTime</b> summarize the batch,
             and each file has its own <b>UploadSpeed</b> and <b>RemainingTime</b> (null while not on the wire). Re-read
@@ -358,7 +358,7 @@
         }
     </DemoExample>
 
-    <DemoExample Title="Templates" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" Id="example16">
+    <DemoExample Title="Templates" RazorCode="@example16RazorCode" CsharpCode="@example16CsharpCode" CodeFiles="@example16CodeFiles" Id="example16">
         <div>
             <b>LabelTemplate</b> replaces the browse button - and its drop indicator, so bring your own through
             <b>Classes.Dragging</b> - and <b>FileViewTemplate</b> replaces each item, with the <b>BitFileInfo</b> as
@@ -445,7 +445,7 @@
         <BitButton OnClick="HandleUploadOnClick">Upload</BitButton>
     </DemoExample>
 
-    <DemoExample Title="Public API" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" Id="example17">
+    <DemoExample Title="Public API" RazorCode="@example17RazorCode" CsharpCode="@example17CsharpCode" CodeFiles="@example17CodeFiles" Id="example17">
         <div>
             <b>Browse</b>, <b>Upload</b>, <b>PauseUpload</b>, <b>CancelUpload</b>, <b>RemoveFile</b> and <b>Reset</b>
             drive the component from code, each on one file or - with no argument - on all of them. Pause keeps the
@@ -466,7 +466,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Preloaded files" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" Id="example18">
+    <DemoExample Title="Preloaded files" RazorCode="@example18RazorCode" CsharpCode="@example18CsharpCode" CodeFiles="@example18CodeFiles" Id="example18">
         <div>
             <b>PreloadedFiles</b> lists the files a record already has on the server. They are never uploaded, show
             the <b>PreloadedFileMessage</b>, count towards <b>MaxCount</b> / <b>MaxTotalSize</b>, survive
@@ -483,7 +483,7 @@
         <BitButton OnClick="LoadAttachments">Reload the record</BitButton>
     </DemoExample>
 
-    <DemoExample Title="Accessibility" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" Id="example19">
+    <DemoExample Title="Accessibility" RazorCode="@example19RazorCode" CsharpCode="@example19CsharpCode" CodeFiles="@example19CodeFiles" Id="example19">
         <div>
             Every control is a real button with a visible focus ring, and each item action is labelled with its file
             name. The list is named by <b>FileListAriaLabel</b>, progress bars expose their value, and a live region
@@ -500,7 +500,7 @@
                        AnnouncementProvider="@AnnounceUploads" />
     </DemoExample>
 
-    <DemoExample Title="Variant" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" Id="example20">
+    <DemoExample Title="Variant" RazorCode="@example20RazorCode" CsharpCode="@example20CsharpCode" CodeFiles="@example20CodeFiles" Id="example20">
         <div>
             <b>Variant</b> sets how much of the <BitLink Href="#example22">Color</BitLink> the browse button carries:
             <b>Fill</b> (default), <b>Outline</b> or <b>Text</b>. Disabled, every variant takes the neutral disabled look.
@@ -519,7 +519,7 @@
         <BitFileUpload Label="Disabled drop area" UploadUrl="@UploadUrl" ShowDropArea IsEnabled="false" />
     </DemoExample>
 
-    <DemoExample Title="Cascading parameters" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" Id="example21">
+    <DemoExample Title="Cascading parameters" RazorCode="@example21RazorCode" CsharpCode="@example21CsharpCode" CodeFiles="@example21CodeFiles" Id="example21">
         <div>
             <b>BitParams</b> hands a <b>BitFileUploadParams</b> to every file upload under it as defaults: a parameter
             an uploader sets itself wins, everything it leaves unset comes from the cascade.
@@ -539,7 +539,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" Id="example22">
+    <DemoExample Title="Color" RazorCode="@example22RazorCode" CsharpCode="@example22CsharpCode" CodeFiles="@example22CodeFiles" Id="example22">
         <div>
             <b>Color</b> drives the browse button, the drop indicator, the progress bars, the hovered actions and the
             focus rings together.
@@ -575,7 +575,7 @@
         <BitFileUpload Label="Drop files here" UploadUrl="@UploadUrl" ShowDropArea Color="BitColor.Success" />
     </DemoExample>
 
-    <DemoExample Title="External Icons" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" Id="example23">
+    <DemoExample Title="External Icons" RazorCode="@example23RazorCode" CsharpCode="@example23CsharpCode" CodeFiles="@example23CodeFiles" Id="example23">
         <div>
             <b>LabelIcon</b>, <b>UploadIcon</b>, <b>RetryIcon</b>, <b>PauseIcon</b>, <b>CancelIcon</b> and
             <b>RemoveIcon</b> take a <BitLink Href="#bit-icon-info">BitIconInfo</BitLink> or a raw class string from
@@ -630,7 +630,7 @@
                        RemoveIcon="@BitIconInfo.Bi("trash")" />
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" Id="example24">
+    <DemoExample Title="Size" RazorCode="@example24RazorCode" CsharpCode="@example24CsharpCode" CodeFiles="@example24CodeFiles" Id="example24">
         <div>
             <b>Size</b> scales the browse button, the items, the action buttons, the icons and the thumbnails together;
             <b>Medium</b> is the default.
@@ -643,7 +643,7 @@
         <BitFileUpload Label="Large" UploadUrl="@UploadUrl" Size="BitSize.Large" LabelIconName="Upload" ShowRemoveButton RemoveUrl="@RemoveUrl" />
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" Id="example25">
+    <DemoExample Title="Style & Class" RazorCode="@example25RazorCode" CsharpCode="@example25CsharpCode" CodeFiles="@example25CodeFiles" Id="example25">
         <div>
             <b>Style</b> and <b>Class</b> land on the root; <b>Styles</b> and <b>Classes</b> reach every part, and
             their <b>Dragging</b> / <b>DraggingRejected</b> entries apply only during a drag.
@@ -701,7 +701,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" Id="example26">
+    <DemoExample Title="RTL" RazorCode="@example26RazorCode" CsharpCode="@example26CsharpCode" CodeFiles="@example26CodeFiles" Id="example26">
         <div>
             <b>Dir="BitDir.Rtl"</b> mirrors the whole layout; the localizable texts complete it.
         </div>
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
index 9d1cb960cc6..c2b6b0e3c2e 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
@@ -2037,10 +2037,112 @@ private async Task HandleBrowseFileOnClick()
 
 
 
+    // The server half of the samples. The component only sends the files; an endpoint has to store them, so
+    // every example carries the ASP.NET Core controller it talks to, cut down to the endpoints its own markup
+    // calls. The pieces below are put together per example: a header, the endpoints, and the shared footer.
+    private const string serverControllerHeader = @"
+using Microsoft.AspNetCore.Mvc;
+
+// registered with builder.Services.AddControllers() and app.MapControllers() in Program.cs.
+[ApiController]
+public class FileUploadController(IWebHostEnvironment env) : ControllerBase
+{";
+
+    private const string serverControllerCorsHeader = @"
+using Microsoft.AspNetCore.Mvc;
+
+// registered with builder.Services.AddControllers() and app.MapControllers() in Program.cs.
+// WithCredentials only matters when these endpoints live on another origin than the app: the CORS policy
+// then has to name that origin (WithOrigins) and AllowCredentials(), since a wildcard origin is refused
+// for a request that carries credentials.
+[ApiController]
+public class FileUploadController(IWebHostEnvironment env) : ControllerBase
+{";
+
+    private const string serverUploadEndpoint = @"
+    // one request per file: its content in the ""file"" form field (see UploadFormFieldName) and the id
+    // the component gave it in the BIT_FILE_ID header.
+    [HttpPost(""/Upload"")]
+    [RequestSizeLimit(100 * 1024 * 1024)] // Kestrel refuses a body over 30 MB unless told otherwise
+    public async Task<IActionResult> Upload(IFormFile file,
+                                            [FromHeader(Name = ""BIT_FILE_ID"")] string fileId,
+                                            CancellationToken cancellationToken)
+    {
+        await using var target = System.IO.File.Create(GetFilePath(fileId, file.FileName));
+        await file.CopyToAsync(target, cancellationToken);
+
+        return Ok();
+    }
+";
+
+    private const string serverChunkedUploadEndpoint = @"
+    // one request per chunk, each saying where it belongs: BIT_CHUNK_FROM is its first byte (the same
+    // range is also in the standard Content-Range header). Writing it there rather than appending it is
+    // what keeps a chunk sent again by a retry or a resume from being stored twice.
+    [HttpPost(""/ChunkedUpload"")]
+    [RequestSizeLimit(11 * 1024 * 1024)] // AutoChunkSize never picks a chunk over 10 MB
+    public async Task<IActionResult> ChunkedUpload(IFormFile file,
+                                                   [FromHeader(Name = ""BIT_FILE_ID"")] string fileId,
+                                                   [FromHeader(Name = ""BIT_CHUNK_FROM"")] long chunkFrom,
+                                                   CancellationToken cancellationToken)
+    {
+        // the first chunk starts the file over, dropping whatever an earlier attempt left behind.
+        var mode = chunkFrom == 0 ? FileMode.Create : FileMode.OpenOrCreate;
+
+        await using var target = new FileStream(GetFilePath(fileId, file.FileName), mode, FileAccess.Write);
+        target.Seek(chunkFrom, SeekOrigin.Begin);
+        await file.CopyToAsync(target, cancellationToken);
+
+        return Ok();
+    }
+";
+
+    private const string serverRemoveEndpoint = @"
+    // the name comes in the query string, the id in the BIT_FILE_ID header. A delete is idempotent: a file
+    // that is not there is already in the state asked for, and a 404 would show up as a failed removal.
+    [HttpDelete(""/Remove"")]
+    public IActionResult Remove([FromQuery] string fileName,
+                                [FromHeader(Name = ""BIT_FILE_ID"")] string fileId)
+    {
+        System.IO.File.Delete(GetFilePath(fileId, fileName));
+
+        return Ok();
+    }
+";
+
+    private const string serverControllerFooter = @"
+    // a file is stored under its id and its name, since those two are all a remove request carries - and
+    // the id keeps two files of the same name apart. Both come from the client, so only their file-name
+    // part is ever used, never a path of their own.
+    private string GetFilePath(string fileId, string fileName)
+    {
+        var folder = Path.Combine(env.ContentRootPath, ""Uploads"");
+        Directory.CreateDirectory(folder);
+
+        return Path.Combine(folder, $""{Path.GetFileName(fileId)}-{Path.GetFileName(fileName)}"");
+    }
+}";
+
+    private const string serverControllerName = "FileUploadController.cs";
+
+    // One DemoCodeFile per controller rather than one per example that shows it, so the examples
+    // calling the same endpoints share the same reference.
+    private static readonly DemoCodeFile uploadServerFile =
+        new(serverControllerName, serverControllerHeader + serverUploadEndpoint + serverControllerFooter);
+    private static readonly DemoCodeFile uploadRemoveServerFile =
+        new(serverControllerName, serverControllerHeader + serverUploadEndpoint + serverRemoveEndpoint + serverControllerFooter);
+    private static readonly DemoCodeFile chunkedServerFile =
+        new(serverControllerName, serverControllerHeader + serverChunkedUploadEndpoint + serverControllerFooter);
+    private static readonly DemoCodeFile uploadChunkedRemoveServerFile =
+        new(serverControllerName, serverControllerHeader + serverUploadEndpoint + serverChunkedUploadEndpoint + serverRemoveEndpoint + serverControllerFooter);
+
+
+
     private readonly string example1RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" />";
     private readonly string example1CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
+    private readonly DemoCodeFile[] example1CodeFiles = [uploadServerFile];
 
     private readonly string example2RazorCode = @"
 <BitFileUpload Label=""Upload a document"" UploadUrl=""@UploadUrl"" LabelIconName=""Upload""
@@ -2056,6 +2158,7 @@ private async Task HandleBrowseFileOnClick()
 </BitFileUpload>";
     private readonly string example2CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
+    private readonly DemoCodeFile[] example2CodeFiles = [uploadServerFile];
 
     private readonly string example3RazorCode = @"
 <BitFileUpload Label=""Drag and drop files here, or click to browse"" UploadUrl=""@UploadUrl"" ShowDropArea Multiple
@@ -2099,6 +2202,7 @@ private async Task HandleBrowseFileOnClick()
     private readonly DemoCodeFile[] example3CodeFiles =
     [
         new("BitFileUploadDemo.razor.scss", example3ScssCode),
+        uploadServerFile,
     ];
 
     private readonly string example4RazorCode = @"
@@ -2107,6 +2211,7 @@ private async Task HandleBrowseFileOnClick()
     private readonly string example4CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
+    private readonly DemoCodeFile[] example4CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example5RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple AutoUpload />
@@ -2118,6 +2223,7 @@ private async Task HandleBrowseFileOnClick()
     private readonly string example5CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
+    private readonly DemoCodeFile[] example5CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example6RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" MaxSize=""1024 * 1024 * 1""
@@ -2149,6 +2255,7 @@ private async Task HandleBrowseFileOnClick()
 {
     return file.Size == 0 ? ""Empty files cannot be uploaded."" : null;
 }";
+    private readonly DemoCodeFile[] example6CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example7RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop a folder"" UploadUrl=""@UploadUrl"" Directory Multiple
@@ -2161,6 +2268,7 @@ private async Task HandleBrowseFileOnClick()
                Description=""Opens the front camera on a mobile device."" />";
     private readonly string example7CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
+    private readonly DemoCodeFile[] example7CodeFiles = [uploadServerFile];
 
     private readonly string example8RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple ShowPreview
@@ -2186,6 +2294,7 @@ private async Task HandleBrowseFileOnClick()
 
     return null;
 }";
+    private readonly DemoCodeFile[] example8CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example9RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple MaxSize=""1024 * 1024 * 1""
@@ -2202,6 +2311,28 @@ private async Task HandleBrowseFileOnClick()
 private string onInvalidText = string.Empty;
 private string onUploadFailedText = string.Empty;
 private string onAllUploadsCompleteText = ""No File"";";
+    private const string example9UploadEndpoint = @"
+    // key1 is the header OnUploading set on this one file. Whatever the endpoint answers becomes the
+    // Message of the file, and its status code the ResponseStatus that OnUploadFailed reports.
+    [HttpPost(""/Upload"")]
+    [RequestSizeLimit(100 * 1024 * 1024)] // Kestrel refuses a body over 30 MB unless told otherwise
+    public async Task<IActionResult> Upload(IFormFile file,
+                                            [FromHeader(Name = ""BIT_FILE_ID"")] string fileId,
+                                            [FromHeader(Name = ""key1"")] string? key1,
+                                            CancellationToken cancellationToken)
+    {
+        if (key1 is null) return BadRequest(""The key1 header is missing."");
+
+        await using var target = System.IO.File.Create(GetFilePath(fileId, file.FileName));
+        await file.CopyToAsync(target, cancellationToken);
+
+        return Ok($""{file.FileName} stored with key1 = {key1}."");
+    }
+";
+    private readonly DemoCodeFile[] example9CodeFiles =
+    [
+        new(serverControllerName, serverControllerHeader + example9UploadEndpoint + serverControllerFooter),
+    ];
 
     private readonly string example10RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload />
@@ -2209,6 +2340,7 @@ private async Task HandleBrowseFileOnClick()
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@ChunkedUploadUrl"" ChunkedUpload AutoChunkSize />";
     private readonly string example10CsharpCode = @"
 private string ChunkedUploadUrl = ""/ChunkedUpload"";";
+    private readonly DemoCodeFile[] example10CodeFiles = [chunkedServerFile];
 
     private readonly string example11RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl"" ShowRemoveButton
@@ -2245,6 +2377,64 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
 
     return Task.FromResult(new Dictionary<string, string> { { ""Authorization"", $""Bearer token-{tokenRequestCount}"" } });
 }";
+    private const string example11Endpoints = @"
+    // the extras of the upload request arrive like those of any other request: qs1 in the query string
+    // (UploadRequestQueryStrings), header1 as a header (UploadRequestHttpHeaders), and folder as a form
+    // field beside the file (UploadRequestFormFields).
+    [HttpPost(""/Upload"")]
+    [RequestSizeLimit(100 * 1024 * 1024)] // Kestrel refuses a body over 30 MB unless told otherwise
+    public async Task<IActionResult> Upload(IFormFile file,
+                                            [FromHeader(Name = ""BIT_FILE_ID"")] string fileId,
+                                            [FromQuery] string? qs1,
+                                            [FromHeader(Name = ""header1"")] string? header1,
+                                            [FromForm] string? folder,
+                                            CancellationToken cancellationToken)
+    {
+        await using var target = System.IO.File.Create(GetFilePath(fileId, file.FileName));
+        await file.CopyToAsync(target, cancellationToken);
+
+        return Ok($""qs1 = {qs1}, header1 = {header1}, folder = {folder}"");
+    }
+
+    // UploadRequestHttpHeadersProvider runs before every chunk, so each one arrives with a fresh token.
+    // In a real app the authentication middleware validates it and the action carries [Authorize].
+    [HttpPost(""/ChunkedUpload"")]
+    [RequestSizeLimit(11 * 1024 * 1024)] // AutoChunkSize never picks a chunk over 10 MB
+    public async Task<IActionResult> ChunkedUpload(IFormFile file,
+                                                   [FromHeader(Name = ""BIT_FILE_ID"")] string fileId,
+                                                   [FromHeader(Name = ""BIT_CHUNK_FROM"")] long chunkFrom,
+                                                   [FromHeader(Name = ""Authorization"")] string? authorization,
+                                                   CancellationToken cancellationToken)
+    {
+        if (authorization?.StartsWith(""Bearer "") is not true) return Unauthorized();
+
+        // the first chunk starts the file over, dropping whatever an earlier attempt left behind.
+        var mode = chunkFrom == 0 ? FileMode.Create : FileMode.OpenOrCreate;
+
+        await using var target = new FileStream(GetFilePath(fileId, file.FileName), mode, FileAccess.Write);
+        target.Seek(chunkFrom, SeekOrigin.Begin);
+        await file.CopyToAsync(target, cancellationToken);
+
+        return Ok();
+    }
+
+    // qs2 (RemoveRequestQueryStrings) comes beside the fileName the component adds itself, and header2
+    // (RemoveRequestHttpHeaders) beside BIT_FILE_ID.
+    [HttpDelete(""/Remove"")]
+    public IActionResult Remove([FromQuery] string fileName,
+                                [FromHeader(Name = ""BIT_FILE_ID"")] string fileId,
+                                [FromQuery] string? qs2,
+                                [FromHeader(Name = ""header2"")] string? header2)
+    {
+        System.IO.File.Delete(GetFilePath(fileId, fileName));
+
+        return Ok();
+    }
+";
+    private readonly DemoCodeFile[] example11CodeFiles =
+    [
+        new(serverControllerName, serverControllerCorsHeader + example11Endpoints + serverControllerFooter),
+    ];
 
     private readonly string example12RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@NonExistingUploadUrl""
@@ -2257,6 +2447,7 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
                AutoRetryDelayProvider=""@BackOff""
                RetryButtonTitle=""Try again"" />";
     private readonly string example12CsharpCode = @"
+// an endpoint the server does not map, so every upload fails with a 404.
 private string NonExistingUploadUrl = ""/MissingUploadEndpoint"";
 
 // 1s, 2s, 4s, ... with a little jitter, so a batch that failed together does not come back together.
@@ -2272,6 +2463,7 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
                ConcurrentUploads=""1"" QueuedUploadMessage=""In the queue…"" />";
     private readonly string example13CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
+    private readonly DemoCodeFile[] example13CodeFiles = [uploadServerFile];
 
     private readonly string example14RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple Append
@@ -2284,6 +2476,7 @@ private Task<Dictionary<string, string>> GetFreshAuthHeaders()
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";
 private string ChunkedUploadUrl = ""/ChunkedUpload"";";
+    private readonly DemoCodeFile[] example14CodeFiles = [uploadChunkedRemoveServerFile];
 
     private readonly string example15RazorCode = @"
 <BitFileUpload @ref=""speedFileUpload"" Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl"" Multiple
@@ -2340,6 +2533,7 @@ Multiple AutoUpload HideFileView
 // so the summary is read back from the Files property instead of from the argument.
 private IEnumerable<BitFileInfo> HiddenViewFiles =>
     hiddenViewFileUpload?.Files.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
+    private readonly DemoCodeFile[] example15CodeFiles = [uploadServerFile];
 
     private readonly string example16RazorCode = @"
 <style>
@@ -2627,6 +2821,7 @@ private static string GetFileUploadSize(BitFileInfo file)
     BitFileUploadStatus.NotAllowed => file.Message ?? bitFileUpload.NotAllowedExtensionErrorMessage,
     _ => string.Empty,
 };";
+    private readonly DemoCodeFile[] example16CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example17RazorCode = @"
 <BitFileUpload @ref=""bitFileUploadWithBrowseFile"" HideLabel Multiple
@@ -2647,6 +2842,7 @@ private async Task HandleBrowseFileOnClick()
 {
     await bitFileUploadWithBrowseFile.Browse();
 }";
+    private readonly DemoCodeFile[] example17CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example18RazorCode = @"
 <BitFileUpload Label=""Add more attachments"" UploadUrl=""@UploadUrl"" RemoveUrl=""@RemoveUrl""
@@ -2687,6 +2883,7 @@ private void LoadAttachments()
 // what to save: the ones the user deleted have come back marked as removed.
 private IEnumerable<BitFileInfo> RemainingAttachments =>
     attachments?.Where(f => f.Status != BitFileUploadStatus.Removed) ?? [];";
+    private readonly DemoCodeFile[] example18CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example19RazorCode = @"
 <BitFileUpload Label=""Select or drag and drop files"" UploadUrl=""@UploadUrl""
@@ -2706,6 +2903,7 @@ private void LoadAttachments()
 
     return $""{files.Count} attachment(s), {completed} uploaded so far."";
 }";
+    private readonly DemoCodeFile[] example19CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example20RazorCode = @"
 <BitChoiceGroup @bind-Value=""variant"" Horizontal TItem=""BitChoiceGroupOption<BitVariant>"" TValue=""BitVariant"">
@@ -2722,6 +2920,7 @@ private void LoadAttachments()
     private readonly string example20CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private BitVariant variant = BitVariant.Fill;";
+    private readonly DemoCodeFile[] example20CodeFiles = [uploadServerFile];
 
     private readonly string example21RazorCode = @"
 <BitParams Parameters=""@fileUploadParams"">
@@ -2752,6 +2951,7 @@ private void LoadAttachments()
         Description = ""Up to 5 MB per file."",
     }
 ];";
+    private readonly DemoCodeFile[] example21CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example22RazorCode = @"
 <BitFileUpload Label=""Primary"" UploadUrl=""@UploadUrl"" Color=""BitColor.Primary"" />
@@ -2776,6 +2976,7 @@ private void LoadAttachments()
 <BitFileUpload Label=""Drop files here"" UploadUrl=""@UploadUrl"" ShowDropArea Color=""BitColor.Success"" />";
     private readonly string example22CsharpCode = @"
 private string UploadUrl = ""/Upload"";";
+    private readonly DemoCodeFile[] example22CodeFiles = [uploadServerFile];
 
     private readonly string example23RazorCode = @"
 <link rel=""stylesheet"" href=""https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"" />
@@ -2826,6 +3027,7 @@ private void LoadAttachments()
     private readonly string example23CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
+    private readonly DemoCodeFile[] example23CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example24RazorCode = @"
 <BitFileUpload Label=""Small"" UploadUrl=""@UploadUrl"" Size=""BitSize.Small"" LabelIconName=""Upload"" ShowRemoveButton RemoveUrl=""@RemoveUrl"" />
@@ -2836,6 +3038,7 @@ private void LoadAttachments()
     private readonly string example24CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
+    private readonly DemoCodeFile[] example24CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example25RazorCode = @"
 <style>
@@ -2921,6 +3124,7 @@ private void LoadAttachments()
     private readonly string example25CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
+    private readonly DemoCodeFile[] example25CodeFiles = [uploadRemoveServerFile];
 
     private readonly string example26RazorCode = @"
 <div dir=""rtl"">
@@ -2944,4 +3148,5 @@ private void LoadAttachments()
     private readonly string example26CsharpCode = @"
 private string UploadUrl = ""/Upload"";
 private string RemoveUrl = ""/Remove"";";
+    private readonly DemoCodeFile[] example26CodeFiles = [uploadRemoveServerFile];
 }