HBW-349 Generate unique id for file_upload compoment

CHANGELOG.md

@@ -3,6 +3,11 @@ v2.7.0 [unreleased]
 ### Features
 - [#562](https://github.com/latera/homs/pull/562) Bring in TypeScript into the project.
 
+v2.6.5 [unreleased]
+-------------------
+### Bugfixes
+- [#563](https://github.com/latera/homs/pull/563) Generate unique id for file_upload compoment.
+
 v2.6.4 [2021-06-08]
 -------------------
 ### Features

hbw/app/javascript/packs/hbw/components/form/file_upload.js.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import compose from 'shared/utils/compose';
 import { withCallbacks, withConditions, withErrorBoundary } from 'shared/hoc';
+import { v4 as uuidv4 } from 'uuid';
 
 modulejs.define('HBWFormFileUpload', ['React'], (React) => {
   class HBWFormFileUpload extends React.Component {
@@ -37,6 +38,8 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
       isDragActive: false
     };
 
+    fileInputID = uuidv4();
+
     componentDidMount () {
       this.props.onRef(this);
     }
@@ -84,7 +87,7 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
       const opts = {
         disabled,
         name,
-        id:       'fileInputID',
+        id:       this.fileInputID,
         onChange: this.onChange,
         multiple: params.multiple
       };
@@ -100,7 +103,7 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
           <div className='drop-text'>
             <span className="fa fas fa-cloud-upload-alt"/>
             {env.translator('components.file_upload.drag_and_drop')}
-            <label htmlFor="fileInputID">
+            <label htmlFor={this.fileInputID}>
               <a>{env.translator('components.file_upload.browse')}</a>
             </label>
             <input {...opts} type="file" hidden/>

hbw/config/yml_api.test.camunda.yml

@@ -735,6 +735,11 @@ get:
             label: Attach file
             css_class: col-md-4 col-xs-4 col-lg-4
             multiple: true
+          - name: homsOrderDataUploadedFileSecond
+            type: file_upload
+            label: Attach file
+            css_class: col-md-4 col-xs-4 col-lg-4
+            multiple: true
   "task/111116/deployed-form":
     "": |
       form:

package.json

@@ -40,6 +40,7 @@
     "select2": "^4.0.6-rc.1",
     "tooltip.js": "^1.3.0",
     "url-polyfill": "^1.1.0",
+    "uuid": "^8.3.2",
     "whatwg-fetch": "^3.0.0",
     "yaml-loader": "^0.6.0"
   },

spec/hbw/features/file_upload_spec.rb

@@ -26,7 +26,7 @@
 
   scenario 'should render drop aria' do
     expect(page).to have_selector '.hbw-file-upload'
-    expect(page.find('.hbw-file-upload')).to have_content 'Drag and drop files to attach, or browse'
+    expect(page.first('.hbw-file-upload')).to have_content 'Drag and drop files to attach, or browse'
   end
 
   scenario 'file list field missing renders warning' do
@@ -73,4 +73,32 @@
       expect(preview_row).to have_no_css  "img[alt='logo.svg']"
     end
   end
+
+  scenario 'should attach to different file_uploads' do
+    attach_files(
+      'homsOrderDataUploadedFile',
+      [
+        'fixtures/attached_files/logo.svg'
+      ]
+    )
+
+    attach_files(
+      'homsOrderDataUploadedFileSecond',
+      [
+        'fixtures/attached_files/file.txt',
+        'fixtures/attached_files/file_with_long_name.pdf'
+      ]
+    )
+
+    preview_rows = page.all('.files-preview-row')
+    expect(preview_rows.length).to eq(2)
+
+    expect(preview_rows[0]).to have_content 'logo.svg'
+    expect(preview_rows[0]).to have_css "img[alt='logo.svg']"
+
+    expect(preview_rows[1]).to have_content 'file.txt'
+    expect(preview_rows[1]).to have_content 'file_with...me.pdf'
+    expect(preview_rows[1]).to have_css "embed[type='application/pdf']"
+    expect(preview_rows[1]).to have_css "span[class='far fa-file fa-7x'"
+  end
 end