feat(blazorui): add browse public api to BitFileUpload #6079 (#6083)

bitfoundation · Nov 20, 2023 · d3a8095 · d3a8095
1 parent dd4f805
commit d3a8095
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 1 deletion.
diff --git 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;
     }
 
+    /// <summary>
+    /// Open a file selection dialog
+    /// </summary>
+    /// <returns></returns>
+    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
@@ -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
@@ -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
@@ -208,4 +208,21 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
+    <ComponentExampleBox Title="Browse file" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+        <ExamplePreview>
+            <div class="example-desc">Use a custom method for the open file selection dialog.</div>
+            <div>
+                <BitFileUpload @ref="bitFileUploadWithBrowseFile"
+                               Label=""
+                               UploadUrl="@NonChunkedUploadUrl"
+                               RemoveUrl="@RemoveUrl"
+                               MaxSize="1024 * 1024 * 500" />
+
+                <br />
+
+                <BitButton OnClick="HandleBrowseFileOnClick">Browse file</BitButton>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
 </ComponentDemo>
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
@@ -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
 <br />
 
 <BitButton OnClick=""HandleUploadOnClick"">Upload</BitButton>";
+
+    private readonly string example10RazorCode = @"
+<BitFileUpload @ref=""bitFileUploadWithBrowseFile""
+               Label=""""
+               UploadUrl=""@NonChunkedUploadUrl""
+               RemoveUrl=""@RemoveUrl""
+               MaxSize=""1024 * 1024 * 500"" />";
 }