Skip to content

Commit

Permalink
Improve remove method in BitFileUpload (#6003)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cyrus-Sushiant
Cyrus-Sushiant committed Nov 12, 2023
1 parent 9bb4a6a commit 0aeb5b6
Show file tree
Hide file tree
Showing 3 changed files with 146 additions and 104 deletions.
211 changes: 113 additions & 98 deletions src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,28 +204,13 @@ public long? ChunkSize
/// </summary>
public string? InputId { get; private set; }

/// <summary>
/// Loading when do remove a file
/// </summary>
public bool IsLoadingRemove { get; private set; }

protected override string RootElementClass => "bit-upl";

protected override Task OnInitializedAsync()
{
InputId = $"FileUpload-{UniqueId}-input";

_dotnetObj = DotNetObjectReference.Create(this);

return base.OnInitializedAsync();
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
dropZoneInstance = await _js.SetupFileUploadDropzone(RootElement, inputFileElement);
}
}



/// <summary>
/// Starts Uploading the file(s).
/// </summary>
Expand Down Expand Up @@ -300,12 +285,52 @@ public void CancelUpload(BitFileInfo? fileInfo = null)
}
}



/// <summary>
/// Select file(s) by browse button or drag and drop.
/// Remove file.
/// </summary>
/// <param name="fileInfo">
/// null => all files | else => specific file
/// </param>
/// <returns></returns>
public async Task RemoveFile(BitFileInfo? fileInfo = null)
{
if (Files is null) return;
if (IsLoadingRemove) return;

IsLoadingRemove = true;

if (fileInfo is null)
{
foreach (var file in Files)
{
await RemoveOneFile(file);
}
}
else
{
await RemoveOneFile(fileInfo);
}

IsLoadingRemove = false;
}

protected override Task OnInitializedAsync()
{
InputId = $"FileUpload-{UniqueId}-input";

_dotnetObj = DotNetObjectReference.Create(this);

return base.OnInitializedAsync();
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
dropZoneInstance = await _js.SetupFileUploadDropzone(RootElement, inputFileElement);
}
}

private async Task HandleOnChange()
{
if (UploadUrl is null) return;
Expand Down Expand Up @@ -390,65 +415,6 @@ private async Task PauseUploadOneFile(int index)
file.PauseUploadRequested = false;
}

/// <summary>
/// Receive upload progress notification from underlying javascript.
/// </summary>
[JSInvokable("HandleUploadProgress")]
public async Task HandleUploadProgress(int index, long loaded)
{
if (Files is null) return;

var file = Files[index];
if (file.Status != BitFileUploadStatus.InProgress) return;

file.SizeOfLastChunkUploaded = loaded;
await UpdateStatus(BitFileUploadStatus.InProgress, file);
StateHasChanged();
}

/// <summary>
/// Receive upload finished notification from underlying JavaScript.
/// </summary>
[JSInvokable("HandleFileUpload")]
public async Task HandleFileUpload(int fileIndex, int responseStatus, string responseText)
{
if (Files is null || UploadStatus == BitFileUploadStatus.Paused) return;

var file = Files[fileIndex];
if (file.Status != BitFileUploadStatus.InProgress) return;

file.TotalSizeOfUploaded += ChunkedUploadEnabled ? _internalChunkSize : file.Size;
file.SizeOfLastChunkUploaded = 0;

UpdateChunkSize(fileIndex);

if (file.TotalSizeOfUploaded < file.Size)
{
await Upload(file);
}
else
{
file.Message = responseText;
if (responseStatus is >= 200 and <= 299)
{
await UpdateStatus(BitFileUploadStatus.Completed, file);
}
else if ((responseStatus is 0 && (file.Status is BitFileUploadStatus.Paused or BitFileUploadStatus.Canceled)) is false)
{
await UpdateStatus(BitFileUploadStatus.Failed, file);
}

var allFilesUploaded = Files.All(c => c.Status is BitFileUploadStatus.Completed or BitFileUploadStatus.Failed);
if (allFilesUploaded)
{
UploadStatus = BitFileUploadStatus.Completed;
await OnAllUploadsComplete.InvokeAsync(Files.ToArray());
}
}

StateHasChanged();
}

private void UpdateChunkSize(int fileIndex)
{
if (Files is null || AutoChunkSizeEnabled is false) return;
Expand Down Expand Up @@ -530,33 +496,23 @@ private async Task CancelUploadOneFile(int index)
file.CancelUploadRequested = false;
}

