kocoded/oqtane.framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added a ShowProgress parameter to FileManager (enabled by default). Disabling will display a simple spinner rather than detailed progress information during upload.

Browse Source
This commit is contained in:
sbwalker 2023-07-17 07:42:48 -04:00
parent 2bdb011240
commit 465f241e89
2 changed files with 58 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
Oqtane.Client/Modules/Controls/FileManager.razor
View File

@ -61,10 +61,20 @@
}
</div>
</div>
<div class="row">
<div class="col mt-1"><span id="@_progressinfoid" style="display: none;"></span></div>
<div class="col mt-1"><progress id="@_progressbarid" class="mt-1" style="display: none;"></progress></div>
</div>
@if (ShowProgress)
{
<div class="row">
<div class="col mt-1"><span id="@_progressinfoid" style="display: none;"></span></div>
<div class="col mt-1"><progress id="@_progressbarid" class="mt-1" style="display: none;"></progress></div>
</div>
}
else
{
if (_uploading)
{
<div class="app-progress-indicator"></div>
}
}
}
</div>
</div>
@ -100,6 +110,7 @@
private string _guid;
private string _message = string.Empty;
private MessageType _messagetype;
private bool _uploading = false;
[Parameter]
public string Id { get; set; } // optional - for setting the id of the FileManager component for accessibility
@ -128,6 +139,9 @@
[Parameter]
public bool ShowImage { get; set; } = true; // optional - for indicating whether an image thumbnail should be displayed - default is true
[Parameter]
public bool ShowProgress { get; set; } = true; // optional - for indicating whether progress info should be displayed during upload - default is true
[Parameter]
public bool ShowSuccess { get; set; } = false; // optional - for indicating whether a success message should be displayed upon successful upload - default is false
@ -318,6 +332,12 @@
}
if (restricted == "")
{
if (!ShowProgress)
{
_uploading = true;
StateHasChanged();
}
try
{
// upload the files
@ -351,8 +371,16 @@
}
// reset progress indicators
await interop.SetElementAttribute(_guid + "ProgressInfo", "style", "display: none;");
await interop.SetElementAttribute(_guid + "ProgressBar", "style", "display: none;");
if (ShowProgress)
{
await interop.SetElementAttribute(_guid + "ProgressInfo", "style", "display: none;");
await interop.SetElementAttribute(_guid + "ProgressBar", "style", "display: none;");
}
else
{
_uploading = false;
StateHasChanged();
}
if (success)
{
@ -393,7 +421,9 @@
await logger.LogError(ex, "File Upload Failed {Error}", ex.Message);
_message = Localizer["Error.File.Upload"];
_messagetype = MessageType.Error;
_uploading = false;
}
}
else
{

34
Oqtane.Server/wwwroot/js/interop.js
View File

@ -290,8 +290,10 @@ Oqtane.Interop = {
var progressinfo = document.getElementById('ProgressInfo_' + id);
var progressbar = document.getElementById('ProgressBar_' + id);
progressinfo.setAttribute("style", "display: inline;");
progressbar.setAttribute("style", "width: 100%; display: inline;");
if (progressinfo !== null && progressbar !== null) {
progressinfo.setAttribute("style", "display: inline;");
progressbar.setAttribute("style", "width: 100%; display: inline;");
}
for (var i = 0; i < files.length; i++) {
var FileChunk = [];
@ -322,21 +324,29 @@ Oqtane.Interop = {
var request = new XMLHttpRequest();
request.open('POST', posturl, true);
request.upload.onloadstart = function (e) {
progressinfo.innerHTML = file.name + ' 0%';
progressbar.value = 0;
if (progressinfo !== null && progressbar !== null) {
progressinfo.innerHTML = file.name + ' 0%';
progressbar.value = 0;
}
};
request.upload.onprogress = function (e) {
var percent = Math.ceil((e.loaded / e.total) * 100);
progressinfo.innerHTML = file.name + '[' + PartCount + '] ' + percent + '%';
progressbar.value = (percent / 100);
if (progressinfo !== null && progressbar !== null) {
var percent = Math.ceil((e.loaded / e.total) * 100);
progressinfo.innerHTML = file.name + '[' + PartCount + '] ' + percent + '%';
progressbar.value = (percent / 100);
}
};
request.upload.onloadend = function (e) {
progressinfo.innerHTML = file.name + ' 100%';
progressbar.value = 1;
if (progressinfo !== null && progressbar !== null) {
progressinfo.innerHTML = file.name + ' 100%';
progressbar.value = 1;
}
};
request.upload.onerror = function () {
progressinfo.innerHTML = file.name + ' Error: ' + xhr.status;
progressbar.value = 0;
request.upload.onerror = function() {
if (progressinfo !== null && progressbar !== null) {
progressinfo.innerHTML = file.name + ' Error: ' + xhr.status;
progressbar.value = 0;
}
};
request.send(data);
}