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 - +@if (IsElementHidden) +{ + +} +else +{ + +} @code { [Parameter(CaptureUnmatchedValues = true)] public Dictionary 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)