✨ [open-formulieren/open-forms#4716] Linked error message to file upl…

…oad and turned upload list into a table
open-formulieren · Oct 2, 2024 · 667030b · 667030b
1 parent be8731c
commit 667030b
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 87 deletions.
diff --git a/src/formio/components/FileField.js b/src/formio/components/FileField.js
@@ -4,7 +4,7 @@ import {Formio} from 'react-formio';
 
 import {CSRFToken} from 'headers';
 
-import {applyPrefix} from '../utils';
+import {applyPrefix, setErrorAttributes} from '../utils';
 
 const addCSRFToken = xhr => {
   const csrfTokenValue = CSRFToken.getValue();
@@ -291,6 +291,12 @@ class FileField extends Formio.Components.components.file {
     return super.validatePattern(file, val);
   }
 
+  setErrorClasses(elements, dirty, hasErrors, hasMessages) {
+    const targetElements = [this.element.querySelector('[ref="fileBrowse"]')];
+    setErrorAttributes(targetElements, hasErrors, hasMessages, this.element);
+    return super.setErrorClasses(targetElements, dirty, hasErrors, hasMessages);
+  }
+
   checkComponentValidity(data, dirty, row, options = {}) {
     if (this.loading) {
       // This prevents the FormStep from being submitted before the file upload is finished.

diff --git a/src/formio/templates/file.ejs b/src/formio/templates/file.ejs
@@ -1,52 +1,53 @@
 {%/* taken from https://github.com/formio/formio.js/blob/v4.12.7/src/templates/bootstrap/file/form.ejs */%}
 {% if (!ctx.self.imageUpload) { %}
-  <ul class="list-group list-group-striped">
-    <li class="list-group-item list-group-header hidden-xs hidden-sm">
-      <div class="row">
+<table class="table">
+  <thead class="table__header">
+    <tr>
+      {% if (!ctx.disabled) { %}
+        <th class="table__column table__column--1"></th>
+      {% } %}
+      <th class="table__column table__column--{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}">{{ctx.t('File Name')}}</th>
+      <th class="table__column table__column--2">{{ctx.t('Size')}}</th>
+      {% if (ctx.self.hasTypes) { %}
+        <th class="table__column table__column--2">{{ctx.t('Type')}}</th>
+      {% } %}
+    </tr>
+  </thead>
+  <tbody>
+    {% ctx.files.forEach(function(file) { %}
+      <tr>
         {% if (!ctx.disabled) { %}
-          <div class="col-md-1"></div>
-        {% } %}
-        <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}"><strong>{{ctx.t('File Name')}}</strong></div>
-        <div class="col-md-2"><strong>{{ctx.t('Size')}}</strong></div>
-        {% if (ctx.self.hasTypes) { %}
-          <div class="col-md-2"><strong>{{ctx.t('Type')}}</strong></div>
+          <td>
+            <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
+              <i class="{{ctx.iconClass('trash-can')}}"></i>
+            </button>
+          </td>
         {% } %}
-      </div>
-    </li>
-    {% ctx.files.forEach(function(file) { %}
-      <li class="list-group-item">
-        <div class="row">
-          {% if (!ctx.disabled) { %}
-            <div class="col-md-1">
-              <button type="button" class="utrecht-button utrecht-button--subtle utrecht-button--danger" ref="removeLink" title="{{ctx.t('Remove')}}">
-                <i class="{{ctx.iconClass('trash-can')}}"></i>
-              </button>
-            </div>
-          {% } %}
-          <div class="col-md-{% if (ctx.self.hasTypes) { %}7{% } else { %}9{% } %}">
-            {% if (ctx.component.uploadOnly) { %}
-              {{{file.originalName || file.name}}}
-            {% } else { %}
-              <a href="{{file.url || '#'}}" target="_blank" ref="fileLink" class="utrecht-link utrecht-link--openforms"> {{{file.originalName || file.name}}}</a>
-            {% } %}
-          </div>
-          <div class="col-md-2">{{ctx.fileSize(file.size)}}</div>
-          {% if (ctx.self.hasTypes && !ctx.disabled) { %}
-            <div class="col-md-2">
-              <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"{% } %}>{{ type.label }}</option>
-                {% }); %}
-              </select>
-            </div>
-          {% } %}
-          {% if (ctx.self.hasTypes && ctx.disabled) { %}
-          <div class="col-md-2">{{file.fileType}}</div>
+        <td>
+          {% if (ctx.component.uploadOnly) { %}
+            {{{file.originalName || file.name}}}
+          {% } else { %}
+            <a href="{{file.url || '#'}}" target="_blank" ref="fileLink" class="utrecht-link utrecht-link--openforms"> {{{file.originalName || file.name}}}</a>
           {% } %}
+        </td>
+        <td>{{ctx.fileSize(file.size)}}</td>
+        {% if (ctx.self.hasTypes && !ctx.disabled) { %}
+          <td>
+            <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"{% } %}>{{ type.label }}</option>
+              {% }); %}
+            </select>
+          </td>
+        {% } %}
+        {% if (ctx.self.hasTypes && ctx.disabled) { %}
+          <td>{{file.fileType}}</td>
+        {% } %}
         </div>
-      </li>
+      </tr>
     {% }) %}
-  </ul>
+  </tbody>
+</table>
 {% } else { %}
   <div>
     {% ctx.files.forEach(function(file) { %}
@@ -83,7 +84,7 @@
 
         {{ctx.t('or')}}
 
-        <a href="#" ref="fileBrowse" class="browse" class="utrecht-link utrecht-link--openforms">{{ctx.t('browse')}}</a>
+        <a id="{{ctx.instance.id}}-{{ctx.component.key}}" href="#" ref="fileBrowse" class="browse utrecht-link utrecht-link--openforms">{{ctx.t('browse')}}</a>
 
         {% if (ctx.component.multiple) { %}
           {{ctx.t('to attach files.')}}

diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss
@@ -15,60 +15,39 @@ we don't have strict BEM naming here.
   @include body;
   @include anchor.extend-utrecht-link;
 
-  .list-group {
-    padding: 0;
-    margin: 0;
-    list-style: none;
-    @include margin(auto);
+  .table {
+    width: 100%;
+    border-collapse: collapse;
+
+    &__header {
+      border-bottom: solid 1px var(--of-color-border);
+    }
 
-    .list-group-header {
-      @include hide-on-mobile(block);
+    &__column {
+      text-align: left;
 
-      .row {
-        border-bottom: solid 1px var(--of-color-border);
+      &--1 {
+        @include bootstrap-span(width, 1);
       }
-    }
 
-    .list-group-item {
-      @include responsive(
-        padding-top,
-        $grid-margin-1,
-        $grid-margin-1,
-        $grid-margin-1,
-        $grid-margin-1
-      );
+      &--2 {
+        @include bootstrap-span(width, 2);
+      }
+
+      &--7 {
+        @include bootstrap-span(width, 7);
+      }
+
+      &--9 {
+        @include bootstrap-span(width, 9);
+      }
     }
   }
 
   .row {
     display: flex;
     align-items: center;
 
-    .col-md-1 {
-      @include bootstrap-span(width, 1);
-      @include mobile-only {
-        flex-grow: 1;
-      }
-    }
-    .col-md-2 {
-      @include bootstrap-span(width, 2);
-      @include mobile-only {
-        flex-grow: 2;
-      }
-    }
-    .col-md-7 {
-      @include bootstrap-span(width, 7);
-      @include mobile-only {
-        flex-grow: 1;
-      }
-    }
-    .col-md-9 {
-      @include bootstrap-span(width, 9);
-      @include mobile-only {
-        flex-grow: 5;
-      }
-      overflow-wrap: break-word;
-    }
     .col-sm-2 {
       @include bootstrap-span(width, 2);
     }