FilePicker component

Blazorise.sln

@@ -104,9 +104,7 @@ Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.QRCode", "Source\
 EndProject
 Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.Docs.Generator", "Documentation\Blazorise.Docs.Generator\Blazorise.Docs.Generator.csproj", "{F4C121CA-C204-43C4-AF1D-DEE56392526F}"
 EndProject
-Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.LoadingIndicator", "Source\Extensions\Blazorise.LoadingIndicator\Blazorise.LoadingIndicator.csproj", "{F7975395-2F45-4F4E-850E-ADD4BFFA2D86}"
-EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Blazorise.FluentValidation", "Source\Extensions\Blazorise.FluentValidation\Blazorise.FluentValidation.csproj", "{55C2652B-18A3-4B28-935A-67D78BFE6E8C}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Blazorise.LoadingIndicator", "Source\Extensions\Blazorise.LoadingIndicator\Blazorise.LoadingIndicator.csproj", "{570C2383-EE8C-4F02-91E8-E59B879EDCD2}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -278,14 +276,10 @@ Global
 		{F4C121CA-C204-43C4-AF1D-DEE56392526F}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{F4C121CA-C204-43C4-AF1D-DEE56392526F}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{F4C121CA-C204-43C4-AF1D-DEE56392526F}.Release|Any CPU.Build.0 = Release|Any CPU
