[D7] Duplicate HTML IDs are created for file_managed_file fields

Steps to reproduce this issue:

1. Create any form element with managed_file type.
2. Enable file_validation_extensions
3. Use the file browser to upload a file

Upon uploading the file you will get a console error: Uncaught TypeError: Cannot read property 'length' of undefined because of duplicate ID.
This is because the form element wrapper has the same ID as the managed file input element and file.js dies when finding the first ID which has no value property (which should normally be the filename - in case the proper input element is found).

<div id="edit-my-file-upload" class="form-managed-file"><input type="file" id="edit-my-file-upload" name="files[my_file]" size="22" class="form-file"><input type="submit" id="edit-my-file-upload-button" name="my_file_upload_button" value="Upload" class="form-submit ajax-processed"><input type="hidden" name="my_file[fid]" value="0">
</div>

This issue exists in core since the change below:

  // Append the '-upload' to the #id so the field label's 'for' attribute
  // corresponds with the file element.
  $original_id = $element['#id'];
  $element['#id'] .= '-upload';

Which is mentioned here: https://www.drupal.org/node/1734716

This code was applied in march 2015 so it influences all core versions since then.

The first clues of this issue were mentioned here: https://www.drupal.org/node/2542848

Patch is coming up.