@foreach (var file in Files)
{
if (FileViewTemplate is not null)
@@ -68,45 +93,83 @@
}
else
{
+ var folder = GetFolder(file);
+
eventsLog = [];
@@ -216,232 +238,202 @@ private void AddEventLog(string log)
}
}";
- private readonly string example20RazorCode = @"
-
+@if (streamHash.HasValue())
+{
+
-
- @if (bitFileInput.Files?.Any() is not true)
- {
-
-
- @if (!string.IsNullOrEmpty(file.Name))
- {
-
- ";
- private readonly string example20CsharpCode = @"
-private BitFileInput bitFileInput = default!;";
+private async Task HashTheFirstFile()
+{
+ streamHash = null;
- private readonly string example21RazorCode = @"
- StateHasChanged())"" />
+ var file = publicApiFileInput.Files.FirstOrDefault(f => f.IsValid);
- publicApiFileInput.Browse()"">Browse files
- publicApiFileInput.Reset()"">Reset
- publicApiFileInput.RemoveFile()"">Remove all
+ if (file is null) return;
- files)
-{
- if (files.Count == 0) return ""No attachment yet."";
-
- var rejected = files.Count(f => f.IsValid is false);
-
- return rejected == 0
- ? $""{files.Count} attachment(s) ready to send.""
- : $""{files.Count - rejected} attachment(s) ready to send, {rejected} rejected as too large."";
-}";
+ AriaLabel=""Select documents to attach""
+ Multiple ShowRemoveButton MaxSize=""1024 * 1024""
+ Description=""Up to 1 MB each. Tab to the button, then press Enter or Space."" />";
- private readonly string example23RazorCode = @"
+ private readonly string example17RazorCode = @"
+
+
+ BitIconInfo.Fa(""solid file-lines""))"" />
- BitIconInfo.Bi(""file-earmark""))"" />";
- private readonly string example26RazorCode = @"
-(parameters =>
+ {
+ parameters.Add(p => p.Multiple, true);
+ parameters.Add(p => p.MinSize, 10);
+ parameters.Add(p => p.MinSizeErrorMessage, "too small");
+ parameters.Add(p => p.ShowRemoveButton, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var removeButtons = component.FindAll(".bit-fin-rbt");
+ var describedBy = removeButtons[0].GetAttribute("aria-describedby");
+
+ Assert.IsFalse(string.IsNullOrEmpty(describedBy));
+ Assert.AreEqual("too small", component.Find($"[id='{describedBy}']").TextContent.Trim());
+ Assert.IsFalse(removeButtons[1].HasAttribute("aria-describedby"));
+ }
+
[TestMethod]
public void BitFileInputShouldRespectAllowDuplicatesWithDuplicateErrorMessage()
{
@@ -1140,6 +1165,621 @@ public void BitFileInputShouldApplyVisibilityStyle(BitVisibility visibility, str
}
}
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitFileInputShouldDisableTheBrowseButtonAlongWithTheInput(bool isEnabled)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.IsEnabled, isEnabled);
+ });
+
+ var button = component.Find(".bit-fin-lbl");
+
+ // the browse button is what the keyboard reaches, so the disabled state has to sit on it too and not
+ // only on the hidden input behind it.
+ Assert.AreEqual(!isEnabled, button.HasAttribute("disabled"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldSetTitleOnTheBrowseButton()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Title, "Pick a file");
+ });
+
+ Assert.AreEqual("Pick a file", component.Find(".bit-fin-lbl").GetAttribute("title"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldSetTabIndexOnTheBrowseButton()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.TabIndex, "3");
+ });
+
+ Assert.AreEqual("3", component.Find(".bit-fin-lbl").GetAttribute("tabindex"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldDisableTheRemoveButtonWhenDisabled()
+ {
+ SetupFiles([new() { Name = "file.txt", Size = 10, FileId = "1" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowRemoveButton, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ Assert.IsFalse(component.Find(".bit-fin-rbt").HasAttribute("disabled"));
+
+ component.Render(parameters => parameters.Add(p => p.IsEnabled, false));
+
+ Assert.IsTrue(component.Find(".bit-fin-rbt").HasAttribute("disabled"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldMarkAnInvalidFileItem()
+ {
+ SetupFiles([new() { Name = "small.txt", Size = 5, FileId = "1" },
+ new() { Name = "big.txt", Size = 50, FileId = "2" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Multiple, true);
+ parameters.Add(p => p.MaxSize, 10);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var items = component.FindAll(".bit-fin-itm");
+
+ Assert.IsTrue(items[0].ClassList.Contains("bit-fin-vld"));
+ Assert.IsTrue(items[1].ClassList.Contains("bit-fin-inv"));
+ Assert.IsNotNull(component.Find(".bit-fin-inv .bit-fin-msg"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRenderTheFolderOfAFileOfAFolderSelection()
+ {
+ SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1", RelativePath = "docs/notes/a.txt" },
+ new() { Name = "b.txt", Size = 10, FileId = "2" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Directory, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var folders = component.FindAll(".bit-fin-fp");
+
+ // only the file that reported a path gets one, so an ordinary selection keeps the row it always had.
+ Assert.HasCount(1, folders);
+ Assert.AreEqual("docs/notes", folders[0].TextContent);
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldTellApartSameNamedFilesOfDifferentFolders()
+ {
+ SetupFiles([new() { Name = "readme.md", Size = 10, LastModified = 1, FileId = "1", RelativePath = "pkg/one/readme.md" },
+ new() { Name = "readme.md", Size = 10, LastModified = 1, FileId = "2", RelativePath = "pkg/two/readme.md" },
+ new() { Name = "readme.md", Size = 10, LastModified = 1, FileId = "3", RelativePath = "pkg/two/readme.md" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Directory, true);
+ parameters.Add(p => p.AllowDuplicates, false);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var files = component.Instance.Files;
+
+ Assert.IsTrue(files[0].IsValid);
+ Assert.IsTrue(files[1].IsValid);
+ Assert.IsFalse(files[2].IsValid);
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRenderAFileTypeIconWhereThereIsNoPreview()
+ {
+ SetupFiles([new() { Name = "report.docx", Size = 10, FileId = "1" },
+ new() { Name = "archive.zip", Size = 10, FileId = "2" },
+ new() { Name = "clip.mp4", Size = 10, FileId = "3", ContentType = "video/mp4" },
+ new() { Name = "mystery", Size = 10, FileId = "4" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Multiple, true);
+ parameters.Add(p => p.ShowPreview, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var icons = component.FindAll(".bit-fin-fio i");
+
+ Assert.HasCount(4, icons);
+ Assert.IsTrue(icons[0].ClassList.Contains("bit-icon--WordDocument"));
+ Assert.IsTrue(icons[1].ClassList.Contains("bit-icon--ZipFolder"));
+ Assert.IsTrue(icons[2].ClassList.Contains("bit-icon--Video"));
+ Assert.IsTrue(icons[3].ClassList.Contains("bit-icon--Page"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldNotRenderFileTypeIconsWithoutShowPreview()
+ {
+ SetupFiles([new() { Name = "report.docx", Size = 10, FileId = "1" }]);
+
+ var component = RenderComponent();
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ Assert.IsEmpty(component.FindAll(".bit-fin-fio"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRespectFileIconSelector()
+ {
+ SetupFiles([new() { Name = "report.docx", Size = 10, FileId = "1" },
+ new() { Name = "archive.zip", Size = 10, FileId = "2" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Multiple, true);
+ parameters.Add(p => p.ShowPreview, true);
+ parameters.Add(p => p.FileIconSelector,
+ file => file.Name.EndsWith(".zip") ? null : BitIconInfo.Bit("Attach"));
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var icons = component.FindAll(".bit-fin-fio i");
+
+ // a null from the selector leaves that file without a glyph at all.
+ Assert.HasCount(1, icons);
+ Assert.IsTrue(icons[0].ClassList.Contains("bit-icon--Attach"));
+ }
+
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitFileInputShouldMoveTheDropIndicatorToTheRootWhenTheLabelIsHidden(bool hideLabel)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.HideLabel, hideLabel);
+ });
+
+ Assert.AreEqual(hideLabel, component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+
+ // the class builder caches, so the toggle has to survive a re-render with the other value too.
+ component.Render(parameters => parameters.Add(p => p.HideLabel, !hideLabel));
+
+ Assert.AreEqual(!hideLabel, component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldMoveTheDropIndicatorToTheRootWhenTheLabelIsTemplated()
+ {
+ var component = RenderComponent();
+
+ Assert.IsFalse(component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+
+ // a LabelTemplate replaces the browse button, which is what would have carried the indicator.
+ component.Render(parameters => parameters.Add(p => p.LabelTemplate, builder => builder.AddContent(0, "pick")));
+
+ Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+
+ component.Render(parameters => parameters.Add(p => p.LabelTemplate, (Microsoft.AspNetCore.Components.RenderFragment?)null));
+
+ Assert.IsFalse(component.Find(".bit-fin").ClassList.Contains("bit-fin-nlb"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldNameTheWholePathInTheRemoveButtonLabelOfAFolderSelection()
+ {
+ SetupFiles([new() { Name = "readme.md", Size = 10, FileId = "1", RelativePath = "pkg/one/readme.md" },
+ new() { Name = "plain.md", Size = 10, FileId = "2" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Directory, true);
+ parameters.Add(p => p.ShowRemoveButton, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var buttons = component.FindAll(".bit-fin-rbt");
+
+ Assert.AreEqual("Remove pkg/one/readme.md", buttons[0].GetAttribute("aria-label"));
+ Assert.AreEqual("Remove plain.md", buttons[1].GetAttribute("aria-label"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRenderTheFileNameWithoutItsExtensionApart()
+ {
+ SetupFiles([new() { Name = "a-very-long-quarterly-report-final.pdf", Size = 10, FileId = "1" },
+ new() { Name = "no-extension", Size = 10, FileId = "2" },
+ new() { Name = ".gitignore", Size = 10, FileId = "3" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Multiple, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ var names = component.FindAll(".bit-fin-fn");
+ var stems = component.FindAll(".bit-fin-fnm");
+ var extensions = component.FindAll(".bit-fin-fnx");
+
+ // the two boxes still read as the whole name, which is what the ellipsis is allowed to eat into.
+ Assert.AreEqual("a-very-long-quarterly-report-final.pdf", names[0].TextContent);
+ Assert.AreEqual("a-very-long-quarterly-report-final", stems[0].TextContent);
+ Assert.AreEqual(".pdf", extensions[0].TextContent);
+
+ Assert.AreEqual("no-extension", stems[1].TextContent);
+ Assert.AreEqual(string.Empty, extensions[1].TextContent);
+
+ // a dotfile is all stem, so the whole name stays in the box the ellipsis is allowed to eat into.
+ Assert.AreEqual(".gitignore", stems[2].TextContent);
+ Assert.AreEqual(string.Empty, extensions[2].TextContent);
+ }
+
+ [TestMethod]
+ public async Task BitFileInputShouldMoveTheFocusAfterRemovingAFile()
+ {
+ SetupFiles([new() { Name = "file1.txt", Size = 10, FileId = "1" },
+ new() { Name = "file2.txt", Size = 20, FileId = "2" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Multiple, true);
+ parameters.Add(p => p.ShowRemoveButton, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ Assert.HasCount(2, component.FindAll(".bit-fin-rbt"));
+
+ await component.Find(".bit-fin-rbt").ClickAsync(new());
+
+ // the pressed button is gone with its file, so the focus has to be handed on rather than dropped.
+ Context.JSInterop.VerifyFocusAsyncInvoke();
+
+ Assert.HasCount(1, component.FindAll(".bit-fin-rbt"));
+ Assert.HasCount(1, component.Instance.Files);
+ Assert.AreEqual("file2.txt", component.Instance.Files[0].Name);
+ }
+
+ [TestMethod]
+ public async Task BitFileInputOpenReadStreamShouldRejectANullFile()
+ {
+ var component = RenderComponent();
+
+ await Assert.ThrowsExactlyAsync(() => component.Instance.OpenReadStreamAsync(null!));
+ }
+
+ [TestMethod]
+ public void BitFileInputParamsShouldHaveCorrectParamName()
+ {
+ var paramName = BitFileInputParams.ParamName;
+ var expectedName = $"{nameof(BitParams)}.{nameof(BitFileInput)}";
+
+ Assert.AreEqual(expectedName, paramName);
+ }
+
+ [TestMethod]
+ public void BitFileInputParamsShouldImplementIBitComponentParams()
+ {
+ var @params = new BitFileInputParams();
+
+ Assert.IsInstanceOfType(@params);
+ Assert.AreEqual(BitFileInputParams.ParamName, @params.Name);
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldApplyCascadingParametersFromBitParams()
+ {
+ var paramsList = new List
+ {
+ new BitFileInputParams
+ {
+ Color = BitColor.Success,
+ Size = BitSize.Large,
+ Variant = BitVariant.Outline,
+ Label = "Cascaded Label",
+ Title = "Cascaded Title",
+ Multiple = true,
+ Description = "Cascaded Description"
+ }
+ };
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Parameters, paramsList);
+ parameters.AddChildContent(builder =>
+ {
+ builder.OpenComponent(0);
+ builder.CloseComponent();
+ });
+ });
+
+ var root = component.Find(".bit-fin");
+ var button = component.Find(".bit-fin-lbl");
+
+ Assert.IsTrue(root.ClassList.Contains("bit-fin-suc"));
+ Assert.IsTrue(root.ClassList.Contains("bit-fin-lg"));
+ Assert.IsTrue(root.ClassList.Contains("bit-fin-otl"));
+ Assert.AreEqual("Cascaded Label", button.TextContent.Trim());
+ Assert.AreEqual("Cascaded Title", button.GetAttribute("title"));
+ Assert.IsTrue(component.Find(".bit-fin-fi").HasAttribute("multiple"));
+ Assert.AreEqual("Cascaded Description", component.Find(".bit-fin-dsc").TextContent.Trim());
+ }
+
+ [TestMethod]
+ public void BitFileInputDirectParametersShouldOverrideCascadingParameters()
+ {
+ var paramsList = new List
+ {
+ new BitFileInputParams
+ {
+ Color = BitColor.Success,
+ Size = BitSize.Large,
+ Label = "Cascaded Label",
+ MaxSize = 100
+ }
+ };
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Parameters, paramsList);
+ parameters.AddChildContent(builder =>
+ {
+ builder.OpenComponent(0);
+ builder.AddAttribute(1, nameof(BitFileInput.Color), BitColor.Error);
+ builder.AddAttribute(2, nameof(BitFileInput.Label), "Own Label");
+ builder.CloseComponent();
+ });
+ });
+
+ var root = component.Find(".bit-fin");
+
+ Assert.IsTrue(root.ClassList.Contains("bit-fin-err"));
+ // what the component left unset still comes from the cascade.
+ Assert.IsTrue(root.ClassList.Contains("bit-fin-lg"));
+ Assert.AreEqual("Own Label", component.Find(".bit-fin-lbl").TextContent.Trim());
+ }
+
+ [TestMethod,
+ DataRow(true),
+ DataRow(false)
+ ]
+ public void BitFileInputShouldRenderTheDropZonePanel(bool showDropZone)
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowDropZone, showDropZone);
+ });
+
+ Assert.AreEqual(showDropZone, component.Find(".bit-fin").ClassList.Contains("bit-fin-dzn"));
+ Assert.AreEqual(showDropZone, component.FindAll(".bit-fin-dzi").Count == 1);
+
+ // the class builder caches, so the toggle has to survive a re-render with the other value too.
+ component.Render(parameters => parameters.Add(p => p.ShowDropZone, !showDropZone));
+
+ Assert.AreEqual(!showDropZone, component.Find(".bit-fin").ClassList.Contains("bit-fin-dzn"));
+ }
+
+ [TestMethod]
+ public void BitFileInputDropZoneShouldDefaultToTheOutlineVariant()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowDropZone, true);
+ });
+
+ Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-otl"));
+
+ // an explicit variant still has the last word over that default.
+ component.Render(parameters => parameters.Add(p => p.Variant, BitVariant.Fill));
+
+ Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-fil"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRenderTheDefaultDropZoneIcon()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowDropZone, true);
+ });
+
+ Assert.IsTrue(component.Find(".bit-fin-dzi").ClassList.Contains("bit-icon--CloudUpload"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRespectDropZoneIconName()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowDropZone, true);
+ parameters.Add(p => p.DropZoneIconName, "FabricFolder");
+ });
+
+ Assert.IsTrue(component.Find(".bit-fin-dzi").ClassList.Contains("bit-icon--FabricFolder"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRespectDropZoneIcon()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowDropZone, true);
+ parameters.Add(p => p.DropZoneIconName, "FabricFolder");
+ parameters.Add(p => p.DropZoneIcon, BitIconInfo.Fa("solid file-lines"));
+ parameters.Add(p => p.Classes, new BitFileInputClassStyles { DropZoneIcon = "custom-dzi" });
+ parameters.Add(p => p.Styles, new BitFileInputClassStyles { DropZoneIcon = "color: red;" });
+ });
+
+ var icon = component.Find(".bit-fin-dzi");
+
+ // the icon info takes precedence over the name of a built-in icon.
+ Assert.IsTrue(icon.ClassList.Contains("fa-file-lines"));
+ Assert.IsFalse(icon.ClassList.Contains("bit-icon--FabricFolder"));
+ Assert.IsTrue(icon.ClassList.Contains("custom-dzi"));
+ Assert.Contains("color: red", icon.GetAttribute("style") ?? string.Empty);
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldRenderNoDropZoneGlyphForAnEmptyIconName()
+ {
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowDropZone, true);
+ parameters.Add(p => p.DropZoneIconName, string.Empty);
+ });
+
+ Assert.AreEqual(0, component.FindAll(".bit-fin-dzi").Count);
+ }
+
+ [TestMethod]
+ public void BitFileInputFileListShouldHaveAnAccessibleName()
+ {
+ var component = RenderComponent();
+
+ Assert.AreEqual("Selected files", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
+
+ component.Render(parameters => parameters.Add(p => p.FileListAriaLabel, "فایلهای انتخاب شده"));
+
+ Assert.AreEqual("فایلهای انتخاب شده", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldLazilyLoadThePreviewThumbnails()
+ {
+ SetupFiles([new() { Name = "a.png", Size = 10, FileId = "1", ContentType = "image/png", PreviewUrl = "blob:a" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.ShowPreview, true);
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ Assert.AreEqual("lazy", component.Find(".bit-fin-prv").GetAttribute("loading"));
+ }
+
+ [TestMethod,
+ DataRow("report.PDF", ".pdf"),
+ DataRow("archive.tar.gz", ".gz"),
+ DataRow("LICENSE", ""),
+ DataRow(".gitignore", ""),
+ DataRow(".env.local", ".local"),
+ DataRow("trailing.", "")
+ ]
+ public void BitFileInputInfoShouldReportTheExtension(string name, string expected)
+ {
+ Assert.AreEqual(expected, new BitFileInputInfo { Name = name }.Extension);
+ }
+
+ [TestMethod]
+ public async Task BitFileInputResetShouldNotAnnounceAnEmptySelection()
+ {
+ var component = RenderComponent();
+
+ var liveRegion = component.Find(".bit-fin-lvr");
+
+ Assert.AreEqual(string.Empty, liveRegion.TextContent);
+
+ await component.InvokeAsync(() => component.Instance.Reset());
+
+ // clearing what was already empty changes nothing, so there is nothing to announce.
+ Assert.AreEqual(string.Empty, component.Find(".bit-fin-lvr").TextContent);
+
+ SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1" }]);
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ Assert.Contains("1 file selected.", component.Find(".bit-fin-lvr").TextContent);
+
+ await component.InvokeAsync(() => component.Instance.Reset());
+
+ Assert.Contains("No file selected.", component.Find(".bit-fin-lvr").TextContent);
+ }
+
+ [TestMethod]
+ public void BitFileInputShouldApplyTheNewCascadingParameters()
+ {
+ var paramsList = new List
+ {
+ new BitFileInputParams
+ {
+ ShowDropZone = true,
+ DropZoneIconName = "FabricFolder",
+ FileListAriaLabel = "Cascaded list"
+ }
+ };
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.Parameters, paramsList);
+ parameters.AddChildContent(builder =>
+ {
+ builder.OpenComponent(0);
+ builder.CloseComponent();
+ });
+ });
+
+ Assert.IsTrue(component.Find(".bit-fin").ClassList.Contains("bit-fin-dzn"));
+ Assert.IsTrue(component.Find(".bit-fin-dzi").ClassList.Contains("bit-icon--FabricFolder"));
+ Assert.AreEqual("Cascaded list", component.Find(".bit-fin-fl").GetAttribute("aria-label"));
+ }
+
+ [TestMethod]
+ public void BitFileInputFileListShouldTakeATabStopOnlyWhenNothingInsideItCan()
+ {
+ // an empty list has nothing to scroll, so it stays out of the tab order.
+ var component = RenderComponent();
+
+ Assert.IsFalse(component.Find(".bit-fin-fl").HasAttribute("tabindex"));
+
+ // a list given a ceiling scrolls, and without the remove buttons there is nothing inside it
+ // a keyboard can reach, so the list itself has to be reachable to be scrollable.
+ SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1" }]);
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ Assert.AreEqual("0", component.Find(".bit-fin-fl").GetAttribute("tabindex"));
+
+ // the remove buttons are that way in, so the list does not take a stop of its own on top of them.
+ component.Render(parameters => parameters.Add(p => p.ShowRemoveButton, true));
+
+ Assert.IsFalse(component.Find(".bit-fin-fl").HasAttribute("tabindex"));
+ }
+
+ [TestMethod]
+ public void BitFileInputFileListShouldLeaveTheTabStopToACustomFileViewTemplate()
+ {
+ SetupFiles([new() { Name = "a.txt", Size = 10, FileId = "1" }]);
+
+ var component = RenderComponent(parameters =>
+ {
+ parameters.Add(p => p.FileViewTemplate, file => builder => builder.AddContent(0, file.Name));
+ });
+
+ component.Find(".bit-fin-fi").Change(string.Empty);
+
+ // the template owns what is inside the list, focusable or not, so the list does not compete with it.
+ Assert.IsFalse(component.Find(".bit-fin-fl").HasAttribute("tabindex"));
+ }
+
private void SetupFiles(BitFileInputInfo[] files)
{
Context.JSInterop.Setup("BitBlazorUI.FileInput.setup", _ => true).SetResult(files);
- @if (ShowPreview && file.PreviewUrl is not null)
+ @if (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. *@
- 
+ if (file.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. *@
+ @* lazily, since a folder selection can hold thousands of images and only
+ the handful in view is worth decoding. *@
+
+ }
+ else
+ {
+ var fileIcon = GetFileIcon(file);
+
+ @* the glyph stands in the thumbnail's slot for everything that has no preview, so the
+ names of a mixed list stay in one column instead of stepping in and out. *@
+ if (fileIcon is not null)
+ {
+
+ +
+
+
+ +
+
+
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
index 4515b3155f0..7a6290368e5 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.cs
@@ -23,7 +23,7 @@ public partial class BitFileInputDemo
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 marked as invalid with the DuplicateErrorMessage instead of being added as a second entry, becoming valid 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 folder, name, size and last modified time is marked as invalid with the DuplicateErrorMessage instead of being added as a second entry, becoming valid again once the file it duplicates is removed.",
},
new()
{
@@ -109,6 +109,22 @@ public partial class BitFileInputDemo
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 = "DropZoneIcon",
+ Type = "BitIconInfo?",
+ DefaultValue = "null",
+ Description = "The glyph of the drop zone panel, using custom CSS classes for external icon libraries. Takes precedence over DropZoneIconName when both are set, and is only rendered while ShowDropZone is enabled.",
+ LinkType = LinkType.Link,
+ Href = "#bit-icon-info"
+ },
+ new()
+ {
+ Name = "DropZoneIconName",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The name of the drop zone panel's glyph from the built-in Fluent UI icons. Defaults to \"CloudUpload\", and an empty string leaves the panel without a glyph at all."
+ },
+ new()
{
Name = "DuplicateErrorMessage",
Type = "string?",
@@ -117,12 +133,19 @@ public partial class BitFileInputDemo
},
new()
{
- Name = "FileValidator",
- Type = "Func?",
+ Name = "FileIconSelector",
+ Type = "Func?",
DefaultValue = "null",
- Description = "Custom validation function called for each newly selected file after the built-in validations pass. Return an error message to mark the file as invalid, or null to accept it.",
+ Description = "Custom provider of the glyph shown in the thumbnail's place for a file that has no image preview, which is rendered while ShowPreview is enabled. Receives the file and returns the icon to draw, or null to leave that file without one. When not set, the icon is picked from the file's MIME type and extension.",
LinkType = LinkType.Link,
- Href = "#file-input-info"
+ Href = "#bit-icon-info"
+ },
+ new()
+ {
+ Name = "FileListAriaLabel",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The accessible name of the file list, which tells a screen reader user walking the lists of the page what this one holds. Defaults to \"Selected files\"."
},
new()
{
@@ -132,6 +155,15 @@ public partial class BitFileInputDemo
Description = "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.",
},
new()
+ {
+ Name = "FileValidator",
+ Type = "Func?",
+ DefaultValue = "null",
+ Description = "Custom validation function called for each newly selected file after the built-in validations pass. Return an error message to mark the file as invalid, or null to accept it.",
+ LinkType = LinkType.Link,
+ Href = "#file-input-info"
+ },
+ new()
{
Name = "FileViewTemplate",
Type = "RenderFragment?",
@@ -297,11 +329,18 @@ public partial class BitFileInputDemo
Description = "The tooltip of the remove button, which is also used as the prefix of its accessible label (e.g., \"Remove report.pdf\"). Defaults to \"Remove\"."
},
new()
+ {
+ Name = "ShowDropZone",
+ Type = "bool",
+ DefaultValue = "false",
+ Description = "Whether to render the browse area as a full width drop zone panel - a dashed rule around a glyph and the label - instead of an ordinary button. It is the same button underneath, so it is still reached with Tab and activated with Enter or Space, and it carries the drag indicator exactly as the button does. It also makes Outline the default variant; set Variant to take that back."
+ },
+ new()
{
Name = "ShowPreview",
Type = "bool",
DefaultValue = "false",
- Description = "Whether to display a preview thumbnail for image files in the file list."
+ Description = "Whether to display a preview thumbnail for image files in the file list, and a file type glyph in the same place for every file that has no preview."
},
new()
{
@@ -329,6 +368,13 @@ public partial class BitFileInputDemo
Href = "#class-styles"
},
new()
+ {
+ Name = "Title",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "The tooltip of the browse button, rendered as its title attribute."
+ },
+ new()
{
Name = "Variant",
Type = "BitVariant?",
@@ -367,9 +413,18 @@ public partial class BitFileInputDemo
new()
{
Name = "ReadContentAsync",
- Type = "(BitFileInputInfo? fileInfo = null) => Task",
+ Type = "(BitFileInputInfo? fileInfo = null, CancellationToken cancellationToken = default) => Task",
DefaultValue = "",
- Description = "Reads the content of the specified file from the browser and populates its Content property with the byte array, or reads every valid file of the file list when no file is specified. Only reads valid files and only while the component is enabled.",
+ Description = "Reads the content of the specified file from the browser and populates its Content property with the byte array, or reads every valid file of the file list when no file is specified. Only reads valid files and only while the component is enabled. The whole file crosses the interop boundary as one message, which on Blazor Server the circuit caps (SignalR's MaximumReceiveMessageSize, 32 KB by default), so anything larger is read with OpenReadStreamAsync instead.",
+ LinkType = LinkType.Link,
+ Href = "#file-input-info"
+ },
+ new()
+ {
+ Name = "OpenReadStreamAsync",
+ Type = "(BitFileInputInfo fileInfo, long? maxAllowedSize = null, CancellationToken cancellationToken = default) => Task",
+ DefaultValue = "",
+ Description = "Opens a forward-only stream over the content of the specified file, which the runtime reads from the browser in chunks instead of materializing the whole file in memory the way ReadContentAsync does - which is also what gets a file past a Blazor Server circuit's message size cap. Unlike ReadContentAsync it also reads a file the validations rejected. maxAllowedSize defaults to the size the browser reported for the file, and the stream must be disposed by the caller.",
LinkType = LinkType.Link,
Href = "#file-input-info"
},
@@ -415,6 +470,13 @@ public partial class BitFileInputDemo
Description = "The name of the file including its extension (e.g., \"document.pdf\")."
},
new()
+ {
+ Name = "RelativePath",
+ Type = "string",
+ DefaultValue = "string.Empty",
+ Description = "The path of the file relative to the selected folder, including the folder's own name (e.g., \"photos/2024/summer.jpg\"). It is only reported by the browser for a folder selection or a dropped folder, and is an empty string for a file picked or dropped on its own."
+ },
+ new()
{
Name = "Size",
Type = "long",
@@ -440,6 +502,12 @@ public partial class BitFileInputDemo
Description = "The last modified time of the file reported by the browser, in milliseconds since the Unix epoch."
},
new()
+ {
+ Name = "Extension",
+ Type = "string",
+ Description = "The extension of the file including its leading dot, lowercased (e.g. \".pdf\"), or an empty string for a file whose name carries none, a dotfile (\".gitignore\") included."
+ },
+ new()
{
Name = "LastModifiedDate",
Type = "DateTimeOffset",
@@ -517,6 +585,13 @@ public partial class BitFileInputDemo
Description = "Custom CSS classes/styles for the browse button (label) of the BitFileInput."
},
new()
+ {
+ Name = "DropZoneIcon",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the glyph of the drop zone panel, which is only rendered while ShowDropZone is enabled."
+ },
+ new()
{
Name = "Description",
Type = "string?",
@@ -545,6 +620,13 @@ public partial class BitFileInputDemo
Description = "Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileInput."
},
new()
+ {
+ Name = "FileIcon",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the file type glyph shown in the thumbnail's place of each file item that has no image preview."
+ },
+ new()
{
Name = "FileName",
Type = "string?",
@@ -552,6 +634,13 @@ public partial class BitFileInputDemo
Description = "Custom CSS classes/styles for the file name of each file item of the BitFileInput."
},
new()
+ {
+ Name = "FilePath",
+ Type = "string?",
+ DefaultValue = "null",
+ Description = "Custom CSS classes/styles for the folder of each file item that came from a folder selection."
+ },
+ new()
{
Name = "FileSize",
Type = "string?",
@@ -668,6 +757,294 @@ public partial class BitFileInputDemo
+ private readonly List componentCssVariables =
+ [
+ new()
+ {
+ Name = "--bit-FileInput-max-width",
+ DefaultValue = "21.875rem",
+ Description = "The widest the whole component gets. Set it to 100% for a file input that fills its column.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-color",
+ DefaultValue = "The Color role's main color",
+ Description = "The role color: the fill of a Fill browse button, the rule and the text of an Outline or Text one.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-text-color",
+ DefaultValue = "The Color role's on-color",
+ Description = "Text drawn on top of the role color.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-hover-color",
+ DefaultValue = "The Color role's hover color",
+ Description = "Role color while the browse button is hovered (pointer devices only).",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-active-color",
+ DefaultValue = "The Color role's active color",
+ Description = "Role color while the browse button is pressed.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-focus-color",
+ DefaultValue = "The Color role's focus color",
+ Description = "Color of the keyboard focus ring of the browse button and of each remove button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-disabled-color",
+ DefaultValue = "--bit-clr-fg-dis",
+ Description = "Foreground when IsEnabled is false.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-disabled-background",
+ DefaultValue = "--bit-clr-bg-dis",
+ Description = "Background of the browse button and of the remove buttons when IsEnabled is false.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-disabled-border-color",
+ DefaultValue = "--bit-clr-brd-dis",
+ Description = "Border color of the browse button when IsEnabled is false.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-label-height",
+ DefaultValue = "--bit-siz-ctrl-sm / -md / -lg per Size",
+ Description = "Smallest height of the browse button, which is what lines it up with the other controls of its size.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-label-padding",
+ DefaultValue = "--bit-siz-ctrl-pad-y-* --bit-siz-ctrl-pad-x-* per Size",
+ Description = "Padding of the browse button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-label-font-size",
+ DefaultValue = "Per Size, from the type ramp",
+ Description = "Text size of the browse button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-label-font-weight",
+ DefaultValue = "--bit-tpg-font-weight",
+ Description = "Text weight of the browse button, which defaults to the weight the theme gives every control label.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-label-radius",
+ DefaultValue = "--bit-shp-radius-button",
+ Description = "Corner radius of the browse button, which its focus ring follows.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-zone-height",
+ DefaultValue = "Per Size, 4.5rem / 5.5rem / 6.5rem",
+ Description = "The smallest height of the drop zone panel rendered by ShowDropZone.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-zone-padding",
+ DefaultValue = "Per Size, from the spacing rhythm",
+ Description = "Padding of the drop zone panel.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-zone-radius",
+ DefaultValue = "--bit-shp-radius-surface",
+ Description = "Corner radius of the drop zone panel, which its focus ring follows.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-zone-border-width",
+ DefaultValue = "--bit-shp-brd-width-thick",
+ Description = "Rule thickness of the drop zone panel.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-zone-border-style",
+ DefaultValue = "dashed",
+ Description = "Rule style of the drop zone panel at rest. Set it to solid for a panel that reads as a surface rather than as a target.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-zone-icon-size",
+ DefaultValue = "Per Size, 1.5rem / 2rem / 2.5rem",
+ Description = "Glyph size inside the drop zone panel.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-description-color",
+ DefaultValue = "--bit-clr-fg-sec",
+ Description = "Color of the hint under the browse button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-description-font-size",
+ DefaultValue = "Per Size, from the type ramp",
+ Description = "Text size of that hint, of the file size and of the folder.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-color",
+ DefaultValue = "--bit-FileInput-text-color",
+ Description = "Rule and text of the browse button while files are dragged over the component.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-background",
+ DefaultValue = "--bit-FileInput-hover-color",
+ Description = "Fill of the browse button while files are dragged over the component.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-drop-border-style",
+ DefaultValue = "dashed",
+ Description = "Border style of the drop indicator. Set it to solid for a drop state that does not change the shape of the button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-file-list-max-height",
+ DefaultValue = "none",
+ Description = "The tallest the file list gets before it scrolls, which is what keeps a folder selection of thousands of files from pushing the rest of the page away.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-background",
+ DefaultValue = "--bit-clr-bg-sec",
+ Description = "Background of a file item, valid or not.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-hover-background",
+ DefaultValue = "--bit-FileInput-item-background",
+ Description = "Background of a hovered valid file item (pointer devices only).",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-border-color",
+ DefaultValue = "--bit-clr-brd-pri",
+ Description = "Border of a file item at rest.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-hover-border-color",
+ DefaultValue = "--bit-FileInput-item-border-color, then --bit-clr-brd-pri-hover",
+ Description = "Border of a hovered file item (pointer devices only). It falls back to the resting border color first, so repainting an item's rule covers its hover without a second variable.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-radius",
+ DefaultValue = "--bit-shp-radius-surface",
+ Description = "Corner radius of a file item.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-padding",
+ DefaultValue = "0.5rem",
+ Description = "Padding around the name, the size and the error message of a file item.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-gap",
+ DefaultValue = "0.1875rem",
+ Description = "Room between two file items, and above the first one.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-item-font-size",
+ DefaultValue = "Per Size, from the type ramp",
+ Description = "Text size of the file name.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-file-name-color",
+ DefaultValue = "--bit-clr-fg-pri",
+ Description = "Color of the file name.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-file-size-color",
+ DefaultValue = "--bit-clr-fg-sec",
+ Description = "Color of the file size and of the folder beside it.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-error-color",
+ DefaultValue = "--bit-clr-err",
+ Description = "Message and border of an invalid file item.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-invalid-background",
+ DefaultValue = "--bit-FileInput-item-background",
+ Description = "Background of an invalid file item. It matches a valid one by default so a rejected file still reads as a row of the list; a tint of the error color is the other reasonable choice.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-preview-size",
+ DefaultValue = "2rem / 2.5rem / 3.25rem per Size",
+ Description = "Side of the image thumbnail and of the file type glyph standing in for it.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-preview-radius",
+ DefaultValue = "--bit-shp-radius-sm",
+ Description = "Corner radius of the image thumbnail.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-file-icon-color",
+ DefaultValue = "--bit-clr-fg-sec",
+ Description = "Color of the file type glyph.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-remove-button-size",
+ DefaultValue = "--bit-siz-ctrl-sm / -md / -lg per Size",
+ Description = "Side of the square remove button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-remove-button-color",
+ DefaultValue = "--bit-clr-fg-pri",
+ Description = "Glyph color of the remove button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-remove-button-background",
+ DefaultValue = "--bit-clr-bg-sec",
+ Description = "Background of the remove button at rest.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-remove-button-hover-background",
+ DefaultValue = "--bit-clr-bg-sec-hover",
+ Description = "Background of a hovered remove button (pointer devices only).",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-remove-button-active-background",
+ DefaultValue = "--bit-clr-bg-sec-active",
+ Description = "Background of a pressed remove button.",
+ },
+ new()
+ {
+ Name = "--bit-FileInput-remove-icon-size",
+ DefaultValue = "--bit-siz-icon-sm / -md / -lg per Size",
+ Description = "Glyph size of the remove button.",
+ },
+ ];
+
+
+
private BitFileInput bitFileInput = default!;
@@ -694,6 +1071,21 @@ public partial class BitFileInputDemo
}
+ private BitIconInfo? SelectFileIcon(BitFileInputInfo file)
+ {
+ // anything the app knows nothing about is left without a glyph rather than given a generic one.
+ if (file.ContentType.StartsWith("video/", StringComparison.OrdinalIgnoreCase)) return BitIconInfo.Bit("MyMoviesTV");
+ if (file.ContentType.StartsWith("audio/", StringComparison.OrdinalIgnoreCase)) return BitIconInfo.Bit("Volume3");
+
+ return Path.GetExtension(file.Name).ToLowerInvariant() switch
+ {
+ ".pdf" => BitIconInfo.Bit("PDF"),
+ ".zip" or ".rar" or ".7z" => BitIconInfo.Bit("ZipFolder"),
+ _ => null
+ };
+ }
+
+
private static readonly string[] farsiUnits = ["بایت", "کیلوبایت", "مگابایت", "گیگابایت"];
private string FormatFileSizeInFarsi(long size)
@@ -755,16 +1147,47 @@ private void AddEventLog(string log)
private BitFileInput publicApiFileInput = default!;
+ private string? streamHash;
+
+ private async Task HashTheFirstFile()
+ {
+ streamHash = null;
+
+ var file = publicApiFileInput.Files.FirstOrDefault(f => f.IsValid);
+
+ if (file is null) return;
+
+ // nothing of the file is ever held whole: the stream is read in chunks and folded into the hash.
+ await using var stream = await publicApiFileInput.OpenReadStreamAsync(file);
+
+ streamHash = Convert.ToHexString(await System.Security.Cryptography.SHA256.HashDataAsync(stream));
+ }
- private string? AnnounceAttachments(IReadOnlyList files)
+ private string? AnnounceInFarsi(IReadOnlyList files)
{
- if (files.Count == 0) return "No attachment yet.";
+ if (files.Count == 0) return "فایلی انتخاب نشده است.";
var rejected = files.Count(f => f.IsValid is false);
return rejected == 0
- ? $"{files.Count} attachment(s) ready to send."
- : $"{files.Count - rejected} attachment(s) ready to send, {rejected} rejected as too large.";
+ ? $"{files.Count} فایل انتخاب شد."
+ : $"{files.Count} فایل انتخاب شد، {rejected} مورد نامعتبر است.";
}
+
+
+ private readonly BitFileInputParams[] fileInputParams =
+ [
+ new()
+ {
+ Multiple = true,
+ ShowPreview = true,
+ ShowRemoveButton = true,
+ Label = "Attach a file",
+ MaxSize = 1024 * 1024 * 1,
+ MaxSizeErrorMessage = "Attachments are limited to 1 MB.",
+ Description = "Anything up to 1 MB. Drop it here or browse.",
+ FileSizeFormatter = size => $"{size:N0} bytes"
+ }
+ ];
}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
index 8a8501a147b..0c1ee88d890 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.samples.cs
@@ -1,9 +1,9 @@
-namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileInput;
+namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.FileInput;
public partial class BitFileInputDemo
{
private readonly string example1RazorCode = @"
- $""{size:N0} bytes"")"" />";
- private readonly string example17CsharpCode = @"
+ private readonly string example11CsharpCode = @"
private static readonly string[] farsiUnits = [""بایت"", ""کیلوبایت"", ""مگابایت"", ""گیگابایت""];
private string FormatFileSizeInFarsi(long size)
@@ -130,9 +140,20 @@ private string FormatFileSizeInFarsi(long size)
}
return $""{Math.Round(value, 1)} {farsiUnits[unit]}"";
+}
+
+private string? AnnounceInFarsi(IReadOnlyList files)
+{
+ if (files.Count == 0) return ""فایلی انتخاب نشده است."";
+
+ var rejected = files.Count(f => f.IsValid is false);
+
+ return rejected == 0
+ ? $""{files.Count} فایل انتخاب شد.""
+ : $""{files.Count} فایل انتخاب شد، {rejected} مورد نامعتبر است."";
}";
- private readonly string example18RazorCode = @"
+ private readonly string example12RazorCode = @"
@log
}
}";
- private readonly string example19CsharpCode = @"
+ private readonly string example13CsharpCode = @"
private BitFileInput eventsFileInput = default!;
private BitFileInputInfo[] eventsFiles = [];
private readonly List
+
+
+ }
+ }
}
-
+
+ +
+ +
+
+
+
+ +
+ +
+
+
+
-
+
@@ -641,8 +536,9 @@
-
@@ -656,37 +552,33 @@
-
-
+
-
-
-
-
+
@@ -721,19 +613,50 @@ RemoveButton = "custom-remove" })" />
+
+
+
-
+ @* the extension is split off so that it survives the ellipsis: a long name
+ truncated as one string ends in "..." and stops saying what kind of file it is,
+ which is the one thing a glance at a file list is for. *@
- @file.Name
+ @GetFileStem(file.Name)@GetFileExtension(file.Name)
@(FileSizeFormatter is null ? FileSizeHumanizer.Humanize(file.Size) : FileSizeFormatter(file.Size))
+ @if (folder.HasValue())
+ {
+ @* a folder selection flattens into one list, where two files can only be told
+ apart by where they came from, so the folder is printed beside the size. *@
+ @folder
+ }
@if (file.IsValid is false)
{
-
+
@if (ShowRemoveButton)
{
-
@file.Message
}
- Color picks the theme color of the browse button and the drag-and-drop indicator, with
- Primary as the default. The semantic colors Success, Warning, Error and
- friends tie the input to what the selection means, while the Background, Foreground
- and Border families keep it legible on non-default surfaces like the inverted panel below.
+ ShowDropZone renders the browse button as a full-width dashed panel with a glyph, still reached with
+ Tab and opened with Enter or Space, and defaults it to Outline. DropZoneIconName swaps the
+ CloudUpload glyph (an empty string removes it); DropZoneIcon takes an external one.
+
+
+ + +
+ +
+ BitParams hands a BitFileInputParams to every file input under it. Its values are defaults,
+ not overrides: an input keeps each parameter it sets itself.
+
+
+ + +
+
+
+
+
+ + +
+
+
+ Color sets the theme color of the browse button, its focus ring and the drop indicator
+ (Primary by default).
@@ -620,13 +518,10 @@
- The remove button icon is not limited to the built-in icon font: RemoveButtonIcon takes a
- BitIconInfo or a raw CSS class string that can point at any icon library whose stylesheet is
- loaded, like FontAwesome or Bootstrap Icons below. Use BitIconInfo.Fa(), BitIconInfo.Bi()
- or BitIconInfo.Css() to build one, or stick with the built-in font and just pick a different
- icon via RemoveButtonIconName.
+ RemoveButtonIcon, and whatever FileIconSelector returns, accept any icon library through
+ BitIconInfo.Fa(), BitIconInfo.Bi() or BitIconInfo.Css().
@@ -641,8 +536,9 @@
-
@@ -656,37 +552,33 @@
-
- Size scales the browse button, the file list items and their preview thumbnails together:
- Small for dense layouts, Medium (the default) for regular forms, and Large where
- the input is a primary control or aimed at touch.
+ Size scales the browse button, the file items, their thumbnails and their remove buttons together.
Small:
-
Medium:
-
Large:
-
- Style and Class land on the root element, which inline styles and a single class cover
- well. For anything deeper, Styles and Classes reach the individual parts the browse
- button, the file list, each file item, its name, size, error message and remove button and their
- Dragging 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.
+ Style and Class target the root, Styles and Classes each part. Their
+ Dragging entry applies to the root only while files hover over it.
@@ -721,19 +613,50 @@ RemoveButton = "custom-remove" })" />
+ +
+ The public CSS variables inherit, so they can be set on
+
+ :root, on an ancestor or on the Style of one instance.
+ +
CSS variables:
+ +
+
+
+ + +
Set once on an ancestor, inherited by every file input inside it:
+ +
+
-
- Setting Dir to BitDir.Rtl mirrors the whole layout for right-to-left languages the
- browse button, the file names, sizes and remove buttons all follow so the BitFileInput reads
- naturally inside an RTL page like the Farsi example below.
+ Setting Dir to BitDir.Rtl mirrors the whole layout.
-
Custom file list:
@@ -144,7 +165,7 @@ private string FormatFileSizeInFarsi(long size)
{
@file.Name - @FileSizeHumanizer.Humanize(file.Size)
}";
- private readonly string example18CsharpCode = @"
+ private readonly string example12CsharpCode = @"
private BitFileInputInfo[] hiddenListFiles = [];
private void HandleOnHiddenListChange(BitFileInputInfo[] files)
@@ -152,8 +173,9 @@ private void HandleOnHiddenListChange(BitFileInputInfo[] files)
hiddenListFiles = files;
}";
- private readonly string example19RazorCode = @"
-SHA-256:
+}";
+ private readonly string example15CsharpCode = @"
+private BitFileInput publicApiFileInput = default!;
+private string? streamHash;
-@streamHash bitFileInput.Browse()"">
-
- }
-
-
-
-
-
- Drag and drop or
-
-
-
- Browse files
-
-
-
-
- Max file size: 2 MB
- Supported file types: jpg, jpeg, png, bmp
-
-
- }
-
-
-
-
-
-
- @if (!file.IsValid)
- {
-
-
-
-
-
-
-
- @file.Name
-
-
- @FileSizeHumanizer.Humanize(file.Size)
-
-
- bitFileInput.RemoveFile(file)"" />
-
- @file.Message
- }
-
-
- Max file size: 2 MB
- Supported file types: jpg, jpeg, png, bmp
- @(publicApiFileInput?.Files.Count ?? 0) file(s) in the list.
";
- private readonly string example21CsharpCode = @"
-private BitFileInput publicApiFileInput = default!;";
+ // nothing of the file is ever held whole: the stream is read in chunks and folded into the hash.
+ await using var stream = await publicApiFileInput.OpenReadStreamAsync(file);
- private readonly string example22RazorCode = @"
-
-
+
+
";
+
+ private readonly string example24RazorCode = @"
-
";
}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
index c35d7525731..60a453fa546 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileInput/BitFileInputDemo.razor.scss
@@ -30,142 +30,137 @@
background-color: mediumseagreen;
}
+ // Classes.Dragging lands on the root while files hover over it, so the hand-built panel inside
+ // gets its drag feedback from an ancestor rule rather than from the component's own drop indicator.
.custom-drop-zone .browse-file {
- border-style: dashed;
- border-color: #0072CE;
- background-color: #eaf4fd;
+ border-color: var(--bit-clr-pri);
+ background-color: var(--bit-clr-bg-sec-hover);
}
}
.event-log {
- margin-top: 8px;
- padding: 8px;
- background-color: #e8f5e9;
- border-radius: 4px;
- color: #2e7d32;
- font-weight: 500;
+ margin-top: 0.5rem;
+ padding: 0.5rem;
+ border-radius: 0.25rem;
+ color: var(--bit-clr-suc-text);
+ background-color: var(--bit-clr-suc);
}
.api-buttons {
+ gap: 0.75rem;
display: flex;
- gap: 12px;
- margin-bottom: 16px;
+ flex-wrap: wrap;
+ margin-bottom: 1rem;
}
+// A hand-built LabelTemplate: a real button, so Tab reaches it and Enter or Space opens the dialog
+// exactly as they do on the browse button it replaces. Every color is read off a theme token, so the
+// panel follows the four presets and both schemes instead of only looking right in the light one.
.browse-file {
- border: 1px solid #D2D2D7;
- border-radius: 2px;
- padding: 24px;
- width: 420px;
- height: 200px;
+ gap: 0.5rem;
+ width: 100%;
display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- gap: 50px;
cursor: pointer;
+ padding: 1.5rem;
+ text-align: center;
+ align-items: center;
+ font-family: inherit;
+ justify-content: center;
+ flex-flow: column nowrap;
+ color: var(--bit-clr-fg-pri);
+ background-color: var(--bit-clr-bg-pri);
+ border-radius: var(--bit-shp-radius-surface);
+ border: 2px dashed var(--bit-clr-brd-pri);
&:hover {
- border-color: #0072CE;
- background-color: #f8f9fa;
+ border-color: var(--bit-clr-pri);
+ background-color: var(--bit-clr-bg-sec);
}
-}
-
-.browse-file-header {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 16px;
- i {
- font-size: 24px;
- font-weight: 700;
- color: #0072CE;
+ &:focus-visible {
+ outline: 2px solid var(--bit-clr-pri-focus);
+ outline-offset: 2px;
}
- strong {
- color: #0072CE;
+ i {
+ font-size: 1.5rem;
+ color: var(--bit-clr-pri);
}
}
-.browse-file-footer {
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- font-size: 12px;
- color: #78787D;
+.browse-file-title {
+ font-size: 1rem;
}
-.file-list {
- border: 1px solid #D2D2D7;
- border-radius: 2px;
- padding: 24px;
- width: 420px;
- height: 200px;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
+.browse-file-hint {
+ font-size: 0.75rem;
+ color: var(--bit-clr-fg-sec);
}
-.file-list-header {
+// A hand-built FileViewTemplate: one compact row per file, with the constraints stated once under the
+// panel instead of repeated on every row the way a per-file footer would.
+.file-row {
+ gap: 0.75rem;
display: flex;
- flex-direction: column;
- gap: 8px;
-}
-
-.file-info {
- display: flex;
- justify-content: space-between;
+ padding: 0.5rem;
+ margin-top: 0.5rem;
align-items: center;
+ color: var(--bit-clr-fg-pri);
+ background-color: var(--bit-clr-bg-sec);
+ border-radius: var(--bit-shp-radius-surface);
+ border: 1px solid var(--bit-clr-brd-pri);
+
+ > i {
+ font-size: 1.5rem;
+ color: var(--bit-clr-fg-sec);
+ }
}
-.file-info-main {
- display: flex;
- justify-content: flex-start;
- align-items: center;
- gap: 12px;
+.file-row-invalid {
+ border-color: var(--bit-clr-err);
+}
- i {
- font-size: 24px;
- }
+.file-row-data {
+ flex-grow: 1;
+ min-width: 0;
}
-.file-info-name {
+.file-row-name {
+ overflow: hidden;
font-weight: 600;
- margin-bottom: 4px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.file-row-meta {
+ font-size: 0.75rem;
+ color: var(--bit-clr-fg-sec);
}
-.file-info-data {
- width: 275px;
+.file-row-error {
+ font-size: 0.75rem;
+ color: var(--bit-clr-err);
}
-.file-info-btns {
+.file-row-remove {
+ width: 2rem;
+ height: 2rem;
display: flex;
- justify-content: space-between;
- gap: 8px;
+ flex-shrink: 0;
+ cursor: pointer;
+ align-items: center;
+ justify-content: center;
+ border: none;
+ color: var(--bit-clr-err);
+ background-color: transparent;
+ border-radius: var(--bit-shp-radius-button);
- i {
- display: block;
- cursor: pointer;
+ &:hover {
+ background-color: var(--bit-clr-bg-ter);
}
- .remove-ico {
- color: #F9423A;
-
- &:hover {
- color: #d32f2f;
- }
+ &:focus-visible {
+ outline: 2px solid var(--bit-clr-pri-focus);
+ outline-offset: -2px;
}
}
-
-.file-info-e-msg {
- margin-top: 12px;
- color: #F9423A;
-}
-
-.file-list-footer {
- font-size: 12px;
- color: #78787D;
-}
diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
index 923e1a2a0c3..05b5dcfee20 100644
--- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
+++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Components/Inputs/FileInput/BitFileInputTests.cs
@@ -1,4 +1,5 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
@@ -649,6 +650,30 @@ public void BitFileInputShouldRespectMinSize()
Assert.IsTrue(files[1].IsValid);
}
+ [TestMethod]
+ public void BitFileInputShouldDescribeTheRemoveButtonOfAnInvalidFileWithItsMessage()
+ {
+ SetupFiles([new() { Name = "small.txt", Size = 5, FileId = "1" },
+ new() { Name = "big.txt", Size = 50, FileId = "2" }]);
+
+ var component = RenderComponent