-		{F7975395-2F45-4F4E-850E-ADD4BFFA2D86}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{F7975395-2F45-4F4E-850E-ADD4BFFA2D86}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{F7975395-2F45-4F4E-850E-ADD4BFFA2D86}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{F7975395-2F45-4F4E-850E-ADD4BFFA2D86}.Release|Any CPU.Build.0 = Release|Any CPU
-		{55C2652B-18A3-4B28-935A-67D78BFE6E8C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{55C2652B-18A3-4B28-935A-67D78BFE6E8C}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{55C2652B-18A3-4B28-935A-67D78BFE6E8C}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{55C2652B-18A3-4B28-935A-67D78BFE6E8C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{570C2383-EE8C-4F02-91E8-E59B879EDCD2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{570C2383-EE8C-4F02-91E8-E59B879EDCD2}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{570C2383-EE8C-4F02-91E8-E59B879EDCD2}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{570C2383-EE8C-4F02-91E8-E59B879EDCD2}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
@@ -334,8 +328,7 @@ Global
 		{7D4C9E83-5211-41C4-BB10-AB4599CA6C3D} = {9731051E-0AA7-411E-A76A-987854F034DA}
 		{81EDE0C8-05A4-4B5C-88AC-BD100FEC0471} = {9731051E-0AA7-411E-A76A-987854F034DA}
 		{F4C121CA-C204-43C4-AF1D-DEE56392526F} = {700B33A3-A855-46C3-BD5A-C6954FC7274B}
-		{F7975395-2F45-4F4E-850E-ADD4BFFA2D86} = {9731051E-0AA7-411E-A76A-987854F034DA}
-		{55C2652B-18A3-4B28-935A-67D78BFE6E8C} = {9731051E-0AA7-411E-A76A-987854F034DA}
+		{570C2383-EE8C-4F02-91E8-E59B879EDCD2} = {9731051E-0AA7-411E-A76A-987854F034DA}
 	EndGlobalSection
 	GlobalSection(ExtensibilityGlobals) = postSolution
 		SolutionGuid = {205B3EA4-470F-45DA-911E-346AF7D0A9A5}

Demos/Blazorise.Demo/Components/SideMenu.razor

@@ -31,6 +31,7 @@
                         <BarDropdownItem To="tests/dragdrop">Drag & Drop</BarDropdownItem>
                         <BarDropdownItem To="tests/elements">General UI</BarDropdownItem>
                         <BarDropdownItem To="tests/figures">Figures</BarDropdownItem>
+                        <BarDropdownItem To="tests/file-picker">File Picker</BarDropdownItem>
                         <BarDropdownItem To="tests/icons">Icons </BarDropdownItem>
                         <BarDropdownItem To="tests/listgroup">List group</BarDropdownItem>
                         <BarDropdownItem To="tests/modals">Modals</BarDropdownItem>

Demos/Blazorise.Demo/Pages/Tests/FilePickerPage.razor

@@ -0,0 +1,224 @@
+@page "/tests/file-picker";
+@using System.Diagnostics
+@using System.IO
+@using Blazorise.Extensions
+
+<Row>
+    <Column ColumnSize="ColumnSize.Is12">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Options</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <Field>
+                    <FieldBody>
+                        <Check @bind-Checked="@disableProgressReport">Disable Report Progress</Check>
+                        <Paragraph>By disabling progress report, file transfer can be significantly improved.</Paragraph>
+                    </FieldBody>
+                </Field>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+
+<Row>
+    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is2.OnY">
+            <CardHeader>
+                <CardTitle>Standard Upload</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <FilePicker @ref=filePicker
+                            Multiple
+                            MaxChunkSize=FileEditMaxChunkSize
+                            Written=OnFilePartReceived
+                            Ended=OnFileUploadEnded
+                            Progressed=OnFileUploadProgressChanged
+                            Upload="OnFileUpload"
+                            ShowMode="FilePickerShowMode.List"
+                            DisableProgressReport="@disableProgressReport">
+                </FilePicker>
+            </CardBody>
+        </Card>
+    </Column>
+    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is2.OnY">
+            <CardHeader>
+                <CardTitle>Buffered Upload</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <FilePicker @ref=filePickerBuffered
+                            Multiple
+                            MaxChunkSize=FileEditMaxChunkSize
+                            Written=OnFilePartReceived
+                            Ended=OnFileUploadEnded
+                            Progressed=OnFileUploadProgressChanged
+                            Upload="OnFileUploadBuffered"
+                            ShowMode="FilePickerShowMode.List"
+                            DisableProgressReport="@disableProgressReport">
+                </FilePicker>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+
+<Row>
+    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Dropdown Show Mode</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <FilePicker @ref=filePickerDropdown
+                            Multiple
+                            MaxChunkSize=FileEditMaxChunkSize
+                            Written=OnFilePartReceived
+                            Ended=OnFileUploadEnded
+                            Progressed=OnFileUploadProgressChanged
+                            Upload="OnFileUpload"
+                            ShowMode="FilePickerShowMode.Dropdown"
+                            DisableProgressReport="@disableProgressReport">
+                </FilePicker>
+            </CardBody>
+        </Card>
+    </Column>
+    <Column ColumnSize="ColumnSize.Is12.OnMobile.IsHalf.OnTablet">
+        <Card Margin="Margin.Is4.OnY">
+            <CardHeader>
+                <CardTitle>Custom</CardTitle>
+            </CardHeader>
+            <CardBody>
+                <FilePicker @ref=filePickerCustom
+                            Multiple
+                            MaxChunkSize=FileEditMaxChunkSize
+                            Written=OnFilePartReceived
+                            Ended=OnFileUploadEnded
+                            Progressed=OnFileUploadProgressChanged
+                            Upload="OnFileUploadBuffered"
+                            ShowMode="FilePickerShowMode.List"
+                            DisableProgressReport="@disableProgressReport">
+                    <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>
+                        @if ( !disableProgressReport )
+                        {
+                            <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>
+            </CardBody>
+        </Card>
+    </Column>
+</Row>
+
+@code {
+    private bool disableProgressReport = false;
+    private Stopwatch sw = new();
+    private readonly int FileEditMaxChunkSize = 24 * 1024;
+    private FilePicker filePicker { get; set; }
+    private FilePicker filePickerBuffered { get; set; }
+    private FilePicker filePickerDropdown { get; set; }
+    private FilePicker filePickerCustom { get; set; }
+
+    private async Task FileChanged( Microsoft.AspNetCore.Components.Forms.InputFileChangeEventArgs e )
+    {
+        sw.Restart();
+        using ( MemoryStream result = new MemoryStream() )
+        {
+            await InvokeAsync( async () => await e.File.OpenReadStream( long.MaxValue ).CopyToAsync( result ) );
+        }
+        sw.Stop();
+        Console.WriteLine( "file upload using buffer took " + sw.ElapsedMilliseconds + " ms" );
+    }
+
+    private void OnFileUploadEnded( FileEndedEventArgs e )
+    {
+        Console.WriteLine( $"File {e.File.Name} upload {( e.Success ? "succeeded" : "failed" )}." );
+    }
+
+    private async Task OnFileUpload( FileUploadEventArgs e )
+    {
+        var bytes = await FileUpload( e.File );
+    }
+
+    private async Task OnFileUploadBuffered( FileUploadEventArgs e )
+    {
+        var bytes = await FileUploadBuffered( e.File );
+    }
+
+    private async Task<byte[]> FileUpload( IFileEntry file )
+    {
+        sw.Restart();
+        byte[] result = await Read( file );
+        sw.Stop();
+        Console.WriteLine( "file upload without explicit buffering took " + sw.ElapsedMilliseconds + " ms" );
+        return result;
+    }
+
+    private async Task<byte[]> FileUploadBuffered( IFileEntry file )
+    {
+        sw.Restart();
+        byte[] result = await ReadBuffered( file );
+        sw.Stop();
+        Console.WriteLine( "file upload using buffer took " + sw.ElapsedMilliseconds + " ms" );
+        return result;
+    }
+
+    private async Task<byte[]> Read( IFileEntry file )
+    {
+        using ( var stream = new MemoryStream() )
+        {
+            await file.WriteToStreamAsync( stream );
+            stream.Seek( 0, SeekOrigin.Begin );
+            return stream.ToArray();
+        }
+    }
+
+    private async Task<byte[]> ReadBuffered( IFileEntry file )
+    {
+        using ( MemoryStream result = new MemoryStream() )
+        {
+            await file.OpenReadStream( long.MaxValue ).CopyToAsync( result );
+            return result.ToArray();
+        }
+    }
+
+    private void OnFilePartReceived( FileWrittenEventArgs e )
+    {
+        Console.WriteLine( $"File part received. Position: {e.Position} Received data size: {e.Data.Length}" );
+    }
+
+    private void OnFileUploadProgressChanged( FileProgressedEventArgs e )
+    {
+        Console.WriteLine( $"File upload progress: {e.Percentage:0.0} %" );
+    }
+}

Documentation/Blazorise.Docs/Layouts/DocsLayout.razor

@@ -79,6 +79,7 @@
                                     <BarDropdownItem To="docs/components/field">Field</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/figure">Figure</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/file">File Edit</BarDropdownItem>
+                                    <BarDropdownItem To="docs/components/file-picker">File Picker</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/focus-trap">FocusTrap</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/grid">Grid</BarDropdownItem>
                                     <BarDropdownItem To="docs/components/highlighter">Highlighter</BarDropdownItem>