[dev-v5] Add DialogService.RegisterInputFileAsync (#3777)

Author: dvoituron

examples/Demo/FluentUI.Demo.Client/Documentation/Components/InputFile/Examples/InputFileDialogService.razor

@@ -0,0 +1,50 @@
+@inject IDialogService DialogService
+@implements IAsyncDisposable
+
+<FluentButton Id="OpenInputFile" Appearance="ButtonAppearance.Primary" Margin="@Margin.Vertical3">
+    Upload files
+</FluentButton>
+
+<FluentProgressBar Value="@LoadingPercentage" />
+
+<FluentLabel Weight="LabelWeight.Semibold">Files uploaded:</FluentLabel>
+<FluentLabel>@(string.Join("; ", Files.Select(i => i.Name)))</FluentLabel>
+
+@code
+{
+    int LoadingPercentage = 0;
+    FluentInputFileEventArgs[] Files = [];
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Register the input file dialog with a button click.
+        await DialogService.RegisterInputFileAsync("OpenInputFile", OnCompletedAsync, options =>
+        {
+            options.Multiple = true;
+            options.OnFileErrorAsync = (e) => DialogService.ShowErrorAsync(e.ErrorMessage);
+            options.OnProgressChangeAsync = (e) =>
+            {
+                LoadingPercentage = e.ProgressPercent;
+                StateHasChanged();
+                return Task.CompletedTask;
+            };
+        });
+    }
+
+    private Task OnCompletedAsync(IEnumerable<FluentInputFileEventArgs> files)
+    {
+        Files = files.Where(i => !i.IsCancelled).ToArray();
+
+        // For the demo, delete these files.
+        Files.ToList().ForEach(file => file.LocalFile?.Delete());
+
+        // Show the files in UI.
+        LoadingPercentage = 100;
+        StateHasChanged();
+
+        return Task.CompletedTask;
+    }
+
+    // Unregister the input file
+    public async ValueTask DisposeAsync() => await DialogService.UnregisterInputFileAsync("OpenInputFile");
+}

examples/Demo/FluentUI.Demo.Client/Documentation/Components/InputFile/FluentInputFile.md

@@ -19,7 +19,9 @@ The component can be customized by adapting the `ChildContent`.
 The areas that need to be associated with the opening of the file selection dialog
 must be included in a `label for` that references the component `Id`: E.g. `<label for=“my-file-uploader”>browse...</label>`.
 
-> ℹ️ By default, this component uses the `SaveToTemporaryFolder` mode, which creates a local file. However, this might not always be possible depending on the user's permissions on the host system. You may need to change the `InputFileMode` based on your specific use case.
+> [!NOTE] By default, this component uses the `SaveToTemporaryFolder` mode, which creates a local file. However,
+> this might not always be possible depending on the user's permissions on the host system.
+> You may need to change the `InputFileMode` based on your specific use case.
 
 {{ InputFileDefault }}
 
@@ -30,6 +32,37 @@ specify the component that will trigger the opening of the file selection dialog
 
 {{ InputFileByCode }}
 
+## DialogService
+
+A easy way to open the file selection dialog is to use the injected **DialogService** service.
+1. During the `OnInitialized` method, **register** your trigger HTML element 
+   using the method `MyFileInstance = DialogService.RegisterInputFileAsync(id)`.
+1. Set the `OnCompletedAsync` method to handle the files uploaded.
+1. Don't forget to **unregister** the trigger element in the `Dispose` method 
+   using `MyFileInstance.UnregisterAsync();` or `DialogService.UnregisterInputFileAsync(id)`.
+
+```csharp
+[Inject]
+public IDialogService DialogService { get; set; }
+
+protected override async Task OnInitializedAsync()
+{
+    await DialogService.RegisterInputFileAsync("MyButton", OnCompletedAsync, options => { /* ... */ });    
+}
+
+private Task OnCompletedAsync(IEnumerable<FluentInputFileEventArgs> files)
+{
+    // `files` contains the uploaded files
+}
+
+public async ValueTask DisposeAsync()
+{
+    await DialogService.UnregisterInputFileAsync("MyButton");
+}
+```
+
+{{ InputFileDialogService }}
+
 ## Mode = InputFileMode.Buffer
 
 By default, the component has a parameter `Mode=“InputFileMode.SaveToTemporaryFolder”`.  
