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

On this page