From 2dca6625b63e1283eee73b72f2404a11bb022312 Mon Sep 17 00:00:00 2001
From: Eric Rosenfeld <46537274+r0si@users.noreply.github.com>
Date: Fri, 1 Nov 2019 18:20:56 +0100
Subject: [PATCH 1/3] added 2nd input element

[*] second hidden input element
[*] added a js function to call the click on the hidden input element - this can be done by any custom button
---
 BlazorInputFile/InputFile.razor      | 13 ++++++++++++-
 BlazorInputFile/wwwroot/inputfile.js |  4 ++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/BlazorInputFile/InputFile.razor b/BlazorInputFile/InputFile.razor
index 0b37811..b981a2e 100644
--- a/BlazorInputFile/InputFile.razor
+++ b/BlazorInputFile/InputFile.razor
@@ -1,7 +1,14 @@
 @implements IDisposable
 @inject IJSRuntime JSRuntime
 
-<input type="file" @ref="inputFileElement" @attributes="UnmatchedParameters" />
+@if (IsElementHidden)
+{
+    <input id="@ElementId" type="file" @ref="inputFileElement" @attributes="UnmatchedParameters" style="display:none;"/>
+}
+else
+{
+    <input type="file" @ref="inputFileElement" @attributes="UnmatchedParameters" />
+}
 
 @code {
     [Parameter(CaptureUnmatchedValues = true)] public Dictionary<string, object> 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();
         }
     };
 

From 878d973222a23aee246ddb4d5619cc872b43b963 Mon Sep 17 00:00:00 2001
From: Eric Rosenfeld <46537274+r0si@users.noreply.github.com>
Date: Fri, 1 Nov 2019 18:32:11 +0100
Subject: [PATCH 2/3] Update README.md

---
 README.md | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/README.md b/README.md
index 8495067..a26c500 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 <input> button with MatBlazor:
+
+```csharp
+<MatButton OnClick="@(() => OnButtonClick("myInput"))" Label="Choose File"></MatButton>
+<InputFile HideElement="true" OnChange="HandleFileSelected" ElementId="myInput"> </InputFile>
+
+@if (file != null)
+{
+    <p>Name: @file.Name</p>
+    <p>Size in bytes: @file.Size</p>
+    <p>Last modified date: @file.LastModified.ToShortDateString()</p>
+    <p>Content type (not always supplied by the browser): @file.Type</p>
+}
+
+@code {
+
+    public async void OnButtonClick(string elementID)
+    {
+        await JSRuntime.InvokeAsync<string>("BlazorInputFile.wrapInput", elementID);
+    }
+
+    IFileListEntry file;
+
+    void HandleFileSelected(IFileListEntry[] files)
+    {
+        file = files.FirstOrDefault();
+    }
+
+}
+```
+
+Reference from [here](https://stackoverflow.com/a/9546968)

From a5c99fd25f5ec5304ca0894f87c1284ee369a9c5 Mon Sep 17 00:00:00 2001
From: Eric Rosenfeld <46537274+r0si@users.noreply.github.com>
Date: Fri, 1 Nov 2019 18:33:42 +0100
Subject: [PATCH 3/3] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a26c500..74e14ba 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@ For installation and usage information, see [this blog post](http://blog.stevens
 
 ```csharp
 <MatButton OnClick="@(() => OnButtonClick("myInput"))" Label="Choose File"></MatButton>
-<InputFile HideElement="true" OnChange="HandleFileSelected" ElementId="myInput"> </InputFile>
+<InputFile IsElementHidden="true" OnChange="HandleFileSelected" ElementId="myInput"> </InputFile>
 
 @if (file != null)
 {