UnmatchedParameters { get; set; }
@@ -9,6 +16,10 @@
[Parameter] public int MaxMessageSize { get; set; } = 20 * 1024; // TODO: Use SignalR default
[Parameter] public int MaxBufferSize { get; set; } = 1024 * 1024;
+
+ [Parameter] public string ElementId { get; set; } // this id is used by the js function 'wrapInput' which calls click()
+ [Parameter] public bool IsElementHidden { get; set; } = false;
+
ElementReference inputFileElement;
IDisposable thisReference;
diff --git a/BlazorInputFile/wwwroot/inputfile.js b/BlazorInputFile/wwwroot/inputfile.js
index 13e7ab3..a714a6b 100644
--- a/BlazorInputFile/wwwroot/inputfile.js
+++ b/BlazorInputFile/wwwroot/inputfile.js
@@ -63,6 +63,10 @@
destinationUint8Array.set(sourceUint8Array, destinationOffset);
return bytesToRead;
+ },
+
+ wrapInput: function wrapInput(elementId) {
+ document.getElementById(elementId).click();
}
};
diff --git a/README.md b/README.md
index 8495067..74e14ba 100644
--- a/README.md
+++ b/README.md
@@ -3,3 +3,36 @@
This is a prototype for a file input component that may be added to Blazor in the future.
For installation and usage information, see [this blog post](http://blog.stevensanderson.com/2019/09/13/blazor-inputfile/).
+
+## Using a custom button with MatBlazor:
+
+```csharp
+
+
+
+@if (file != null)
+{
+ Name: @file.Name
+ Size in bytes: @file.Size
+ Last modified date: @file.LastModified.ToShortDateString()
+ Content type (not always supplied by the browser): @file.Type
+}
+
+@code {
+
+ public async void OnButtonClick(string elementID)
+ {
+ await JSRuntime.InvokeAsync("BlazorInputFile.wrapInput", elementID);
+ }
+
+ IFileListEntry file;
+
+ void HandleFileSelected(IFileListEntry[] files)
+ {
+ file = files.FirstOrDefault();
+ }
+
+}
+```
+
+Reference from [here](https://stackoverflow.com/a/9546968)