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

Oqtane.Client/Modules/Controls/FileManager.razor

@@ -61,11 +61,21 @@
                                 }
                             </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>
             @if (_image != string.Empty)
@@ -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
+                    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
             {

Oqtane.Server/wwwroot/js/interop.js

@@ -290,8 +290,10 @@ Oqtane.Interop = {
         var progressinfo = document.getElementById('ProgressInfo_' + id);
         var progressbar = document.getElementById('ProgressBar_' + id);
 
+        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) {
+                    if (progressinfo !== null && progressbar !== null) {
                         progressinfo.innerHTML = file.name + ' 0%';
                         progressbar.value = 0;
+                    }
                 };
                 request.upload.onprogress = function (e) {
+                    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) {
+                    if (progressinfo !== null && progressbar !== null) {
                         progressinfo.innerHTML = file.name + ' 100%';
                         progressbar.value = 1;
+                    }
                 };
-                request.upload.onerror = function () {
+                request.upload.onerror = function() {
+                    if (progressinfo !== null && progressbar !== null) {
                         progressinfo.innerHTML = file.name + ' Error: ' + xhr.status;
                         progressbar.value = 0;
+                    }
                 };
                 request.send(data);
             }