When adding a file field as a child of a "Flexbox Layout" item, the file is uploaded but the value is not saved on form submission; that is, there is no value in the "value" column of the "webform_submission_data" table.

Looking specifically at the logo_upload field on a real life form:

Does Not Save Value on Form Submission:

ppa_contact_info:
  '#type': markup
  '#markup': '<h3>Contact Information</h3>'
group_1:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  organization:
    '#type': textfield
    '#title': Organization
    '#title_display': before
    '#required': true
  website:
    '#type': textfield
    '#title': Website(s)
    '#title_display': before
    '#required': true
group_2:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  name:
    '#type': textfield
    '#title': Name
    '#title_display': before
    '#required': true
  title:
    '#type': textfield
    '#title': Title
    '#title_display': before
    '#required': true
email_phone:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  phone:
    '#type': tel
    '#title': Phone
    '#title_display': before
    '#required': true
  email:
    '#type': email
    '#title': Email
    '#title_display': before
    '#required': true
ppa_organization_info:
  '#type': markup
  '#markup': '<h3>Tier 1 Only</h3><br />'
tier1_group1:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  press_briefing_room:
    '#type': select
    '#title': 'Press Briefing Room'
    '#title_display': before
    '#options': yes_no
  shelving_preference:
    '#type': select
    '#title': 'Shelving Preference'
    '#title_display': before
    '#options':
      Slanted: Slanted
      Straight: Straight
  booth_id_sign_copy_organization_name_:
    '#type': textfield
    '#title': 'Booth ID Sign Copy (organization name)'
    '#title_display': before
top_five_booth_preferences_if_floor_plan_is_ready_:
  '#type': textarea
  '#title': 'Top Five Booth Preferences (if floor plan is ready)'
  '#title_display': before
tier_1_and_2:
  '#type': markup
  '#display_on': both
  '#markup': '<h3>Tier 1 and 2</h3><br />'
  tier1_2_group1:
    '#type': flexbox
    '#attributes':
      class:
        - 'form--inline clearfix'
      style: form-group
    logo_upload:
      '#type': image_file
      '#title': 'Logo Upload (high-resolution, .eps or .jpeg file)'
      '#title_display': before
      '#required': true
      '#file_extensions': 'eps jpg'
    print_quantity_for_distribution_of_show_materials_:
      '#type': number
      '#title': 'Print Quantity (for distribution of show materials)'
      '#title_display': before
      '#required': true
    print_date_when_materials_should_arrive_at_your_office_:
      '#type': date
      '#title': 'Print Date (when materials should arrive at your office)'
      '#title_display': before
      '#required': true
      '#format': month_day_year
print_material_address:
  '#type': address
  '#title': 'Print Material Address'
  '#title_display': before
  '#required': true
  '#address__required': true
  '#city__title': City
  '#city__required': true
  '#state_province__required': true
  '#postal_code__required': true
  '#country__required': true
quotes_for_use_by_pmmi_in_promotional_materials_press_releases_e:
  '#type': textarea
  '#title': 'Quotes for use by PMMI in promotional materials,  press releases, etc.'
  '#description': '<p>(please include an attribution name,&nbsp;title and organization name)</p>'
  '#title_display': before
  '#description_display': tooltip
specs_groupd:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  print_digital_ad_specifications:
    '#type': textfield
    '#title': 'Print/Digital Ad Specifications'
    '#title_display': before
    '#required': true
  ad_specs_upload_optional_:
    '#type': managed_file
    '#title': 'Ad Specs Upload (optional)'
    '#title_display': before
    '#file_extensions': 'gif jpg png pdf'
  print_digital_ad_deadline:
    '#type': date
    '#title': 'Print/Digital Ad Deadline'
    '#title_display': before
    '#required': true
    '#format': month_day_year
specs_group2:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  website_newsletter_ad_specifications:
    '#type': textfield
    '#title': 'Website/Newsletter Ad Specifications'
    '#title_display': before
    '#required': true
resources:
  '#type': markup
  '#markup': 'Please provide an actual (or estimate) reach number (subscribers, members, attendees, registrants, etc.) for each of the promotional resources available to your organization. Additionally, provide the relevant name and/or description for each.'
