Update image picker on modal open

[giuscris]

This pull request introduces a significant refactor and enhancement to the image picker functionality in the panel, shifting from a static <select>-based approach to a dynamic, AJAX-powered image selection UI. It also adds a new backend endpoint to serve file lists as JSON, and improves modal event handling for better UI responsiveness.

Key changes include:

Image Picker Refactor & Enhancements

• Refactored the ImagePicker component to use a hidden <input> instead of a <select>, and now dynamically loads available images via an AJAX request to a new backend endpoint, displaying image thumbnails for selection. This provides a more user-friendly and interactive image selection experience. [1] [2] [3] [4]
• Updated the insertImage command in the markdown editor to trigger an update of the image picker UI every time the images modal is opened, ensuring the latest images are always displayed.
• Added a type import for ImagePicker in the relevant commands file for better type safety.

Backend API & Routing

• Added a new FilesController@list action that returns a JSON list of files (with metadata such as filename, URI, size, type, thumbnail, etc.), with proper permission and error handling.
• Registered a new route panel.files.list to expose the above action as a POST XHR endpoint for use by the frontend.

Modal Event Handling Improvements

• Added onBeforeOpen and onBeforeClose hooks to the Modal class, and ensured these callbacks are dispatched at the appropriate times, allowing components to react before a modal is shown or hidden (e.g., to refresh content). [1] [2] [3]

[Copilot]

Pull request overview

This PR modernizes the Panel’s image picking flow by replacing the static <select>-driven picker with an AJAX-loaded thumbnail picker that refreshes each time the images modal opens. It also introduces a new XHR backend endpoint to provide file metadata as JSON and extends the Modal component with before-open/before-close hooks.

Changes:

• Refactor ImagePicker to fetch and render image thumbnails dynamically via a new panel.files.list XHR endpoint.
• Add onBeforeOpen / onBeforeClose hooks to Modal and use onBeforeOpen to refresh the image list whenever the images modal opens.
• Add backend route + controller action to return file lists as JSON for the picker.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
panel/views/fields/page/imagepicker.php	Replaces <select> with a hidden input and provides the XHR URL for dynamic loading.
panel/src/ts/components/modal.ts	Adds before-open/before-close callbacks and dispatches them during open/close.
panel/src/ts/components/inputs/image-picker.ts	Implements AJAX-driven thumbnail rendering and selection handling.
panel/src/ts/components/inputs/editor/markdown/commands.ts	Refreshes the image picker each time the images modal opens.
panel/src/ts/components/form.ts	Updates Form’s ImagePicker binding from HTMLSelectElement to HTMLInputElement.
panel/config/routes/routes.php	Registers the new panel.files.list XHR route.
formwork/src/Panel/Controllers/FilesController.php	Adds FilesController@list JSON endpoint to serve file metadata.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.