Page MenuHomePhabricator

Custom input for file type parameters in VE - Link to Media Selector
Open, Needs TriagePublic

Description

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.

Related tasks

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

Screen Shot 2021-02-05 at 11.57.51.png (478×1 px, 46 KB)

Screen Shot 2021-02-05 at 12.03.15.png (334×1 px, 47 KB)

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.
Media selector search - screen 1.png (1×1 px, 444 KB)
Media selector search - screen 2.png (1×1 px, 2 MB)
Media selector search - screen 3.png (1×1 px, 2 MB)
For upload, include first four screens: select file, upload screen, add details, and detail screen after save.
Media selector upload - screen 1.png (1×1 px, 167 KB)
Media selector upload - screen 2.png (1×1 px, 230 KB)
Media selector upload - screen 3.png (1×1 px, 149 KB)
Media selector upload - screen 4.png (1×1 px, 984 KB)

Open questions

  1. Can we change the header to say "Choose file" instead of "Media settings"?

Event Timeline

Lena_WMDE updated the task description. (Show Details)
ECohen_WMDE renamed this task from DRAFT: Custom input for file type parameters in VE - Link to Media Selector to Custom input for file type parameters in VE - Link to Media Selector.Aug 11 2021, 2:00 PM