**Background**
When parameter has the TemplateData property of Type: File, VisualEditor displays a specialized input field. This ticket adds a button into the input field which opens the existing modal for media from the VisualEditor, with two tabs: Search on Commons and Upload. Allows users to find images without needing to open a separate tab and select them without needing to know how to grab the exact file name to copy/paste. The selected file name is passed back into the field, without the prefix.
Implementation of test instance: {T260886}
Investigation ticket: {T258195}
**Requirements**
Note: behavior is unchanged from the test instance.
[] Placeholder text says "No file is selected" unless there is a default value. If there is, display the default in the input like other VE dialog input types. The button text should say 'Add file'
[] Clicking 'Add file' opens the media selector to the 'Search' tab
[] Once the selector is open, the user is able to switch between the two tabs.
[] The media selector opens on top of the VE template dialog, which is faded and not clickable if visible beyond the media selector
[] The media selector allows a user to proceed through the screens to the point of clicking the button 'Use this image,' without inputing additional information (such as caption or alt text). Screenshots detail this below in the 'For reference' section.
[] When a user clicks, 'Use this image,' the file name is passed into the VE template dialog without the prefix.
[] Users can type in or paste in a file name without using the button to find a file.
[] Users can still use the button to add a file name when there is text inside the input field. If the user closes out of the media selector, the existing text stays. If the user selects a new image or uploads a new one, the text is replaced.
[] Allow to use the media selector to choose the following media types on commons: image, movie, pdf, audio.
[] Once a file has been selected and added to the template, or when editing a template where a file has already been selected, the button text should be changed to "Change file".
[] Clicking the "Change file" button should open the media selector in the 'Search' tab and follow the same behavior as specified above.
**Mock**
{F34092875}
{F34092880}
**For reference**
The selector should not include all screens. Only include the file selection process and not adding captions, alt text, size, position, since these are typically done inside the template itself (see below). When the user clicks the button in the upper right corner, 'Use this image," the file name is inserted into the template dialog into the correct field (from both search and upload flows). All other screens would not be used.
| For search, include first three screens: empty search, search results, details about an image. | {F31942923} | {F31942925} | {F31942924}
| For upload, include first four screens: select file, upload screen, add details, and detail screen after save. | {F31942932} | {F31942933} | {F31942931} | {F31942934}
**Open questions**
1. Can we change the header to say "Choose file" instead of "Media settings"?