Refactor image and file field widgets to improve contrib compatibility and to make their templates and preprocess functions DRY

Problem/Motivation

#3096059: Inconsistent vertical tabs styling in image widget crop widget with Claro theme revealed an issue of Claro's image and file widget implementation: when a contrib module adds additional form elements to the image or file widgets, those elements will be displayed in the row of the primary elements (where we want to display only the file name and the remove button, or the upload input and the upload button).

I also noticed that the structure of the image widget template is very similar to the structure of the file widget's template, and since the 'contrib addition' issue can happen with the file widget as well, it would be a good idea to use the same template for the file and for the image widget and fix the described case for both.

Steps to reproduce

1. Install Drupal with Standard profile
2. Install Claro and set it as admin theme. Make sure that the admin theme is used for node add/edit page.
3. Install ImageWidgetCrop (image_widget_crop) module.
4. Add at least one crop type at /admin/config/media/crop.
5. Create at least one image style that uses the manual crop effect. On the effect config page, select the recently added crop type. (You can just update one of the existing image style except Crop preview.)

6. Change the article's form display and make image field use the ImageWidget Crop widget at /admin/structure/types/manage/article/form-display:

   1. Show default crop area
   2. Warn the user if the crop is used more than once.
   3. Preview image style: Large.
   4. Crop preview image style: Crop thumbnail
   5. At Crop Type, select at lease one crop type.
7. Visit /node/add/article, and add an image to the Image field.

Seven:

Claro (without fix):

Proposed resolution

Display additional widget elements after the core-provided ones.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet