Skip to content

Commit

Permalink
fix(blazorui): resolve issues of BitFileUpload demo page #8602 (#8603)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mhrastegari
mhrastegari authored Sep 13, 2024
1 parent 01e21fd commit 4025a7a
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 38 deletions.
11 changes: 3 additions & 8 deletions .../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
ComponentSubClasses="componentSubClasses"
ComponentSubEnums="componentSubEnums">

<ComponentExampleBox Title="Basic FileUpload" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
<ExamplePreview>
<div class="example-desc">Files can be uploaded automatically after selecting them.</div>
<div>
Expand Down Expand Up @@ -80,7 +80,7 @@
<div>
<BitFileUpload IsMultiSelect="true"
AutoUploadEnabled="true"
MaxSize="1024 * 1024 * 500"
MaxSize="1024 * 1024 * 500"
UploadUrl="@ChunkedUploadUrl"
Label="Select or drag and drop files"
OnAllUploadsComplete="@(() => onAllUploadsCompleteText = "All File Uploaded")"
Expand Down Expand Up @@ -119,7 +119,7 @@
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Custom FileUpload" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<ComponentExampleBox Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
<ExamplePreview>
<div class="example-desc">Use custom template for file upload.</div>
<div>
Expand Down Expand Up @@ -174,7 +174,6 @@
<i class="bit-icon bit-icon--ChromeClose remove-ico" @onclick="HandleRemoveOnClick" />
</div>
</div>

@if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
{
var fileUploadPercent = GetFileUploadPercent(file);
Expand Down Expand Up @@ -202,9 +201,7 @@
}
</FileViewTemplate>
</BitFileUpload>

<br />

<BitButton OnClick="HandleUploadOnClick">Upload</BitButton>
</div>
</ExamplePreview>
Expand All @@ -219,9 +216,7 @@
UploadUrl="@NonChunkedUploadUrl"
RemoveUrl="@RemoveUrl"
MaxSize="1024 * 1024 * 500" />

<br />

<BitButton OnClick="HandleBrowseFileOnClick">Browse file</BitButton>
</div>
</ExamplePreview>
Expand Down
68 changes: 38 additions & 30 deletions ...t.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/FileUpload/BitFileUploadDemo.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,7 @@ public partial class BitFileUploadDemo
Description = "URL of the server endpoint receiving the files."
}
];

private readonly List<ComponentSubClass> componentSubClasses =
[
new()
Expand Down Expand Up @@ -286,6 +287,7 @@ public partial class BitFileUploadDemo
}
}
];

private readonly List<ComponentSubEnum> componentSubEnums =
[
new()
Expand Down Expand Up @@ -355,10 +357,14 @@ public partial class BitFileUploadDemo



[Inject] private IJSRuntime _js { get; set; } = default!;
[Inject] private IConfiguration _configuration { get; set; } = default!;

private string onAllUploadsCompleteText = "No File";
private string ChunkedUploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/UploadChunkedFile";
private string NonChunkedUploadUrl => $"{_configuration.GetApiServerAddress()}FileUpload/UploadNonChunkedFile";
private string RemoveUrl => $"{_configuration.GetApiServerAddress()}FileUpload/RemoveFile";

private BitFileUpload bitFileUpload = default!;
private BitFileUpload bitFileUploadWithBrowseFile = default!;

Expand Down Expand Up @@ -409,14 +415,13 @@ private static string GetFileUploadSize(BitFileInfo file)
return $"{uploadSize}KB / {totalSize}KB";
}

private string GetUploadMessageStr(BitFileInfo file)
=> file.Status switch
{
BitFileUploadStatus.Completed => bitFileUpload.SuccessfulUploadMessage,
BitFileUploadStatus.Failed => bitFileUpload.FailedUploadMessage,
BitFileUploadStatus.NotAllowed => IsFileTypeNotAllowed(file) ? bitFileUpload.NotAllowedExtensionErrorMessage : bitFileUpload.MaxSizeErrorMessage,
_ => string.Empty,
};
private string GetUploadMessageStr(BitFileInfo file) => file.Status switch
{
BitFileUploadStatus.Completed => bitFileUpload.SuccessfulUploadMessage,
BitFileUploadStatus.Failed => bitFileUpload.FailedUploadMessage,
BitFileUploadStatus.NotAllowed => IsFileTypeNotAllowed(file) ? bitFileUpload.NotAllowedExtensionErrorMessage : bitFileUpload.MaxSizeErrorMessage,
_ => string.Empty,
};

private bool IsFileTypeNotAllowed(BitFileInfo file)
{
Expand All @@ -432,8 +437,6 @@ private async Task HandleBrowseFileOnClick()
await bitFileUploadWithBrowseFile.Browse();
}

[Inject] private IJSRuntime _js { get; set; } = default!;
[Inject] private IConfiguration _configuration { get; set; } = default!;