/// <summary>
/// Remove file.
/// </summary>
/// <param name="fileInfo">
/// null => all files | else => specific file
/// </param>
/// <returns></returns>
public async Task RemoveFile(BitFileInfo? fileInfo = null)
private async Task RemoveOneFile(BitFileInfo fileInfo)
{
if (Files is null) return;
if (fileInfo.Status is BitFileUploadStatus.Removed) return;

if (fileInfo is null)
if (fileInfo.TotalSizeOfUploaded > 0)
{
foreach (var file in Files)
{
await RemoveOneFile(file);
}
await RemoveOneFileFromServer(fileInfo);
}
else
{
await RemoveOneFile(fileInfo);
await UpdateStatus(BitFileUploadStatus.Removed, fileInfo);
}
}

private async Task RemoveOneFile(BitFileInfo fileInfo)
private async Task RemoveOneFileFromServer(BitFileInfo fileInfo)
{
if (Files is null || RemoveUrl.HasNoValue()) return;
if (RemoveUrl.HasNoValue()) return;

try
{
Expand Down Expand Up @@ -629,6 +585,65 @@ private static string AddQueryString(string uri, IReadOnlyDictionary<string, str
return sb.ToString();
}

/// <summary>
/// Receive upload progress notification from underlying javascript.
/// </summary>
[JSInvokable("HandleUploadProgress")]
public async Task HandleUploadProgress(int index, long loaded)
{
if (Files is null) return;

var file = Files[index];
if (file.Status != BitFileUploadStatus.InProgress) return;

file.SizeOfLastChunkUploaded = loaded;
await UpdateStatus(BitFileUploadStatus.InProgress, file);
StateHasChanged();
}

/// <summary>
/// Receive upload finished notification from underlying JavaScript.
/// </summary>
[JSInvokable("HandleFileUpload")]
public async Task HandleFileUpload(int fileIndex, int responseStatus, string responseText)
{
if (Files is null || UploadStatus == BitFileUploadStatus.Paused) return;

var file = Files[fileIndex];
if (file.Status != BitFileUploadStatus.InProgress) return;

file.TotalSizeOfUploaded += ChunkedUploadEnabled ? _internalChunkSize : file.Size;
file.SizeOfLastChunkUploaded = 0;

UpdateChunkSize(fileIndex);

if (file.TotalSizeOfUploaded < file.Size)
{
await Upload(file);
}
else
{
file.Message = responseText;
if (responseStatus is >= 200 and <= 299)
{
await UpdateStatus(BitFileUploadStatus.Completed, file);
}
else if ((responseStatus is 0 && (file.Status is BitFileUploadStatus.Paused or BitFileUploadStatus.Canceled)) is false)
{
await UpdateStatus(BitFileUploadStatus.Failed, file);
}

var allFilesUploaded = Files.All(c => c.Status is BitFileUploadStatus.Completed or BitFileUploadStatus.Failed);
if (allFilesUploaded)
{
UploadStatus = BitFileUploadStatus.Completed;
await OnAllUploadsComplete.InvokeAsync(Files.ToArray());
}
}

StateHasChanged();
}


public void Dispose()
{
Expand Down
24 changes: 21 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,9 +90,6 @@
}
}

.bit-upl-ip {
}

.bit-upl-uld {
.bit-upl-us {
color: $color-state-success;
Expand Down Expand Up @@ -186,3 +183,24 @@
}
}
}

.bit-upl-ldg {
height: 100%;
display: flex;
width: spacing(4);
margin-right: spacing(0.5);
align-items: center;
justify-content: center;
}

.bit-upl-spn {
border-radius: 50%;
width: spacing(2);
height: spacing(2);
border-width: spacing(0.2125);
border-style: $shape-border-style;
border-color: $color-border-secondary;
border-top-color: $color-primary-dark;
animation: bit-ldb-spinner-animation 1.3s linear infinite;
animation-timing-function: cubic-bezier(0.53, 0.21, 0.29, 0.67);
}
15 changes: 12 additions & 3 deletions src/BlazorUI/Bit.BlazorUI/Components/FileUpload/_BitFileUploadItem.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,18 @@
}
else if (FileUpload.ShowRemoveButton)
{
<div class="bit-upl-usi" @onclick="() => FileUpload.RemoveFile(Item)">
<i title="remove" class="bit-icon bit-icon--Delete" aria-hidden="true" />
</div>
@if (FileUpload.IsLoadingRemove)
{
<div class="bit-upl-ldg">
<div class="bit-upl-spn"></div>
</div>
}
else
{
<div class="bit-upl-usi" @onclick="() => FileUpload.RemoveFile(Item)">
<i title="remove" class="bit-icon bit-icon--Delete" aria-hidden="true" />
</div>
}
}
</div>
}

0 comments on commit 0aeb5b6

Please sign in to comment.