From 465f241e89af138a593f6a2817e55adcee67e595 Mon Sep 17 00:00:00 2001
From: sbwalker <shaun.walker@siliqon.com>
Date: Mon, 17 Jul 2023 07:42:48 -0400
Subject: [PATCH] Added a ShowProgress parameter to FileManager (enabled by
 default). Disabling will display a simple spinner rather than detailed
 progress information during upload.

---
 .../Modules/Controls/FileManager.razor        | 42 ++++++++++++++++---
 Oqtane.Server/wwwroot/js/interop.js           | 34 +++++++++------
 2 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/Oqtane.Client/Modules/Controls/FileManager.razor b/Oqtane.Client/Modules/Controls/FileManager.razor
index dc3f24b6..c37cef54 100644
--- a/Oqtane.Client/Modules/Controls/FileManager.razor
+++ b/Oqtane.Client/Modules/Controls/FileManager.razor
@@ -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
             {
diff --git a/Oqtane.Server/wwwroot/js/interop.js b/Oqtane.Server/wwwroot/js/interop.js
index 5ee359c8..792eb464 100644
--- a/Oqtane.Server/wwwroot/js/interop.js
+++ b/Oqtane.Server/wwwroot/js/interop.js
@@ -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);
             }