Main Website →
Media Finder Field
Form Widget
mediafinder - renders a field for selecting an item from the media manager library. Expanding the field displays the media manager to locate a file. The resulting selection is a string as the relative path to the file.
whitepaper_file:
label: Whitepaper PDF
type: mediafinder
The following field properties are supported and commonly used.
| Property | Description |
|---|---|
| label | a name when displaying the form field to the user. |
| default | specifies a default string value, optional. |
| comment | places a descriptive comment below the field. |
| mode | the expected file type, either file, folder or image. Default: file. |
| imageWidth | if using image type, the preview image will be displayed to this width, optional. |
| imageHeight | if using image type, the preview image will be displayed to this height, optional. |
| maxItems | maximum number of items that can be selected. |
| thumbOptions | additional resize options for generating the thumbnail, or pass false to disable thumb generation. |
| useCopyPaste | shows the select all, copy and paste toolbar buttons when selecting multiple items. Default: false. |
Set the mode to image to display a preview of the selected image.
background_image:
label: Background Image
type: mediafinder
mode: image
You may set the mode to folder to only allow selecting a media folder path.
media_folder:
label: Media Folder
type: mediafinder
mode: folder
Unlike the File Upload form widget, the Media Finder form widget stores its data as a string representing the path to the media files selected within the Media Library. It should associate to a normal attribute on your model.
# Selecting Multiple Items
The media finder will attempt to guess if multiple items can be selected based on the jsonable attribute in the model, which is a requirement for storing multiple items.
You may limit the number of items that can be selected using the maxItems property.
media_gallery:
label: Image
type: mediafinder
mode: image
maxItems: 10
# Copying and Pasting Items
When selecting multiple items, enable the useCopyPaste property to add Select All, Copy Selected and Paste buttons to the toolbar. This lets the user copy a selection from one media finder field and paste it into another.
media_gallery:
label: Image
type: mediafinder
mode: image
maxItems: 10
useCopyPaste: true
The copied items are held in the browser and can be pasted into any media finder field that also has this property enabled. Items already present in the target field are skipped, and the maxItems limit is respected when pasting.