Blazorise FileInput component

The FileInput component is a specialized input that provides a clean interface for selecting files.

Customized, cross-browser consistent, file input control that supports single file and multiple files upload.

Examples

Single file

On single file mode, when file is selected or user does not cancel Browse dialog, Changed event will be raised. The return value will be a FileChangedEventArgs that will contain only one item in the Files property. 
<Field>
    <FileInput Changed="@OnChanged" />
</Field>

@code {
    Task OnChanged( FileChangedEventArgs e )
    {
        return Task.CompletedTask;
    }
}

Multiple files

Multiple file uploading is supported by enabling Multiple attribute to component. In this case Files property of FileChangedEventArgs can contain multiple files. 
<Field>
    <FileInput Changed="@OnChanged" Multiple />
</Field>

@code {
    Task OnChanged( FileChangedEventArgs e )
    {
        return Task.CompletedTask;
    }
}

Directories

Directory uploading is supported by enabling Directory attribute to component. In this case Files property of FileChangedEventArgs can contain multiple files within a directory. 
<Field>
    <FileInput Changed="@OnChanged" Directory />
</Field>

@code {
    Task OnChanged( FileChangedEventArgs e )
    {
        return Task.CompletedTask;
    }
}

Multiple Directories

Multiple Directory uploading is supported by enabling Directory and Multiple attribute to component. In this case Files property of FileChangedEventArgs can contain multiple files within a directory. 
<Field>
    <FileInput Changed="@OnChanged" Directory Multiple />
</Field>

@code {
    Task OnChanged( FileChangedEventArgs e )
    {
        return Task.CompletedTask;
    }
}

File types

You can limit the file types by setting the Filter attribute to a string containing the allowed file type(s). To specify more than one type, separate the values with a comma.

To accept any file type, leave Filter as null (default). 

<!-- Accept all image formats by IANA media type wildcard-->
<Field>
    <FileInput Filter="image/*" />
</Field>

<!-- Accept specific image formats by IANA type -->
<Field>
    <FileInput Filter="image/jpeg, image/png, image/gif" />
</Field>

<!-- Accept specific image formats by extension -->
<Field>
    <FileInput Filter=".jpg, .png, .gif" />
</Field>

Events

Changed

This is the main event that will be called every time a user selects a single or multiple files. Depending on the mode in which the FileInput currently operates. In all cases the event argument is the same. Only difference is that Files array will contain single or multiple items.

Written

This event will be called on every buffer of data that has being written to the destination stream. It is directly related to the MaxMessageSize attribute found on FileInput component and will contain the information about currently processed file, it's offset and data array.

Progressed

Similar to the Written, this event will also be called while file is writing to the destination stream but it will contain only the progress and percentage on how much the file is being uploaded.

Started

This event will be called each time one of the selected file(s) has started the upload process.

Ended

This event is fired after the file has ended the upload process. If there was no error it will have Success property set to true.

Methods

WriteToStreamAsync

In this example you can see the usage of all events, including the Written and Progressed. For your own use case you can just focus on Changed event. 
@using System.IO

<Field>
    <FileInput Changed="@OnChanged" Written="@OnWritten" Progressed="@OnProgressed" />
</Field>

@code {
    string fileContent;

    async Task OnChanged( FileChangedEventArgs e )
    {
        try
        {
            foreach ( var file in e.Files )
            {
                // A stream is going to be the destination stream we're writing to.
                using ( var stream = new MemoryStream() )
                {
                    // Here we're telling the FileInput where to write the upload result
                    await file.WriteToStreamAsync( stream );

                    // Once we reach this line it means the file is fully uploaded.
                    // In this case we're going to offset to the beginning of file
                    // so we can read it.
                    stream.Seek( 0, SeekOrigin.Begin );

                    // Use the stream reader to read the content of uploaded file,
                    // in this case we can assume it is a textual file.
                    using ( var reader = new StreamReader( stream ) )
                    {
                        fileContent = await reader.ReadToEndAsync();
                    }
                }
            }
        }
        catch ( Exception exc )
        {
            Console.WriteLine( exc.Message );
        }
        finally
        {
            this.StateHasChanged();
        }
    }

    void OnWritten( FileWrittenEventArgs e )
    {
        Console.WriteLine( $"File: {e.File.Name} Position: {e.Position} Data: {Convert.ToBase64String( e.Data )}" );
    }

    void OnProgressed( FileProgressedEventArgs e )
    {
        Console.WriteLine( $"File: {e.File.Name} Progress: {e.Percentage}" );
    }
}

OpenReadStream

Using OpenReadStream on the file you can process the file as it is streamed from the browser to your code, this is mirrors the API found in ASP.NET Core Input File component, for example 
@using System.IO

<Field>
    <FileInput Changed="@OnChanged" Written="@OnWritten" Progressed="@OnProgressed" />
</Field>

@code {
    string fileContent;

    async Task OnChanged( FileChangedEventArgs e )
    {
        try
        {
            foreach ( var file in e.Files )
            {
                // A stream is going to be the destination stream we're writing to.
                using ( var stream = new MemoryStream() )
                {
                    // Here we're telling the FileInput where to write the upload result
                    await file.WriteToStreamAsync( stream );

                    // Once we reach this line it means the file is fully uploaded.
                    // In this case we're going to offset to the beginning of file
                    // so we can read it.
                    stream.Seek( 0, SeekOrigin.Begin );

                    // Use the stream reader to read the content of uploaded file,
                    // in this case we can assume it is a textual file.
                    using ( var reader = new StreamReader( stream ) )
                    {
                        fileContent = await reader.ReadToEndAsync();
                    }
                }
            }
        }
        catch ( Exception exc )
        {
            Console.WriteLine( exc.Message );
        }
        finally
        {
            this.StateHasChanged();
        }
    }

    void OnWritten( FileWrittenEventArgs e )
    {
        Console.WriteLine( $"File: {e.File.Name} Position: {e.Position} Data: {Convert.ToBase64String( e.Data )}" );
    }

    void OnProgressed( FileProgressedEventArgs e )
    {
        Console.WriteLine( $"File: {e.File.Name} Progress: {e.Percentage}" );
    }
}

Reset

By default after each file upload has finished, file input will automatically reset to it's initial state. If you want this behavior disabled and control it manually you need to first set AutoReset to false. After that you can call Reset() every time you want the file input to be reset. 
<Field>
    <FileInput @ref="@fileInput" AutoReset="false" Changed="@OnChanged" />
</Field>
<Field>
    <Button Color="Color.Primary" Clicked="Reset">Reset</Button>
</Field>

@code {
    FileInput fileInput;

    Task OnChanged(FileChangedEventArgs e)
    {
        return Task.CompletedTask;
    }

    Task Reset()
    {
        return fileInput.Reset().AsTask();
    }
}

Show Picker

If you want to show the default picker that comes with the file input element you can make it by using the ShowPicker() function.

Note: Keep in mind that not all browser will support the ShowPicker() function. 

<Field>
    <Button Color="Color.Primary" Clicked="@(() => fileInput.ShowPicker())">
        Show Picker
    </Button>
</Field>
<Field>
    <FileInput @ref="@fileInput" />
</Field>

@code {
    FileInput fileInput;
}

Best Practices

Explain Upload Requirements

State accepted file types, size limits, and whether multiple selection is allowed before users open the picker. For longer uploads, show progress and a clear result, and let users retry or remove a failed selection.

Server Processing

The browser's file-type filter is guidance rather than a security boundary. Validate the file name, size, content type, and content on the server. Stream large files with explicit limits instead of reading every upload completely into memory.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page