Options
All
  • Public
  • Public/Protected
  • All
Menu

The FilePicker application renders contents of the server-side public directory. This app allows for navigating and uploading files to the public path.

param [options={}]

Options that configure the behavior of the FilePicker

Hierarchy

Index

Constructors

Properties

request: string

The full requested path given by the user

sources: any

The file sources which are available for browsing

activeSource: string

Track the active source tab which is being browsed

callback: Function

A callback function to trigger once a file has been selected

results: any

The latest set of results browsed from the server

type: string

The general file type which controls the set of extensions which will be accepted

field: HTMLElement

The target HTML element this file picker is bound to

button: HTMLElement

A button which controls the display of the picker UI

displayMode: string

The display mode of the FilePicker UI

extensions: string[]

The current set of file extensions which are being filtered upon

_loaded: boolean
result: any
options: any

The options provided to this application upon initialization

appId: number

The application ID is a unique incrementing integer which is used to identify every application window drawn by the VTT

_element: jQuery

An internal reference to the HTML element this application renders

position: any

Track the current position and dimensions of the Application UI

_dragDrop: DragDrop[]

DragDrop workflow handlers which are active for this Application

_tabs: Tabs[]

Tab navigation handlers which are active for this Application

_searchFilters: SearchFilter[]

SearchFilter handlers which are active for this Application

_minimized: boolean

Track whether the Application is currently minimized

_scrollPositions: any

Track the most recent scroll positions for any vertically scrolling containers

_state: number

The current render state of the Application

see

{Application.RENDER_STATES}

_priorState: number

The prior render state of this Application. This allows for rendering logic to understand if the application is being rendered for the first time.

see

{Application.RENDER_STATES}

LAST_BROWSED_DIRECTORY: string = ""

Record the last-browsed directory path so that re-opening a different FilePicker instance uses the same target

LAST_TILE_SIZE: number = null

Record the last-configured tile size which can automatically be applied to new FilePicker instances

LAST_DISPLAY_MODE: string = "list"

Record the last-configured display mode so that re-opening a different FilePicker instance uses the same mode.

DISPLAY_MODES: string[] = ...

Enumerate the allowed FilePicker display modes

S3_BUCKETS: any[] = null

Cache the names of S3 buckets which can be used

_favorites: any
RENDER_STATES: Readonly<{ CLOSING: -2; CLOSED: -1; NONE: 0; RENDERING: 1; RENDERED: 2; ERROR: 3 }> = ...

The sequence of rendering states that track the Application life-cycle.