@@ -45,7 +78,7 @@ This mode is recommended if you can't store files locally, are working with smal
 If you want to transfer very large files and do not want to save your files locally (in a temporary folder, for example),
 you can retrieve the file stream from the `OnFileUploaded` event and the `file.Stream` property. Keep in mind that you will need to implement stream handling yourself.
 
-> ⚠️ Remember to always dispose each stream to prevent memory leaks!
+> [!WARNING] Remember to always dispose each stream to prevent memory leaks!
 
 {{ InputFileStream }}
 

src/Core/Components/Dialog/FluentDialogProvider.razor

@@ -6,13 +6,45 @@
     {
         @foreach (var dialog in DialogService.Items.Values.OrderBy(i => i.Index))
         {
-            <FluentDialog Id="@dialog.Id"
-                          Class="@dialog.Options?.ClassValue"
-                          Style="@dialog.Options?.StyleValue"
-                          Data="@dialog.Options?.Data"
-                          Instance="@dialog"
-                          OnStateChange="@(dialog.Options?.OnStateChange ?? EmptyOnStateChange)"
-                          @attributes="@AdditionalAttributes" />
+            @* FluentInputFile *@
+            if (dialog.ComponentType == typeof(Microsoft.AspNetCore.Components.Forms.InputFile))
+            {
+                var anchorId = dialog.Options?.Parameters["ElementId"] as string;
+                var options = dialog.Options?.Parameters["Options"] as InputFileOptions ?? new InputFileOptions();
+                var onCompleted = dialog.Options?.Parameters["OnCompletedAsync"] as Func<IEnumerable<FluentInputFileEventArgs>, Task> ?? (_ => Task.CompletedTask);
+                var onFileUploaded = dialog.Options?.Parameters["OnFileUploadedAsync"] as Func<FluentInputFileEventArgs, Task> ?? (_ => Task.CompletedTask);
+                var onProgressChange = dialog.Options?.Parameters["OnProgressChangeAsync"] as Func<FluentInputFileEventArgs, Task> ?? (_ => Task.CompletedTask);
+                var onFileError = dialog.Options?.Parameters["OnFileErrorAsync"] as Func<FluentInputFileErrorEventArgs, Task> ?? (_ => Task.CompletedTask);
+
+                if (!string.IsNullOrEmpty(anchorId))
+                {
+                    <FluentInputFile Id="@dialog.Id"
+                                     DragDropZoneVisible="false"
+                                     AnchorId="@anchorId"
+                                     OnCompleted="@(e => onCompleted.Invoke(e))"
+                                     Accept="@options.Accept"
+                                     Multiple="@options.Multiple"
+                                     MaximumFileCount="@options.MaximumFileCount"
+                                     MaximumFileSize="@options.MaximumFileSize"
+                                     BufferSize="@options.BufferSize"
+                                     Mode="@options.Mode"
+                                     OnFileUploaded="@(e => onFileUploaded.Invoke(e))"
+                                     OnProgressChange="@(e => onProgressChange.Invoke(e))"
+                                     OnFileError="@(e => onFileError.Invoke(e))" />
+                }
+            }
+
+            @* FluentDialog *@
+            else
+            {
+                <FluentDialog Id="@dialog.Id"
+                              Class="@dialog.Options?.ClassValue"
+                              Style="@dialog.Options?.StyleValue"
+                              Data="@dialog.Options?.Data"
+                              Instance="@dialog"
+                              OnStateChange="@(dialog.Options?.OnStateChange ?? EmptyOnStateChange)"
+                              @attributes="@AdditionalAttributes" />
+            }
         }
     }
 </div>

src/Core/Components/Dialog/InputFile/DialogService.cs

