>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3577219. --> Reported by: [vipin.mittal18](https://www.drupal.org/user/319716) Related to !755 !733 !729 !728 !689 >>> <h3>Summary</h3> <p>This ticket introduces multi-value support for <strong>Image</strong> and <strong>Video</strong> prop types in the Canvas component editor UI.</p> <p>Unlike other prop types(<span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3576003" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3576003</a></span>, <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3573096" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3573096</a></span>), media items should be displayed directly in the list as thumbnails. Users will be able to reorder, remove, and add media items using inline controls without opening a separate editing panel.</p> <hr> <h3>Problem Statement</h3> <p>Currently, the Canvas prop configuration UI does not support managing multiple media items for Image and Video prop types in a user-friendly way.</p> <p>For media props, users should be able to:</p> <ul> <li>View media items as thumbnails.</li> <li>Reorder media items using drag-and-drop.</li> <li>Remove media items directly from the list.</li> <li>Add additional media items using an add media control.</li> <li>See a clear indicator of how many media items are currently remaining to attach.</li> </ul> <hr> <h3>Scope</h3> <ul> <li><strong>UI only</strong> &mdash; This ticket focuses on front-end behavior.</li> <li>No backend schema or storage changes are included.</li> <li>Applies to both <strong>Image</strong> and <strong>Video</strong> prop types.</li> </ul> <hr> <h3>Proposed Behavior</h3> <h4>1. Media Thumbnail List</h4> <p>Media items should be displayed directly in the UI as a list of thumbnails.</p> <p>Each media item should include:</p> <ul> <li>A thumbnail preview of the image or video.</li> <li>A <strong>six-dot matrix drag handle</strong> to reorder items.</li> <li>A <strong>remove icon button</strong> to delete the media item.</li> </ul> <p>No popup or side panel should be opened when interacting with the media items.</p> <h4>2. Drag and Drop Reordering</h4> <ul> <li>Media items can be reordered using the six-dot drag handle.</li> <li>Dragging an item should allow users to move the item up or down in the list.</li> <li><del>The underlying data model should update immediately after the reorder operation.</del></li> </ul> <h4>3. Removing Media</h4> <ul> <li>Each media item includes a remove icon.</li> <li>Clicking the remove icon removes the media item immediately.</li> <li>No confirmation dialog should appear.</li> <li><del>The UI and underlying data model should update instantly.</del></li> </ul> <h4>4. Media Count Indicator</h4> <p>Below the media list, a text indicator should display the number of currently remaining media items.</p> <p>Example format:</p> <ul> <li><strong>2 media items renaming</strong></li> </ul> <p>This helps users understand how many media items are remain to attach.</p> <h4>5. Add Media Button</h4> <p>Below the counter text, display an <strong>Add Media</strong> button.</p> <ul> <li>Clicking this button opens the media selector.</li> <li>Users can select additional media items.</li> <li>The selected media should appear in the list as thumbnails.</li> </ul> <p>If a maximum limit is configured:</p> <ul> <li>The Add Media button should not visible.</li> </ul> <hr> <h3>Acceptance Criteria</h3> <ul> <li>Image and Video prop types support multiple media items.</li> <li>Media items render as thumbnails in a list.</li> <li>Users can reorder items via drag-and-drop using the six-dot handle.</li> <li>Users can remove media items using the remove icon.</li> <li>Removing media does not show a confirmation dialog.</li> <li>A counter text displays the number of media items renaming.</li> <li>An Add Media button allows users to attach additional media.</li> <li>The Add Media button becomes invisible when the configured limit is reached.</li> <li>The drag handle remains disabled when there is only one media item and becomes visible for subsequent media items when multiple items are present.</li> </ul> <p><img src="https://www.drupal.org/files/issues/2026-03-05/Image%3AVideo%20muli%20value%20support.png" alt="Image/Video muli value support" width="200"></p> > Related issue: [Issue #3546869](https://www.drupal.org/node/3546869)