Methods

  • _inferCurrentDirectory(target: string): string[]
  • Given a current file path, determine the directory it belongs to

    Parameters

    • target: string

      The currently requested target path

    Returns string[]

    An array of the inferred source and target directory path

  • getData(options?: {}): Promise<{ bucket: any; canGoBack: boolean; canUpload: boolean; canSelect: boolean; cssClass: string; dirs: any; displayMode: string; extensions: string[]; files: any; isS3: boolean; noResults: boolean; selected: string; source: any; sources: any; target: string; tileSize: any; user: User; submitText: string; favorites: string[] }>
  • override

    Parameters

    • options: {} = {}

      Returns Promise<{ bucket: any; canGoBack: boolean; canUpload: boolean; canSelect: boolean; cssClass: string; dirs: any; displayMode: string; extensions: string[]; files: any; isS3: boolean; noResults: boolean; selected: string; source: any; sources: any; target: string; tileSize: any; user: User; submitText: string; favorites: string[] }>

    • setPosition(pos?: {}): void | { left: number; top: number; width: number; height: number; scale: number }
    • Set the application position and store its new location. Returns the updated position object for the application containing the new values.

      Parameters

      • pos: {} = {}

        Positional data

        Returns void | { left: number; top: number; width: number; height: number; scale: number }

        |void}

      • browse(target: string, options?: any): Promise<any>
      • Browse to a specific location for this FilePicker instance

        Parameters

        • target: string
        • options: any = {}

        Returns Promise<any>

      • Render the Application by evaluating it's HTML template against the object of data provided by the getData method If the Application is rendered as a pop-out window, wrap the contained HTML in an outer frame with window controls

        Parameters

        • force: any

          Add the rendered application to the DOM if it is not already present. If false, the Application will only be re-rendered if it is already present.

        • options: any

          Additional rendering options which are applied to customize the way that the Application is rendered in the DOM.

        Returns Application | FilePicker

        The rendered Application instance

      • activateListeners(html: any): void
      • After rendering, activate event listeners which provide interactivity for the Application. This is where user-defined Application subclasses should attach their event-handling logic.

        Parameters

        • html: any

        Returns void

      • _onChangeTab(event: any, tabs: any, active: any): void
      • _canDragStart(selector: any): boolean
      • _canDragDrop(selector: any): boolean
      • _onDragStart(event: any): void
      • _onDrop(event: any): Promise<any>
      • _onSearchFilter(event: any, query: any, rgx: any, html: any): void
      • _onSubmit(ev: any): any
      • inheritdoc

        Parameters

        • ev: any

        Returns any

      • activateTab(tabName: string, options?: { group: string; triggerCallback: boolean }): void
      • Change the currently active tab

        Parameters

        • tabName: string

          The target tab name to switch to

        • options: { group: string; triggerCallback: boolean } = {}

          Options which configure changing the tab

          • group: string

            A specific named tab group, useful if multiple sets of tabs are present

          • triggerCallback: boolean

            Whether to trigger tab-change callback functions

        Returns void

      • bringToTop(): void
      • Bring the application to the top of the rendering stack

        Returns void

      • close(options?: any): Promise<void>
      • Close the application and un-register references to it within UI mappings This function returns a Promise which resolves once the window closing animation concludes

        fires

        closeApplication

        Parameters

        • options: any = {}

        Returns Promise<void>

        A Promise which resolves once the application is closed

      • minimize(): Promise<void>
      • Minimize the pop-out window, collapsing it to a small tab Take no action for applications which are not of the pop-out variety or apps which are already minimized

        Returns Promise<void>

        A Promise which resolves once the minimization action has completed

      • maximize(): Promise<void>
      • Maximize the pop-out window, expanding it to its original size Take no action for applications which are not of the pop-out variety or are already maximized

        Returns Promise<void>

        A Promise which resolves once the maximization action has completed

      • _render(force?: boolean, options?: any): Promise<void>
      • An asynchronous inner function which handles the rendering of the Application

        fires

        renderApplication

        Parameters

        • force: boolean = false

          Render and display the application even if it is not currently displayed.

        • options: any = {}

          Additional options which update the current values of the Application#options object

        Returns Promise<void>

        A Promise that resolves to the Application once rendering is complete

      • _saveScrollPositions(html: jQuery): void
      • Persist the scroll positions of containers within the app before re-rendering the content

        Parameters

        • html: jQuery

          The HTML object being traversed

        Returns void

      • _restoreScrollPositions(html: jQuery): void
      • Restore the scroll positions of containers within the app after re-rendering the content

        Parameters

        • html: jQuery

          The HTML object being traversed

        Returns void

      • _renderOuter(): Promise<jQuery>
      • Render the outer application wrapper

        Returns Promise<jQuery>

        A promise resolving to the constructed jQuery object

      • _activateCoreListeners(html: jQuery): void
      • Activate required listeners which must be enabled on every Application. These are internal interactions which should not be overridden by downstream subclasses.

        Parameters

        • html: jQuery

        Returns void

      • _onDragOver(event: DragEvent): void
      • Callback actions which occur when a dragged element is over a drop target.

        Parameters

        • event: DragEvent

          The originating DragEvent

        Returns void

      • _waitForImages(): Promise<void>
      • Wait for any images present in the Application to load.

        Returns Promise<void>

        A Promise that resolves when all images have loaded.

      • _getExtensions(type: string): string[]
      • Get the valid file extensions for a given named file picker type

        Parameters

        • type: string

        Returns string[]

      • _onChangeDisplayMode(event: MouseEvent): void
      • Handle a click event to change the display mode of the File Picker

        Parameters

        • event: MouseEvent

          The triggering click event

        Returns void

      • _onRequestTarget(event: KeyboardEvent): Promise<any>
      • Handle user submission of the address bar to request an explicit target

        Parameters

        • event: KeyboardEvent

          The originating keydown event

        Returns Promise<any>

      • _onClickFavorite(event: MouseEvent): Promise<void>
      • Handle user interaction with the favorites

        Parameters

        • event: MouseEvent

          The originating click event

        Returns Promise<void>

      • _onLazyLoadImages(...args: any[]): any
      • Handle requests from the IntersectionObserver to lazily load an image file

        Parameters

        • Rest ...args: any[]

        Returns any

      • _onPick(event: Event): Promise<any>
      • Handle file or folder selection within the file picker

        Parameters

        • event: Event

          The originating click event

        Returns Promise<any>

      • _onClickDirectoryControl(event: PointerEvent): any
      • Handle backwards navigation of the folder structure.

        Parameters

        • event: PointerEvent

          The triggering click event

        Returns any

      • _createDirectoryDialog(source: any): Promise<any>
      • Present the user with a dialog to create a subdirectory within their currently browsed file storage location.

        Parameters

        • source: any

          The data source being browsed

        Returns Promise<any>

      • _onChangeBucket(event: Event): Promise<any>
      • Handle changes to the bucket selector

        Parameters

        • event: Event

          The S3 bucket select change event

        Returns Promise<any>

      • _onUpload(ev: Event): Promise<any>
      • Handle file upload

        Parameters

        • ev: Event

          The file upload event

        Returns Promise<any>

      • setFavorite(source: string, path: string): Promise<any>
      • Add the given path for the source to the favorites

        Parameters

        • source: string

          The source of the folder (e.g. "data", "public")

        • path: string

          The path to a folder

        Returns Promise<any>

      • removeFavorite(source: string, path: string): Promise<void>
      • Remove the given path from the favorites

        Parameters

        • source: string

          The source of the folder (e.g. "data", "public")

        • path: string

          The path to a folder

        Returns Promise<void>

      • matchS3URL(url: string): RegExpMatchArray
      • Test a URL to see if it matches a well known s3 key pattern

        Parameters

        • url: string

          An input URL to test

        Returns RegExpMatchArray

        A regular expression match

      • browse(source: string, target: string, options?: { bucket: string; extensions: string[]; wildcard: boolean }): Promise<any>
      • Browse files for a certain directory location

        Parameters

        • source: string

          The source location in which to browse. See FilePicker#sources for details

        • target: string

          The target within the source location

        • options: { bucket: string; extensions: string[]; wildcard: boolean } = {}

          Optional arguments

          • bucket: string
          • extensions: string[]
          • wildcard: boolean

        Returns Promise<any>

        A Promise which resolves to the directories and files contained in the location

      • configurePath(source: string, target: string, options?: any): Promise<any>
      • Configure metadata settings regarding a certain file system path

        Parameters

        • source: string

          The source location in which to browse. See FilePicker#sources for details

        • target: string

          The target within the source location

        • options: any = {}

          Optional arguments which modify the request

        Returns Promise<any>

      • createDirectory(source: string, target: string, options?: any): Promise<any>
      • Create a subdirectory within a given source. The requested subdirectory path must not already exist.

        Parameters

        • source: string

          The source location in which to browse. See FilePicker#sources for details

        • target: string

          The target within the source location

        • options: any = {}

          Optional arguments which modify the request

        Returns Promise<any>

      • upload(source: string, path: string, file: File, body?: any, [options]?: { notify: boolean }): Promise<any>
      • Dispatch a POST request to the server containing a directory path and a file to upload

        Parameters

        • source: string

          The data source to which the file should be uploaded

        • path: string

          The destination path

        • file: File

          The File object to upload

        • body: any = {}
        • [options]: { notify: boolean } = {}

          Additional options to configure how the method behaves

          • notify: boolean

        Returns Promise<any>

        The response object

      • uploadPersistent(packageId: string, path: string, file: File, body?: any, [options]?: { notify: boolean }): Promise<any>
      • A convenience function that uploads a file to a given package's persistent /storage/ directory

        Parameters

        • packageId: string

          The id of the package to which the file should be uploaded. Only supports Systems and Modules.

        • path: string

          The relative path in the package's storage directory the file should be uploaded to

        • file: File

          The File object to upload

        • body: any = {}
        • [options]: { notify: boolean } = {}

          Additional options to configure how the method behaves

          • notify: boolean

        Returns Promise<any>

        The response object

      • Bind the file picker to a new target field. Assumes the user will provide a HTMLButtonElement which has the data-target and data-type attributes The data-target attribute should provide the name of the input field which should receive the selected file The data-type attribute is a string in ["image", "audio"] which sets the file extensions which will be accepted

        Parameters

        • button: HTMLButtonElement

          The button element

        Returns FilePicker

      • _manageFiles(data: any, options: any): Promise<any>
      • General dispatcher method to submit file management commands to the server

        Parameters

        • data: any

          Request data dispatched to the server

        • options: any

          Options dispatched to the server

        Returns Promise<any>

        The server response

      Accessors

      • get title(): any
      • override

        Returns any

      • get source(): any
      • Return the source object for the currently active source

        Returns any

      • get target(): string
      • Return the target directory for the currently active source

        Returns string

      • get canUpload(): boolean
      • Return a flag for whether the current user is able to upload file content

        Returns boolean

      • get id(): string
      • Return the CSS application ID which uniquely references this UI element

        Returns string

      • get element(): jQuery
      • Return the active application element, if it currently exists in the DOM

        Returns jQuery

      • get template(): string
      • The path to the HTML template file which should be used to render the inner content of the app

        Returns string

      • get popOut(): boolean
      • Control the rendering style of the application. If popOut is true, the application is rendered in its own wrapper window, otherwise only the inner app content is rendered

        Returns boolean

      • get rendered(): boolean
      • Return a flag for whether the Application instance is currently rendered

        Returns boolean

      • get closing(): boolean
      • Whether the Application is currently closing.

        Returns boolean

      • Get favorite folders for quick access

        Returns Map<string, FavoriteFolder>

      • Set favorite folders for quick access

        Parameters

        Returns void

      • get uploadURL(): string
      • Return the upload URL to which the FilePicker should post uploaded files

        Returns string