Upload for document files with states does not work correctly

The below two core issue are most likely the problem.

#2346893: Duplicate AJAX wrapper around a file field
#2847425: #states not affecting visibility/requirement of managed_file

A simple workaround is to wrap your image upload in a container which manages the conditional logic (#states).

container:
  '#type': container
  '#states':
    visible:
      ':input[name="trigger"]':
        checked: true
  image:
    '#type': image_file
    '#title': Image

I think you could apply required conditional logic to a file upload and server-side validation will check for the file.

Or you can simulate click on upload button for your file.

Drupal.behaviors.managed_file = {
        attach: function (context) {
            $('.form-managed-file', context).once().each(function () {
                $(this).find('.file-upload-btn').children('input').on('change', function() {
                    if ($(this).val() !== '') {
                        var upload = $(this).parents('.form-managed-file').find('input[type="submit"]');
                        upload.trigger('mousedown');
                    }
                });
            });
        }
    };

I postponing this issue because it is a core related issue.

I have found the same issue. After doing a little bit investigation, I have found the library has been changed if we add some condition for the managed_file element.
So my workaround is simple: add following code into template_preprocess_form_element()
if(!empty($vars['element']['#type']) && $vars['element']['#type'] == 'managed_file') {
$vars['#attached']['library'][] = 'file/drupal.file';
}

After attach the file library it works as expected.
Of course need to do more code digging to see which part change the library for this scenario.

Well, I found some solution for that problem. Unfortunately I should work with old version 8.x-5.0-rc6, so I'll attach two patches - for dev and for 8.x-5.0-rc6.
Trouble is in webform.states.js.

$document.on('state:visible', function (e) {
    if (e.trigger) {
      if (e.value) {
        $(':input', e.target).addBack().each(function () {
          restoreValueAndRequired(this);
          triggerEventHandlers(this);
        });
      }
      else {
        // @see https://www.sitepoint.com/jquery-function-clear-form-data/
        $(':input', e.target).addBack().each(function () {
          backupValueAndRequired(this);
          clearValueAndRequired(this);
          triggerEventHandlers(this);
        });
      }
    }
  });

States try to trigger events for elements with conditions, and also run ajax for file input. That's why our file input crashed.

And patch for current version 8.x-5.x-dev

I can't replicate this issue using the attached webform and the bartik theme.

What theme are you using?

I think this issue was fixed via #2975533: Do not trigger file upload event when element is hidden or shown via #states API

I'm also experiencing the orginial issue, though as in #13, I can't reproduce on simplytest.me. Nevertheless, here's the YAML:

uuid: a2916a2d-9a2d-4218-b62f-b9d32cad28c3
langcode: en
status: open
dependencies: {  }
open: null
close: null
weight: 0
uid: 2
template: false
archive: false
id: file_upload_test
title: 'File Upload Test'
description: ''
category: ''
elements: |
  test_upload:
    '#type': managed_file
    '#title': 'Test upload'
    '#file_placeholder': 'This is placeholder'
    '#file_preview': file
    '#max_filesize': '5'
css: ''
javascript: ''
settings:
  ajax: true
  ajax_scroll_top: form
  page: true
  page_submit_path: ''
  page_confirm_path: ''
  form_title: both
  form_submit_once: false
  form_exception_message: ''
  form_open_message: ''
  form_close_message: ''
  form_previous_submissions: true
  form_confidential: false
  form_confidential_message: ''
  form_remote_addr: true
  form_convert_anonymous: false
  form_prepopulate: false
  form_prepopulate_source_entity: false
  form_prepopulate_source_entity_required: false
  form_prepopulate_source_entity_type: ''
  form_reset: false
  form_disable_autocomplete: false
  form_novalidate: false
  form_disable_inline_errors: false
  form_required: false
  form_unsaved: false
  form_disable_back: false
  form_submit_back: false
  form_autofocus: false
  form_details_toggle: false
  form_access_denied: default
  form_access_denied_title: ''
  form_access_denied_message: ''
  form_access_denied_attributes: {  }
  form_file_limit: ''
  submission_label: ''
  submission_log: false
  submission_views: {  }
  submission_views_replace: {  }
  submission_user_columns: {  }
  submission_user_duplicate: false
  submission_access_denied: default
  submission_access_denied_title: ''
  submission_access_denied_message: ''
  submission_access_denied_attributes: {  }
  submission_exception_message: ''
  submission_locked_message: ''
  submission_excluded_elements: {  }
  submission_exclude_empty: false
  submission_exclude_empty_checkbox: false
  previous_submission_message: ''
  previous_submissions_message: ''
  autofill: false
  autofill_message: ''
  autofill_excluded_elements: {  }
  wizard_progress_bar: true
  wizard_progress_pages: false
  wizard_progress_percentage: false
  wizard_progress_link: false
  wizard_start_label: ''
  wizard_preview_link: false
  wizard_confirmation: true
  wizard_confirmation_label: ''
  wizard_track: ''
  preview: 0
  preview_label: ''
  preview_title: ''
  preview_message: ''
  preview_attributes: {  }
  preview_excluded_elements: {  }
  preview_exclude_empty: true
  preview_exclude_empty_checkbox: false
  draft: none
  draft_multiple: false
  draft_auto_save: false
  draft_saved_message: ''
  draft_loaded_message: ''
  confirmation_type: page
  confirmation_title: ''
  confirmation_message: ''
  confirmation_url: ''
  confirmation_attributes: {  }
  confirmation_back: true
  confirmation_back_label: ''
  confirmation_back_attributes: {  }
  confirmation_exclude_query: false
  confirmation_exclude_token: false
  limit_total: null
  limit_total_interval: null
  limit_total_message: ''
  limit_total_unique: false
  limit_user: null
  limit_user_interval: null
  limit_user_message: ''
  limit_user_unique: false
  entity_limit_total: null
  entity_limit_total_interval: null
  entity_limit_user: null
  entity_limit_user_interval: null
  purge: none
  purge_days: null
  results_disabled: false
  results_disabled_ignore: false
  token_update: false
access:
  create:
    roles:
      - anonymous
      - authenticated
    users: {  }
    permissions: {  }
  view_any:
    roles: {  }
    users: {  }
    permissions: {  }
  update_any:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_any:
    roles: {  }
    users: {  }
    permissions: {  }
  purge_any:
    roles: {  }
    users: {  }
    permissions: {  }
  view_own:
    roles: {  }
    users: {  }
    permissions: {  }
  update_own:
    roles: {  }
    users: {  }
    permissions: {  }
  delete_own:
    roles: {  }
    users: {  }
    permissions: {  }
  administer:
    roles: {  }
    users: {  }
    permissions: {  }
  test:
    roles: {  }
    users: {  }
    permissions: {  }
  configuration:
    roles: {  }
    users: {  }
    permissions: {  }
handlers: {  }

Can you replicate this issue using the Bartik theme?

Thanks for the quick reply. It works as expected using the Bartik theme, and is breaking on a subtheme of the Stable theme.

We were able to get this running by updating [theme]/templates/content-edit/file-managed-file.html in our theme to match Bartik (I work with @brianjcook). Specifically, our file lacked {{ attach_library('classy/file') }} and the js-form-managed-file CSS class.