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

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: any): 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 }>
  • override

    Parameters

    • options: any

    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 }>

  • 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(force: any, options: any): 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 any

    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

    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

  • setPosition(position?: { left: number; top: number; width: number; height: string | number; scale: number }): 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

    • position: { left: number; top: number; width: number; height: string | number; scale: number } = {}

      Positional data

      • left: number

        The left offset position in pixels

      • top: number

        The top offset position in pixels

      • width: number

        The application width in pixels

      • height: string | number

        The application height in pixels

      • scale: number

        The application scale as a numeric factor where 1.0 is default

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

    |void}

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

    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

  • _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>

  • _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>

  • 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

  • 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(): string
  • override

    Returns string

  • 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 uploadURL(): string
  • Return the upload URL to which the FilePicker should post uploaded files

    Returns string