website_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  website_s_:
    '#type': textfield
    '#title': Website(s)
    '#title_display': before
  website_reach:
    '#type': number
    '#title': 'Website Reach'
    '#title_display': before
publication_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  publication_s_:
    '#type': textfield
    '#title': Publication(s)
    '#title_display': before
  publication_reach:
    '#type': number
    '#title': 'Publication Reach'
    '#title_display': before
newsletter_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  newsletter_s_:
    '#type': textfield
    '#title': Newsletter(s)
    '#title_display': before
  news_reach:
    '#type': number
    '#title': 'Newsletter Reach'
    '#title_display': before
email_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  email_list:
    '#type': textfield
    '#title': 'Email List'
    '#title_display': before
  email_list_reach:
    '#type': number
    '#title': 'Email List Reach'
    '#title_display': before
membership_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  membership:
    '#type': textfield
    '#title': Membership
    '#title_display': before
  membership_reach:
    '#type': number
    '#title': 'Membership Reach'
    '#title_display': before
social_media_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  social_media:
    '#type': textfield
    '#title': 'Social Media'
    '#title_display': before
  social_media_reach:
    '#type': number
    '#title': 'Social Media Reach'
    '#title_display': before
other_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  other:
    '#type': textfield
    '#title': Other
    '#title_display': before
  other_reach:
    '#type': number
    '#title': 'Other Reach'
    '#title_display': before

Saves Value on Form Submission:

ppa_contact_info:
  '#type': markup
  '#markup': '<h3>Contact Information</h3>'
group_1:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  organization:
    '#type': textfield
    '#title': Organization
    '#title_display': before
    '#required': true
  website:
    '#type': textfield
    '#title': Website(s)
    '#title_display': before
    '#required': true
group_2:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  name:
    '#type': textfield
    '#title': Name
    '#title_display': before
    '#required': true
  title:
    '#type': textfield
    '#title': Title
    '#title_display': before
    '#required': true
email_phone:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  phone:
    '#type': tel
    '#title': Phone
    '#title_display': before
    '#required': true
  email:
    '#type': email
    '#title': Email
    '#title_display': before
    '#required': true
ppa_organization_info:
  '#type': markup
  '#markup': '<h3>Tier 1 Only</h3><br />'
tier1_group1:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  press_briefing_room:
    '#type': select
    '#title': 'Press Briefing Room'
    '#title_display': before
    '#options': yes_no
  shelving_preference:
    '#type': select
    '#title': 'Shelving Preference'
    '#title_display': before
    '#options':
      Slanted: Slanted
      Straight: Straight
  booth_id_sign_copy_organization_name_:
    '#type': textfield
    '#title': 'Booth ID Sign Copy (organization name)'
    '#title_display': before
top_five_booth_preferences_if_floor_plan_is_ready_:
  '#type': textarea
  '#title': 'Top Five Booth Preferences (if floor plan is ready)'
  '#title_display': before
tier_1_and_2:
  '#type': markup
  '#display_on': both
  '#markup': '<h3>Tier 1 and 2</h3><br />'
  logo_upload:
    '#type': image_file
    '#title': 'Logo Upload (high-resolution, .eps or .jpeg file)'
    '#title_display': before
    '#required': true
    '#file_extensions': 'eps jpg'
  tier1_2_group1:
    '#type': flexbox
    '#attributes':
      class:
        - 'form--inline clearfix'
      style: form-group
    print_quantity_for_distribution_of_show_materials_:
      '#type': number
      '#title': 'Print Quantity (for distribution of show materials)'
      '#title_display': before
      '#required': true
    print_date_when_materials_should_arrive_at_your_office_:
      '#type': date
      '#title': 'Print Date (when materials should arrive at your office)'
      '#title_display': before
      '#required': true
      '#format': month_day_year
print_material_address:
  '#type': address
  '#title': 'Print Material Address'
  '#title_display': before
  '#required': true
  '#address__required': true
  '#city__title': City
  '#city__required': true
  '#state_province__required': true
  '#postal_code__required': true
  '#country__required': true