private readonly string example1RazorCode = @"
Expand Down Expand Up @@ -636,17 +639,17 @@ private async Task HandleBrowseFileOnClick()
font-size: 12px;
color: #78787D;
}
</style>
<BitFileUpload @ref=""bitFileUpload""
Label=""""
UploadUrl=""@NonChunkedUploadUrl""
RemoveUrl=""@RemoveUrl""
MaxSize=""1024 * 1024 * 2""
AllowedExtensions=""@(new List<string> { "".jpeg"", "".jpg"", "".png"", "".bpm"" })""
SuccessfulUploadMessage=""File upload succeeded""
NotAllowedExtensionErrorMessage=""File type not supported"">
Label=""""
UploadUrl=""@NonChunkedUploadUrl""
RemoveUrl=""@RemoveUrl""
MaxSize=""1024 * 1024 * 2""
AllowedExtensions=""@(new List<string> { "".jpeg"", "".jpg"", "".png"", "".bpm"" })""
SuccessfulUploadMessage=""File upload succeeded""
NotAllowedExtensionErrorMessage=""File type not supported"">
<LabelTemplate>
@if (FileUploadIsEmpty())
{
Expand Down Expand Up @@ -690,7 +693,6 @@ Browse file
<i class=""bit-icon bit-icon--ChromeClose remove-ico"" @onclick=""HandleRemoveOnClick"" />
</div>
</div>
@if (file.Status is BitFileUploadStatus.InProgress or BitFileUploadStatus.Pending)
{
var fileUploadPercent = GetFileUploadPercent(file);
Expand Down Expand Up @@ -719,28 +721,30 @@ Browse file
</FileViewTemplate>
</BitFileUpload>
<br />
<BitButton OnClick=""HandleUploadOnClick"">Upload</BitButton>";
private readonly string example9CsharpCode = @"
[Inject] public IJSRuntime JSRuntime { get; set; } = default!;
private string NonChunkedUploadUrl => ""FileUpload/UploadNonChunkedFile"";
private string RemoveUrl => $""FileUpload/RemoveFile"";
private BitFileUpload bitFileUpload;
private bool FileUploadIsEmpty() => !bitFileUpload.Files?.Any(f => f.Status != BitFileUploadStatus.Removed) ?? true;
private async Task HandleUploadOnClick()
{
if (bitFileUpload.Files is null) return;
await bitFileUpload.Upload();
}
private async Task HandleRemoveOnClick()
{
if (bitFileUpload.Files is null) return;
await bitFileUpload.RemoveFile();
}
private static int GetFileUploadPercent(BitFileInfo file)
{
int uploadedPercent;
Expand All @@ -755,6 +759,7 @@ private static int GetFileUploadPercent(BitFileInfo file)
return uploadedPercent;
}
private static string GetFileUploadSize(BitFileInfo file)
{
long totalSize = file.Size / 1024;
Expand All @@ -770,14 +775,15 @@ private static string GetFileUploadSize(BitFileInfo file)
return $""{uploadSize}KB / {totalSize}KB"";
}
private string GetUploadMessageStr(BitFileInfo file)
=> file.Status switch
{
BitFileUploadStatus.Completed => bitFileUpload.SuccessfulUploadMessage,
BitFileUploadStatus.Failed => bitFileUpload.FailedUploadMessage,
BitFileUploadStatus.NotAllowed => IsFileTypeNotAllowed(file) ? bitFileUpload.NotAllowedExtensionErrorMessage : bitFileUpload.MaxSizeErrorMessage,
_ => string.Empty,
};
private string GetUploadMessageStr(BitFileInfo file) => file.Status switch
{
BitFileUploadStatus.Completed => bitFileUpload.SuccessfulUploadMessage,
BitFileUploadStatus.Failed => bitFileUpload.FailedUploadMessage,
BitFileUploadStatus.NotAllowed => IsFileTypeNotAllowed(file) ? bitFileUpload.NotAllowedExtensionErrorMessage : bitFileUpload.MaxSizeErrorMessage,
_ => string.Empty,
};
private bool IsFileTypeNotAllowed(BitFileInfo file)
{
if (bitFileUpload.Accept is not null) return false;
Expand All @@ -792,7 +798,9 @@ private bool IsFileTypeNotAllowed(BitFileInfo file)
Label=""""
UploadUrl=""@NonChunkedUploadUrl""
RemoveUrl=""@RemoveUrl""
MaxSize=""1024 * 1024 * 500"" />";
MaxSize=""1024 * 1024 * 500"" />
<BitButton OnClick=""HandleBrowseFileOnClick"">Browse file</BitButton>";
private readonly string example10CsharpCode = @"
private string NonChunkedUploadUrl = ""/Upload"";
private string RemoveUrl => ""/RemoveFile"";
Expand Down

0 comments on commit 4025a7a

Please sign in to comment.