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]
+-------------------
+### Features
+- [#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 {
@@ -80,11 +81,12 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
       } = this.props;
 
       const { isDragActive } = this.state;
+      const fileInputID = uuidv4();
 
       const opts = {
         disabled,
         name,
-        id:       'fileInputID',
+        id:       fileInputID,
         onChange: this.onChange,
         multiple: params.multiple
       };
@@ -100,7 +102,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={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: homsOrderDataUploadedFileAnother
+            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
@@ -72,5 +72,23 @@
       expect(preview_row).to have_no_text 'logo.svg'
       expect(preview_row).to have_no_css  "img[alt='logo.svg']"
     end
+
+    scenario 'should attach to second file_upload' do
+      attach_files('homsOrderDataUploadedFileAnother', files_to_attach)
+
+      preview_another = page.all('.files-preview-row')[0]
+      form_group = page.all('.form-group')[0]
+      file_input = form_group.find_field('homsOrderDataUploadedFileAnother', type: :file, visible: :hidden)
+
+      expect(file_input['name']).to  eq('homsOrderDataUploadedFileAnother')
+
+      expect(preview_another).to have_content 'logo.svg'
+      expect(preview_another).to have_content 'file.txt'
+      expect(preview_another).to have_content 'file_with...me.pdf'
+
+      expect(preview_another).to have_css "img[alt='logo.svg']"
+      expect(preview_another).to have_css "embed[type='application/pdf']"
+      expect(preview_another).to have_css "span[class='far fa-file fa-7x'"
+    end
   end
 end

yarn.lock

@@ -10308,7 +10308,7 @@ uuid@^3.3.2, uuid@^3.3.3, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.0:
+uuid@^8.3.0, uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==