From 8cf5ef556e8874e5a954b4681f4ffe31718a8a0b Mon Sep 17 00:00:00 2001
From: HannaKurban <96909212+HannaKurban@users.noreply.github.com>
Date: Thu, 12 Dec 2024 01:13:32 +0300
Subject: [PATCH] FIO-9377 added progressbar for for file upload with Display
 as image (#113)

---
 src/templates/bootstrap4/file/form.ejs | 12 ++++++++++++
 src/templates/bootstrap5/file/form.ejs | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/templates/bootstrap4/file/form.ejs b/src/templates/bootstrap4/file/form.ejs
index c1b37136..23062c4c 100644
--- a/src/templates/bootstrap4/file/form.ejs
+++ b/src/templates/bootstrap4/file/form.ejs
@@ -124,6 +124,18 @@
         </span>
       </div>
     {% }) %}
+    {% ctx.filesToUpload.forEach(function(file) { %}
+      {% if (file.status === 'progress') { %}
+        <div class="text-right">{{ctx.fileSize(file.size)}}</div>
+        <div class="status progress">
+          <div id={{file.id}} class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
+            <span class="sr-only">{{file.progress}}% {{ctx.t('Complete')}}</span>
+          </div>
+        </div>
+      {% } else { %}
+        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+      {% } %}
+    {% }) %}
   </div>
 {% } %}
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
diff --git a/src/templates/bootstrap5/file/form.ejs b/src/templates/bootstrap5/file/form.ejs
index 602a130b..61bc0123 100644
--- a/src/templates/bootstrap5/file/form.ejs
+++ b/src/templates/bootstrap5/file/form.ejs
@@ -124,6 +124,18 @@
         </span>
       </div>
     {% }) %}
+    {% ctx.filesToUpload.forEach(function(file) { %}
+      {% if (file.status === 'progress') { %}
+        <div class="text-end">{{ctx.fileSize(file.size)}}</div>
+        <div class="status progress">
+          <div id="{{file.id}}" class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
+            <span class="visually-hidden">{{file.progress}}% {{ctx.t('Complete')}}</span>
+          </div>
+        </div>
+      {% } else { %}
+        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+      {% } %}
+    {% }) %}
   </div>
 {% } %}
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}