HBW-307 Unify drag&drop field and browse file button

CHANGELOG.md

@@ -6,6 +6,10 @@ v2.6.2 [unreleased]
 - [#558](https://github.com/latera/homs/pull/558) Add dynamic `disable_if` and `delete_if` options for radio button.
 - [#559](https://github.com/latera/homs/pull/559) Customize checkboxes and radiobuttons.
 - [#561](https://github.com/latera/homs/pull/561) Add dynamic `disable_if` and `delete_if` options for checkbox.
+- [#560](https://github.com/latera/homs/pull/560) Unify drag&drop field and browse file button.
+
+  `file_upload`'s field options `drag_and_drop` and `preview` have been removed: drag&drop aria and file preview are always displayed now.
+
 
 v2.6.1 [2021-05-17]
 -------------------

hbw/app/assets/stylesheets/hbw.sass

@@ -189,13 +189,9 @@
       justify-content: center
       display: flex
       margin-top: 10px
-      border-radius: 7px
-      width: 150px
       padding: 8px
 
       &.activated
-        width: auto
-        max-width: 480px
         height: 115px
         padding-top: 13px
 
@@ -204,6 +200,15 @@
         font-size: .8em
         text-align: center
 
+        .fa-cloud-upload-alt
+          padding-right: 5px
+
+        label
+          pointer-events: auto
+          cursor: pointer
+          font-size: inherit
+          font-weight: inherit
+
     input[type=file]
       margin-top: 10px
 
@@ -539,3 +544,6 @@
   .btn-group
     .btn
       margin-right: -1px
+
+  input[hidden]
+    display: none

hbw/app/assets/stylesheets/hbw/brand_variables.sass

@@ -66,6 +66,8 @@
   --base-select-dropdown-indicator-color-hover: #333
   --base-select-dropdown-indicator-color-focus: #666
   --base-select-dropdown-indicator-width: 36px
+  --base-hbw-attacher-width: auto
+  --base-hbw-attacher-height: auto
 
   //Fonts
   --base-hbw-font-family: var(--hbw-font-family, "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif)

hbw/app/assets/stylesheets/hbw/branding.sass

@@ -80,13 +80,17 @@ table.disabled
   border: var(--hbw-border-light-gray, var(--base-hbw-border-light-gray))
 
 .attacher
+  width: var(--hbw-attacher-width, var(--base-hbw-attacher-width))
+  height: var(--hbw-attacher-height, var(--base-hbw-attacher-height))
   border: 1px solid var(--hbw-attacher-color, var(--base-hbw-attacher-color))
+  border-radius: var(--hbw-attacher-border-radius, var(--base-btn-border-radius))
   color: var(--hbw-attacher-color, var(--base-hbw-attacher-color))
   font-family: var(--hbw-font-family, var(--hbw-font-family))
   font-size: var(--attacher-font-size, var(--base-attacher-font-size))
   font-weight: var(--attacher-font-weight, var(--base-attacher-font-weight))
   font-style: var(--attacher-font-style, var(--base-attacher-font-style))
   &.activated
+    width: var(--hbw-attacher-width, var(--base-hbw-attacher-width))
     border: 2px dashed var(--hbw-mystic, var(--base-hbw-mystic))
     .drop-text
       color: var(--hbw-pickled-bluewood, var(--base-hbw-pickled-bluewood))

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

@@ -13,8 +13,6 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
         label_css:   PropTypes.string,
         css_class:   PropTypes.string,
         multiple:    PropTypes.bool,
-        preview:     PropTypes.bool,
-        drag_n_drop: PropTypes.bool,
         description: PropTypes.shape({
           placement: PropTypes.oneOf(['top', 'bottom']),
           text:      PropTypes.string
@@ -33,10 +31,10 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
     }
 
     state = {
-      valid:          true,
-      files:          [],
-      filesCount:     0,
-      dragStyleClass: 'attacher'
+      valid:        true,
+      files:        [],
+      filesCount:   0,
+      isDragActive: false
     };
 
     componentDidMount () {
@@ -49,18 +47,11 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
 
     render () {
       const {
-        name, params, disabled, hidden, fileListPresent, task, env
+        name, params, hidden, fileListPresent, task, env
       } = this.props;
 
       const { files } = this.state;
 
-      const opts = {
-        disabled,
-        name,
-        onChange: this.onChange,
-        multiple: params.multiple
-      };
-
       const hiddenValue = JSON.stringify({ files });
       const cssClass = cx('hbw-file-upload', params.css_class, { hidden });
       const errorMessage = env.translator('errors.file_list_field_required');
@@ -72,31 +63,48 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
         <div className={cssClass}>
           <span className={labelCSS}>{label}</span>
           <div className={errorMessageCss}>{errorMessage}</div>
-          {params.preview && files.length > 0 && this.renderPreviewRow()}
+          {files.length > 0 && this.renderPreviewRow()}
           <div className="form-group">
             {params.description?.placement === 'top' && this.renderDescription()}
-            {params.drag_n_drop && this.renderDragDropField()}
-            <input {...opts} type="file"/>
+            {this.renderFileInput()}
             <input name={name} value={hiddenValue} type="hidden"/>
             {params.description?.placement === 'bottom' && this.renderDescription()}
           </div>
         </div>
       );
     }
 
-    renderDragDropField = () => {
-      const { env } = this.props;
-      const { dragStyleClass } = this.state;
+    renderFileInput = () => {
+      const {
+        env, name, params, disabled
+      } = this.props;
+
+      const { isDragActive } = this.state;
+
+      const opts = {
+        disabled,
+        name,
+        id:       'fileInputID',
+        onChange: this.onChange,
+        multiple: params.multiple
+      };
 
       return (
         <div
-          className={dragStyleClass}
+          className={cx('attacher', { activated: isDragActive })}
           onDragEnter={e => this.onDragEnter(e)}
           onDragLeave={e => this.onDragLeave(e)}
           onDragOver={e => e.preventDefault()}
           onDrop={e => this.onDrop(e)}
         >
-          <div className='drop-text'>{env.translator('components.file_upload.drag_and_drop')}</div>
+          <div className='drop-text'>
+            <span className="fa fas fa-cloud-upload-alt"/>
+            {env.translator('components.file_upload.drag_and_drop')}
+            <label htmlFor="fileInputID">
+              <a>{env.translator('components.file_upload.browse')}</a>
+            </label>
+            <input {...opts} type="file" hidden/>
+          </div>
         </div>
       );
     }
@@ -141,18 +149,18 @@ modulejs.define('HBWFormFileUpload', ['React'], (React) => {
 
     onDragEnter = (event) => {
       event.preventDefault();
-      this.setState({ dragStyleClass: 'attacher activated' });
+      this.setState({ isDragActive: true });
     };
 
     onDragLeave = (event) => {
       event.preventDefault();
-      this.setState({ dragStyleClass: 'attacher' });
+      this.setState({ isDragActive: false });
     };
 
     onDrop = (event) => {
       event.preventDefault();
       const files = Array.from(event.dataTransfer.files);
-      this.setState({ dragStyleClass: 'attacher' });
+      this.setState({ isDragActive: false });
       this.readFiles(files);
     };
 

hbw/config/locales/en.yml

@@ -25,7 +25,8 @@ en:
       no_results_found: No results found
       enter_more_chars: Please enter 2 or more characters
     file_upload:
-      drag_and_drop: Drag and drop files to attach them
+      drag_and_drop: 'Drag and drop files to attach, or '
+      browse: browse
     claiming:
       open_tasks: Open tasks
       claim: Claim

hbw/config/yml_api.test.camunda.yml

@@ -735,8 +735,6 @@ get:
             label: Attach file
             css_class: col-md-4 col-xs-4 col-lg-4
             multiple: true
-            drag_n_drop: true
-            preview: true
   "task/111116/deployed-form":
     "": |
       form:

spec/hbw/features/file_upload_spec.rb

@@ -1,4 +1,4 @@
-feature 'Check file upload field with', js: true do
+feature 'File upload field with', js: true do
   before(:each) do
     user = FactoryBot.create(:user)
 
@@ -20,22 +20,22 @@
   end
 
   scenario 'multuple = true should allow to attach several files' do
-    expect(page).to have_field('homsOrderDataUploadedFile', type: :file)
-    expect(page.find_field('homsOrderDataUploadedFile', type: :file).multiple?).to be true
+    expect(page).to have_field('homsOrderDataUploadedFile', type: :file, visible: :hidden)
+    expect(page.find_field('homsOrderDataUploadedFile', type: :file, visible: :hidden).multiple?).to be true
   end
 
-  scenario 'drag_n_drop = true should render drop aria' do
+  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 them'
+    expect(page.find('.hbw-file-upload')).to have_content 'Drag and drop files to attach, or browse'
   end
 
   scenario 'file list field missing renders warning' do
-    expect(page).to have_selector "[name='homsOrderDataUploadedFile']"
-    expect(page).to have_content  'To load files please add a field of file_list type with the name homsOrderDataFileList'
+    expect(page).to have_field('homsOrderDataUploadedFile', type: :file, visible: :hidden)
+    expect(page).to have_content('To load files please add a field of file_list type with the name homsOrderDataFileList')
     expect_widget_presence
   end
 
-  describe 'preview = true' do
+  describe 'attached files' do
     let(:files_to_attach) do
       [
         'fixtures/attached_files/logo.svg',

spec/support/helpers/files_helper.rb

@@ -1,7 +1,7 @@
 module Features
   module FilesHelper
     def attach_files(input, file_paths)
-      file_input = page.find_field(input, type: :file)
+      file_input = page.find_field(input, type: :file, visible: :hidden)
 
       file_input.attach_file(file_paths.map { |path| Rails.root.join(path) })
     end