@@ -0,0 +1,63 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+using Microsoft.AspNetCore.Components.Forms;
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+public partial class DialogService : IDialogService
+{
+    /// <see cref="IDialogService.RegisterInputFileAsync(string, Func{IEnumerable{FluentInputFileEventArgs}, Task}, Action{InputFileOptions}?)"/>
+    public virtual async Task<InputFileInstance> RegisterInputFileAsync(string elementId, Func<IEnumerable<FluentInputFileEventArgs>, Task> onCompletedAsync, Action<InputFileOptions>? options = null)
+    {
+        if (this.ProviderNotAvailable())
+        {
+            throw new FluentServiceProviderException<FluentDialogProvider>();
+        }
+
+        // Options
+        var config = new InputFileOptions();
+        options?.Invoke(config);
+
+        // Register the dialog
+        var instance = new DialogInstance(this, typeof(InputFile), new DialogOptions()
+        {
+            // These parameters are passed to the `FluentDialogProvider` component
+            Parameters = new Dictionary<string, object?>(StringComparer.Ordinal)
+            {
+                { "ElementId", elementId },
+                { "OnCompletedAsync", onCompletedAsync },
+                { "OnFileUploadedAsync", config.OnFileUploadedAsync },
+                { "OnProgressChangeAsync", config.OnProgressChangeAsync },
+                { "OnFileErrorAsync", config.OnFileErrorAsync },
+                { "Options", config},
+            },
+        });
+
+        var fileInstance = new InputFileInstance(ServiceProvider, instance, elementId);
+
+        // Add the dialog to the service, and render it.
+        ServiceProvider.Items.TryAdd(fileInstance.Id, instance ?? throw new InvalidOperationException("Failed to register an InputFile."));
+        await ServiceProvider.OnUpdatedAsync.Invoke(instance);
+
+        return fileInstance;
+    }
+
+    /// <see cref="IDialogService.UnregisterInputFileAsync(string)"/>
+    public virtual async Task UnregisterInputFileAsync(string elementId)
+    {
+        var instances = ServiceProvider.Items
+                                       .Where(x => x.Value.Options.Parameters.ContainsKey("ElementId") &&
+                                                   string.Equals(x.Value.Options.Parameters["ElementId"]?.ToString(), elementId, StringComparison.Ordinal))
+                                       .ToList();
+
+        foreach (var instance in instances)
+        {
+            if (ServiceProvider.Items.TryRemove(instance.Value.Id, out var dialogInstance))
+            {
+                await ServiceProvider.OnUpdatedAsync.Invoke(dialogInstance);
+            }
+        }
+    }
+}

src/Core/Components/Dialog/InputFile/IDialogService.cs

@@ -0,0 +1,24 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary />
+public partial interface IDialogService
+{
+    /// <summary>
+    /// Registers a new <see cref="FluentInputFile">element</see> based on the trigger element id.
+    /// </summary>
+    /// <param name="elementId">HTML element identifier.</param>
+    /// <param name="onCompletedAsync">Callback to be invoked when the file upload is completed. Call `StateHasChanged` in your method to refresh your UI.</param>
+    /// <param name="options">Options for the <see cref="FluentInputFile">element</see>.</param>
+    /// <returns></returns>
+    Task<InputFileInstance> RegisterInputFileAsync(string elementId, Func<IEnumerable<FluentInputFileEventArgs>, Task> onCompletedAsync, Action<InputFileOptions>? options = null);
+
+    /// <summary>
+    /// Unregisters the <see cref="FluentInputFile">element</see> based on the trigger element id.
+    /// </summary>
+    /// <param name="elementId"></param>
+    Task UnregisterInputFileAsync(string elementId);
+}

src/Core/Components/Dialog/InputFile/InputFileInstance.cs

