FilePicker component

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

Blazorise FilePicker component provides extra functionality, listing and detailing files, providing clear and upload buttons and inbuilt progress.

Examples

File list

An example using the FilePicker's list show mode and OpenReadStreamAsync upload method.
Or drop files here
@using System.IO

<Field>
    <FilePicker Multiple Upload="OnFileUpload" ShowMode="FilePickerShowMode.List" />
</Field>

@code {

    async Task OnFileUpload( FileUploadEventArgs e )
    {
        try
        {
            using ( MemoryStream result = new MemoryStream() )
            {
                await e.File.OpenReadStream( long.MaxValue ).CopyToAsync( result );
            }
        }
        catch ( Exception exc )
        {
            Console.WriteLine( exc.Message );
        }
        finally
        {
            this.StateHasChanged();
        }
    }
}

Folder list

An example using the FilePicker's list show mode and OpenReadStreamAsync upload method.
Or drop files or folders here
@using System.IO

<Field>
    <FilePicker Directory Multiple Upload="OnFileUpload" ShowMode="FilePickerShowMode.List" />
</Field>

@code {
    async Task OnFileUpload( FileUploadEventArgs e )
    {
        try
        {
            using ( MemoryStream result = new MemoryStream() )
            {
                await e.File.OpenReadStream( long.MaxValue ).CopyToAsync( result );
            }
        }
        catch ( Exception exc )
        {
            Console.WriteLine( exc.Message );
        }
        finally
        {
            this.StateHasChanged();
        }
    }
}

File dropdown

An example using the FilePicker's dropdown show mode and WriteToStreamAsync upload method.
Or drop files here
@using System.IO

<Field>
    <FilePicker Multiple Upload="OnFileUpload" ShowMode="FilePickerShowMode.Dropdown" />
</Field>

@code {
    string fileContent;

    async Task OnFileUpload( FileUploadEventArgs e )
    {
        try
        {
            // 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 e.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();
        }
    }
}

Custom

An example customizing the FilePicker.
Or drop files here
@using System.IO

<Field>
    <FilePicker @ref="filePickerCustom"
                Multiple
                Upload="OnFileUpload"
                ShowMode="FilePickerShowMode.List">
        <FileTemplate>
            <Div Flex="Flex.JustifyContent.Between">
                <Div>
                    <Heading Size="HeadingSize.Is5">@context.File.Name</Heading>
                    <Paragraph>@FilePicker.GetFileSizeReadable(context.File)</Paragraph>
                </Div>
                <Div>
                    @if ( context.File.Status == FileEntryStatus.Ready )
                    {
                        <Icon TextColor="TextColor.Primary" Name="IconName.FileUpload" />
                    }
                    else if ( context.File.Status == FileEntryStatus.Uploading )
                    {
                        <Icon TextColor="TextColor.Warning" Name="IconName.Bolt" />
                    }
                    else if ( context.File.Status == FileEntryStatus.Uploaded )
                    {
                        <Icon TextColor="TextColor.Success" Name="IconName.CheckCircle" />
                    }
                    else if ( context.File.Status == FileEntryStatus.Error )
                    {
                        <Icon TextColor="TextColor.Danger" Name="IconName.TimesCircle" />
                    }
                </Div>
            </Div>
            <Divider Margin="Margin.Is0" />
        </FileTemplate>
        <ButtonsTemplate>
            <Progress Value="@filePickerCustom.GetProgressPercentage()" />
            <Buttons>
                <Button Clicked="@context.Clear" Color="Color.Warning"><Icon Name="IconName.Clear" /></Button>
                <Button Clicked="@context.Upload" Color="Color.Primary"><Icon Name="IconName.FileUpload" /></Button>
            </Buttons>
        </ButtonsTemplate>
    </FilePicker>
</Field>

@code {
    private FilePicker filePickerCustom;

    async Task OnFileUpload( FileUploadEventArgs e )
    {
        try
        {
            using ( MemoryStream result = new MemoryStream() )
            {
                await e.File.OpenReadStream( long.MaxValue ).CopyToAsync( result ) ;
            }
        }
        catch ( Exception exc )
        {
            Console.WriteLine( exc.Message );
        }
        finally
        {
            this.StateHasChanged();
        }
    }
}

Best Practices

Clear Selection

Use recognizable names and icons, and keep the current folder and selection clear at all times. Loading, empty, error, and access-denied states should explain why content is unavailable instead of leaving the picker blank.

Protect Storage Details

Use stable identifiers for files and folders instead of assuming display names or paths are unique. Permission checks and path validation belong on the server, and internal storage paths should not be exposed unless users genuinely need them.

API

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

On this page