quotes_for_use_by_pmmi_in_promotional_materials_press_releases_e:
  '#type': textarea
  '#title': 'Quotes for use by PMMI in promotional materials,  press releases, etc.'
  '#description': '<p>(please include an attribution name,&nbsp;title and organization name)</p>'
  '#title_display': before
  '#description_display': tooltip
specs_groupd:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  print_digital_ad_specifications:
    '#type': textfield
    '#title': 'Print/Digital Ad Specifications'
    '#title_display': before
    '#required': true
  ad_specs_upload_optional_:
    '#type': managed_file
    '#title': 'Ad Specs Upload (optional)'
    '#title_display': before
    '#file_extensions': 'gif jpg png pdf'
  print_digital_ad_deadline:
    '#type': date
    '#title': 'Print/Digital Ad Deadline'
    '#title_display': before
    '#required': true
    '#format': month_day_year
specs_group2:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  website_newsletter_ad_specifications:
    '#type': textfield
    '#title': 'Website/Newsletter Ad Specifications'
    '#title_display': before
    '#required': true
resources:
  '#type': markup
  '#markup': 'Please provide an actual (or estimate) reach number (subscribers, members, attendees, registrants, etc.) for each of the promotional resources available to your organization. Additionally, provide the relevant name and/or description for each.'
website_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  website_s_:
    '#type': textfield
    '#title': Website(s)
    '#title_display': before
  website_reach:
    '#type': number
    '#title': 'Website Reach'
    '#title_display': before
publication_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  publication_s_:
    '#type': textfield
    '#title': Publication(s)
    '#title_display': before
  publication_reach:
    '#type': number
    '#title': 'Publication Reach'
    '#title_display': before
newsletter_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  newsletter_s_:
    '#type': textfield
    '#title': Newsletter(s)
    '#title_display': before
  news_reach:
    '#type': number
    '#title': 'Newsletter Reach'
    '#title_display': before
email_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  email_list:
    '#type': textfield
    '#title': 'Email List'
    '#title_display': before
  email_list_reach:
    '#type': number
    '#title': 'Email List Reach'
    '#title_display': before
membership_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  membership:
    '#type': textfield
    '#title': Membership
    '#title_display': before
  membership_reach:
    '#type': number
    '#title': 'Membership Reach'
    '#title_display': before
social_media_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  social_media:
    '#type': textfield
    '#title': 'Social Media'
    '#title_display': before
  social_media_reach:
    '#type': number
    '#title': 'Social Media Reach'
    '#title_display': before
other_group:
  '#type': flexbox
  '#attributes':
    class:
      - 'form--inline clearfix'
    style: form-group
  other:
    '#type': textfield
    '#title': Other
    '#title_display': before
  other_reach:
    '#type': number
    '#title': 'Other Reach'
    '#title_display': before
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

dobrzyns created an issue. See original summary.

dobrzyns’s picture

Issue summary: View changes
jrockowitz’s picture

Can you please simplify your example to only contain the elements required to duplicate the issue.

jrockowitz’s picture

Using the above form the below errors were logged.

Notice: Undefined index: #extended in Drupal\file\Element\ManagedFile::validateManagedFile() (line 430 of core/modules/file/src/Element/ManagedFile.php)

Notice: Undefined index: fids in Drupal\file\Element\ManagedFile::validateManagedFile() (line 431 of core/modules/file/src/Element/ManagedFile.php).

The below elements can be used replicate the issue and confirms that it most likely related to flexbox

flexbox:
  '#type': flexbox
  image_file:
    '#type': image_file
    '#file_extensions': 'eps jpg'
jrockowitz’s picture

This is the code that is causing the issue

http://cgit.drupalcode.org/webform/tree/src/Plugin/WebformElement/Webfor...

This code is trying to work-around #2705471: Allow states on managed file form widgets but this work-around is conflicting with the flexbox wrapper.

jrockowitz’s picture

jrockowitz’s picture

Status: Active » Needs review

  • jrockowitz committed 5444a4c on 8.x-5.x
    Issue #2842810 by jrockowitz, dobrzyns: File Field Values Not Saved on...
jrockowitz’s picture

Status: Needs review » Fixed

Fixed! Please checkout or download the latest dev release to review.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.