@@ -0,0 +1,52 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// Instance of an input file.
+/// </summary>
+public class InputFileInstance : IAsyncDisposable
+{
+    private readonly IFluentServiceBase<IDialogInstance> _serviceProvider;
+
+    /// <summary />
+    internal InputFileInstance(IFluentServiceBase<IDialogInstance> serviceProvider, IDialogInstance instance, string anchorId)
+    {
+        _serviceProvider = serviceProvider;
+        AnchorId = anchorId;
+
+        Id = instance.Id;
+    }
+
+    /// <summary>
+    /// Gets the identifier of the input file instance.
+    /// </summary>
+    public string Id { get; }
+
+    /// <summary>
+    /// Gets the identifier of the anchor element.
+    /// </summary>
+    public string AnchorId { get; }
+
+    /// <summary>
+    /// Removes the <see cref="FluentInputFile"/> from the <see cref="FluentDialogProvider"/>.
+    /// </summary>
+    public async ValueTask UnregisterAsync()
+    {
+        if (_serviceProvider.Items.TryRemove(Id, out var dialogInstance))
+        {
+            await _serviceProvider.OnUpdatedAsync.Invoke(dialogInstance);
+        }
+    }
+
+    /// <summary>
+    /// Disposes the <see cref="FluentInputFile"/> from the <see cref="FluentDialogProvider"/>.
+    /// </summary>
+    /// <returns></returns>
+    public async ValueTask DisposeAsync()
+    {
+        await UnregisterAsync();
+    }
+}

src/Core/Components/Dialog/InputFile/InputFileOptions.cs

@@ -0,0 +1,44 @@
+// ------------------------------------------------------------------------
+// MIT License - Copyright (c) Microsoft Corporation. All rights reserved.
+// ------------------------------------------------------------------------
+
+namespace Microsoft.FluentUI.AspNetCore.Components;
+
+/// <summary>
+/// Represents configuration options for handling file input and upload functionality.
+/// </summary>
+public class InputFileOptions : IInputFileOptions
+{
+    /// <inheritdoc cref="IInputFileOptions.Multiple" />
+    public bool Multiple { get; set; }
+
+    /// <inheritdoc cref="IInputFileOptions.MaximumFileCount" />
+    public int MaximumFileCount { get; set; } = 10;
+
+    /// <inheritdoc cref="IInputFileOptions.MaximumFileSize" />
+    public long MaximumFileSize { get; set; } = 10 * 1024 * 1024;
+
+    /// <inheritdoc cref="IInputFileOptions.BufferSize" />
+    public uint BufferSize { get; set; } = 10 * 1024;
+
+    /// <inheritdoc cref="IInputFileOptions.Accept" />
+    public string Accept { get; set; } = string.Empty;
+
+    /// <inheritdoc cref="IInputFileOptions.Mode" />
+    public InputFileMode Mode { get; set; }
+
+    /// <summary>
+    /// Raise when a file is completely uploaded.
+    /// </summary>
+    public Func<FluentInputFileEventArgs, Task>? OnFileUploadedAsync { get; set; }
+
+    /// <summary>
+    /// Raise when a progression step is updated.
+    /// </summary>
+    public Func<FluentInputFileEventArgs, Task>? OnProgressChangeAsync { get; set; }
+
+    /// <summary>
+    /// Raise when a file raised an error.
+    /// </summary>
+    public Func<FluentInputFileErrorEventArgs, Task>? OnFileErrorAsync { get; set; }
+}

src/Core/Components/InputFile/FluentInputFile.razor.cs

@@ -22,7 +22,7 @@ namespace Microsoft.FluentUI.AspNetCore.Components;
 /// cref="Mode"/> property to specify the file reading mode, such as buffering, saving to a temporary folder, or
 /// streaming. The <see cref="OnFileUploaded"/> and <see cref="OnCompleted"/> events can be used to handle file upload
 /// completion.</remarks>
-public partial class FluentInputFile : FluentComponentBase, IAsyncDisposable
+public partial class FluentInputFile : FluentComponentBase, IAsyncDisposable, IInputFileOptions
 {
     private const string JAVASCRIPT_FILE = FluentJSModule.JAVASCRIPT_ROOT + "InputFile/FluentInputFile.razor.js";
     private ElementReference? _containerElement;