Skip to content

Instantly share code, notes, and snippets.

@xitij2000
Last active July 24, 2026 13:15
Show Gist options
  • Select an option

  • Save xitij2000/6ad7341cadc9019849c329b6a005b281 to your computer and use it in GitHub Desktop.

Select an option

Save xitij2000/6ad7341cadc9019849c329b6a005b281 to your computer and use it in GitHub Desktop.
Asset Picker product proposal

TL;DR

Create an Asset Picker that any XBlock can integrate so course authors can browse and pick existing course assets (videos, images, documents, audio, code, other) instead of pasting URLs.

Overview

We can turn the existing Files & Videos page into a reusable picker that XBlocks can open from their edit screens. Authors can then select one or more files, and the picker returns the selection to the XBlock so it can use them.

Problem

When an XBlock needs an author to reference a course file, there is no standard way to do it. In most cases, authors need to paste a URL they copied elsewhere, or each XBlock builds its own file browser, leading to inconsistent experiences for authors and duplicated effort for XBlock developers.

Use Cases

  • As an XBlock developer, I want to provide authors with a way to select and use existing course assets in the XBlock.
  • As an XBlock developer, I want to limit authors to selecting only specific supported files types that my block can handle.
  • As a course author/instructor, I want to be able to reuse existing course assets in my XBlock without having to hunt for and paste their URLs.
  • As a course author/instructor, I want to easily upload new assets for use in my block without needing to open a new tab.

Proposed Solution

Give XBlocks a shared Asset Picker they can launch from their edit screens. The XBlock tells the picker which course it's for, which file types are allowed, whether one or many files can be chosen, and whether the picker is shown as a popup or embedded in the XBlock editor. The author then browses and selects files using the same Files & Videos experience they already know (table or gallery, search, sort, filters), and the picker returns the selection to the XBlock.

  • Pick one file — the author clicks "Select" on a file and the picker returns it immediately.
  • Pick several files — the author checks multiple files and clicks "Use file(s)" to return them.
  • Embedded in an XBlock editor — the picker hides its own page heading and padding so it fits cleanly inside the XBlock's editor.

The selection is returned to the XBlock using a stable, versioned message contract so XBlock developers can integrate without coupling to internal implementation details. (See the Implementation Plan for the technical contract.)

Screenshots

Video

Implementation Plan

Technical Implementation

  • New route /file_picker/:courseId added to the authoring MFE that wraps the existing File display.
  • Options are passed to the file picker via query params, which will be passed to the existing file browser.
  • When in file picker mode, the files UI will show additional UI elements for selecting files and pre-fill filters.
  • On selecting a file, a versioned postMessage will be sent to the opener or parent with details of the file selected.
  • These details will include the file name and url but also additional metadata that can be utilised by the XBlock if needed.

Long-Term Ownership and Maintenance Plans

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment