Add Parameter to can cancel the click on the Inputfile with some code when you click on the Inputfile

Author: SOGGluonConsulting

BlazorBasics.InputFileExtended/Events.cs

@@ -11,18 +11,14 @@ public partial class InputFileComponent
     /// <returns></returns>
     async Task LoadFileEventsScript()
     {
-        if (Parameters.AllowPasteFiles)
+        try
         {
-
-            try
-            {
-                FileEventScriptsReference = await GetJSObjectReference("file-dialog");
-            }
-            catch (Exception ex)
-            {
-                FileEventScriptsReference = null;
-                Console.WriteLine(ex.Message);
-            }
+            FileEventScriptsReference = await GetJSObjectReference("file-events");
+        }
+        catch (Exception ex)
+        {
+            FileEventScriptsReference = null;
+            Console.WriteLine(ex.Message);
         }
     }
 

BlazorBasics.InputFileExtended/InputFileComponent.razor

@@ -8,7 +8,9 @@
            for="@InputFileId"
            @ondragenter="DragEnter"
            @ondrop="DragLeave"
-           @ondragleave="DragLeave">
+           @ondragleave="DragLeave"
+           @onclick=OnClick
+    >
         <InputFile multiple="@Parameters.MultiFile" class="@Parameters.InputFileCss"
                    accept="@InputFileTypes"
                    id="@InputFileId"

BlazorBasics.InputFileExtended/InputFileComponent.razor.cs

@@ -1,3 +1,5 @@
+using Microsoft.AspNetCore.Components.Web;
+
 namespace BlazorBasics.InputFileExtended;
 
 public partial class InputFileComponent
@@ -55,4 +57,13 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             await LoadDragAdnDropScripts();
         }
     }
+
+    async Task OnClick()
+    {
+        if (Parameters.OnShouldCancelClick is not null)
+        {
+            bool cancel = await Parameters.OnShouldCancelClick.Invoke();
+            await FileEventScriptsReference.InvokeVoidAsync("PreventDefault", InputFileId, cancel);
+        }
+    }
 }

BlazorBasics.InputFileExtended/ValueObjects/InputFileParameters.cs

@@ -53,5 +53,10 @@ public class InputFileParameters
     /// </summary>
     public DragAndDropOptions DragAndDropOptions { get; set; } = new();
 
+    /// <summary>
+    /// Delegate to execute some code before execute the click. Return true if want to cancel the click event
+    /// </summary>
+    public Func<Task<bool>> OnShouldCancelClick;
+
 
 }

BlazorBasics.InputFileExtended/wwwroot/js/file-dialog.js

@@ -0,0 +1,14 @@
+const OpenDialog = (elementId) => {
+    document.getElementById(elementId).click();
+}
+
+const PreventDefault = (elementId, result) => {
+    const element = document.getElementById(elementId);
+    if (element && result) {
+        element.addEventListener('click', function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }, { once: true });
+    }
+}
+export { OpenDialog, PreventDefault }