diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs index 99399a5ac9..2372cb3a58 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs @@ -315,6 +315,17 @@ public async Task RemoveFile(BitFileInfo? fileInfo = null) IsRemoving = false; } + /// + /// Open a file selection dialog + /// + /// + public async Task Browse() + { + if (IsEnabled is false) return; + + await _js.Browse(inputFileElement); + } + protected override Task OnInitializedAsync() { InputId = $"FileUpload-{UniqueId}-input"; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.ts b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.ts index 68817694ea..dcb79bd0ac 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.ts +++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.ts @@ -89,6 +89,10 @@ class BitFileUpload { uploader.pause(); } } + + static browse(inputFile: HTMLInputElement) { + inputFile.click(); + } } class BitFileUploader { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUploadJsExtension.cs b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUploadJsExtension.cs index 0f63655c18..d19e7f9387 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUploadJsExtension.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUploadJsExtension.cs @@ -27,4 +27,9 @@ internal static async Task PauseFile(this IJSRuntime jsRuntime, int index = -1) { await jsRuntime.InvokeVoidAsync("BitFileUpload.pause", index); } + + internal static async Task Browse(this IJSRuntime jsRuntime, ElementReference inputFileElement) + { + await jsRuntime.InvokeVoidAsync("BitFileUpload.browse", inputFileElement); + } } diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor b/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor index 2808ecfe93..15085d64af 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor @@ -208,4 +208,21 @@ + + +
Use a custom method for the open file selection dialog.
+
+ + +
+ + Browse file +
+
+
+ \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor.cs b/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor.cs index 36a90ed3a7..dc77e2897d 100644 --- a/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Core/Pages/Components/FileUpload/BitFileUploadDemo.razor.cs @@ -267,21 +267,25 @@ public partial class BitFileUploadDemo private string ChunkedUploadUrl => $"{Configuration.GetApiServerAddress()}FileUpload/UploadChunkedFile"; private string NonChunkedUploadUrl => $"{Configuration.GetApiServerAddress()}FileUpload/UploadNonChunkedFile"; private string RemoveUrl => $"FileUpload/RemoveFile"; - private BitFileUpload bitFileUpload; + private BitFileUpload bitFileUploadWithBrowseFile; + private bool FileUploadIsEmpty() => !bitFileUpload.Files?.Any(f => f.Status != BitFileUploadStatus.Removed) ?? true; + private async Task HandleUploadOnClick() { if (bitFileUpload.Files is null) return; await bitFileUpload.Upload(); } + private async Task HandleRemoveOnClick() { if (bitFileUpload.Files is null) return; await bitFileUpload.RemoveFile(); } + private static int GetFileUploadPercent(BitFileInfo file) { int uploadedPercent; @@ -296,6 +300,7 @@ private static int GetFileUploadPercent(BitFileInfo file) return uploadedPercent; } + private static string GetFileUploadSize(BitFileInfo file) { long totalSize = file.Size / 1024; @@ -311,6 +316,7 @@ private static string GetFileUploadSize(BitFileInfo file) return $"{uploadSize}KB / {totalSize}KB"; } + private string GetUploadMessageStr(BitFileInfo file) => file.Status switch { @@ -319,6 +325,7 @@ private string GetUploadMessageStr(BitFileInfo file) BitFileUploadStatus.NotAllowed => IsFileTypeNotAllowed(file) ? bitFileUpload.NotAllowedExtensionErrorMessage : bitFileUpload.MaxSizeErrorMessage, _ => string.Empty, }; + private bool IsFileTypeNotAllowed(BitFileInfo file) { if (bitFileUpload.Accept is not null) return false; @@ -328,6 +335,11 @@ private bool IsFileTypeNotAllowed(BitFileInfo file) return bitFileUpload.AllowedExtensions.Count > 0 && bitFileUpload.AllowedExtensions.All(ext => ext != "*") && bitFileUpload.AllowedExtensions.All(ext => ext != extension); } + private async Task HandleBrowseFileOnClick() + { + await bitFileUploadWithBrowseFile.Browse(); + } + [Inject] public IJSRuntime JSRuntime { get; set; } = default!; [Inject] public IConfiguration Configuration { get; set; } = default!; @@ -403,6 +415,17 @@ private bool IsFileTypeNotAllowed(BitFileInfo file) var extension = $"".{fileSections?.Last()}""; return bitFileUpload.AllowedExtensions.Count > 0 && bitFileUpload.AllowedExtensions.All(ext => ext != ""*"") && bitFileUpload.AllowedExtensions.All(ext => ext != extension); } +"; + + private readonly string example10CsharpCode = @" +private string NonChunkedUploadUrl = ""/Upload""; +private string RemoveUrl => ""/RemoveFile""; +private BitFileUpload bitFileUploadWithBrowseFile; + +private async Task HandleBrowseFileOnClick() +{ + await bitFileUploadWithBrowseFile.Browse(); +} "; private readonly string example2RazorCode = @" @@ -685,4 +708,11 @@ Browse file
Upload"; + + private readonly string example10RazorCode = @" +"; }