From f9513e384455ee0a455c9839601be4c386c88f01 Mon Sep 17 00:00:00 2001
From: Katrin Khilko <katrin@form.io>
Date: Tue, 22 Apr 2025 12:16:53 +0300
Subject: [PATCH] FIO-10007: fixed display of file validation errors

---
 src/templates/bootstrap4/file/form.ejs | 37 +++++++++++++++++++-------
 src/templates/bootstrap5/file/form.ejs | 37 ++++++++++++++++++++------
 2 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/src/templates/bootstrap4/file/form.ejs b/src/templates/bootstrap4/file/form.ejs
index 0891e3d62..b0bf2d1f8 100644
--- a/src/templates/bootstrap4/file/form.ejs
+++ b/src/templates/bootstrap4/file/form.ejs
@@ -125,16 +125,35 @@
       </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('completeStatus')}}</span>
+        <li class="list-group-item">
+          <div class="row align-center">
+            <div class="col-md-{{ctx.columns.name}}">
+              <div>{{file.originalName || file.name}}</div>
+              {% if (file.status === 'progress') { %}
+                <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('completeStatus')}}</span>
+                  </div>
+                </div>
+              {% } else { %}
+                <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+              {% } %}
+            </div>
+            <div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
+            {% if (ctx.self.hasTypes) { %}
+              <div class="col-md-{{ctx.columns.type}}">
+                <select class="file-type" ref="fileType">
+                  {% ctx.component.fileTypes.map(function(type) { %}
+                    <option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
+                  {% }); %}
+                </select>
+              </div>
+            {% } %}
+            {% if (!ctx.isSyncing && file.status !== 'success') { %}
+              <div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="fileToSyncRemove"></i></div>
+            {% } %}
           </div>
-        </div>
-      {% } else { %}
-        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
-      {% } %}
+        </li>
     {% }) %}
   </div>
 {% } %}
diff --git a/src/templates/bootstrap5/file/form.ejs b/src/templates/bootstrap5/file/form.ejs
index f28902fb9..eb2f05937 100644
--- a/src/templates/bootstrap5/file/form.ejs
+++ b/src/templates/bootstrap5/file/form.ejs
@@ -125,16 +125,37 @@
       </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('completeStatus')}}</span>
+      <li class="list-group-item">
+        <div class="row align-center">
+          <div class="col-md-{{ctx.columns.name}}">
+            <div>{{file.originalName || file.name}}</div>
+            {% if (file.status === 'progress') { %}
+              <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('completeStatus')}}</span>
+                </div>
+              </div>
+            {% } else { %}
+              <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+            {% } %}
           </div>
+          <div class="col-md-{{ctx.columns.size}}">{{ctx.fileSize(file.size)}}</div>
+          {% if (ctx.self.hasTypes) { %}
+            <div class="col-md-{{ctx.columns.type}}">
+              <select class="file-type" ref="fileType">
+                {% ctx.component.fileTypes.map(function(type) { %}
+                  <option class="test" value="{{ type.value }}" {% if (type.label === file.fileType) { %}selected="selected"{% } %}>{{ctx.t(type.label)}}</option>
+                {% }); %}
+              </select>
+            </div>
+          {% } %}
+          {% if (file.status === 'progress') { %}
+            <div class="col-md-{{ctx.columns.actions}} justify-center"><i id="abort-{{file.id}}" tabindex="0" class="{{ctx.iconClass('ban')}}"></i></div>
+          {% } else if (!ctx.isSyncing && file.status !== 'success') { %}
+            <div class="col-md-{{ctx.columns.actions}} justify-center"><i tabindex="0" class="{{ctx.iconClass('remove')}}" ref="fileToSyncRemove"></i></div>
+          {% } %}
         </div>
-      {% } else { %}
-        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
-      {% } %}
+      </li>
     {% }) %}
   </div>
 {% } %}