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

Upload Files with List view mode

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();
        }
    }
}

Upload Folders with List view mode

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();
        }
    }
}

Upload Files with Dropdown view mode

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 FileEdit 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();
        }
    }
}

API

Attributes

Name Description Type Default
ChildTemplate Input content. RenderFragment
Feedback Placeholder for validation messages. RenderFragment
AutoReset If true file input will be automatically reset after it has being uploaded. bool false
BrowseButtonLocalizer Function used to handle browse button localization that will override a default ITextLocalizer. TextLocalizerHandler null
Changed Occurs every time the file(s) has changed. EventCallback<FileChangedEventArgs>
Ended Occurs when an individual file upload has ended. EventCallback<FileEndedEventArgs>
Filter Types of files that the input accepts. string null
MaxChunkSize Max chunk size (in bytes) when uploading the file. int 20480
SegmentFetchTimeout Gets or sets the Segment Fetch Timeout when uploading the file. TimeSpan TimeSpan.FromMinutes(1)
Multiple Specifies that multiple files can be selected. bool false
Directory Specifies that directories can be selected. bool false
Placeholder Sets the placeholder for the empty file input. string null
Progressed Notifies the progress of file being uploaded. EventCallback<FileProgressedEventArgs>
Started Occurs when an individual file upload has started. EventCallback<FileStartedEventArgs>
Written Occurs every time the part of file has being uploaded. EventCallback<FileWrittenEventArgs>
MaxFileSize Maximum file size in bytes, checked before starting upload (note: never trust client, always check file size at server-side). Defaults to long.MaxValue. long long.MaxValue
FilePickerLocalizer Function used to handle custom localization that will override a default ITextLocalizer. TextLocalizerHandler null
FileTemplate Provides a custom file content. RenderFragment<FilePickerFileContext>
ButtonsTemplate Provides a custom content for upload, clear and cancel buttons. RenderFragment<FilePickerButtonsContext>
ShowMode Gets or Sets FilePicker's show mode. Defaults to FilePickerShowMode.List. FilePickerShowMode FilePickerShowMode.List
DisableProgressReport Gets or sets whether report progress should be disabled. By enabling this setting, Progressed and Written callbacks won't be called. Internal file progress won't be tracked. This setting can speed up file transfer considerably. bool false
ReadOnly Add the readonly boolean attribute on an input to prevent modification of the input’s value. bool false
Disabled Add the disabled boolean attribute on an input to prevent user interactions and make it appear lighter. bool false
On this page