@filerobot/explorer

@filerobot/explorer

The file Explorer and media gallery plugin of the Filerobot Media Asset Widget.

Usage

From NPM

The plugin can be installed from NPM as @filerobot/explorer

npm install --save @filerobot/explorer

then

import Explorer from '@filerobot/explorer'
...
...
...
filerobot.use(Explorer, optionsObject)

From CDN

If installed via a CDN link, the plugin is inside the Filerobot global object as Filerobot.Explorer

const Explorer = window.Filerobot.Explorer
...
...
...
filerobot.use(Explorer, optionsObject)

Plugin styles

import '@filerobot/core/dist/style.css'
import '@filerobot/explorer/dist/style.css'

or via the minified versions

import '@filerobot/core/dist/style.min.css'
import '@filerobot/explorer/dist/style.min.css'

The plugin's css file should be imported after the Core's css file for having the styles shown correctly.

Options

The Explorer supports multiple options to customize the plugin according to your needs. Required attributes are marked with (required).

An example configuration is provided below:

{
  config: {
    companyName: 'scaleflex',
    foldersLimit: 200,
    filesLimit: 50,
    rootFolderPath: '/',
    tagging: {
      language: 'en',
      confidence: 60,
      key: '',
      limit: 10,
      provider: 'google',
      suggestionList: [
        'Alligator',
        'Bask',
        'Crocodilian',
        'Death Roll'
      ]
    }
  },
  inline: false,
  target: '#filerobot-container',
  trigger: '#filerobot-trigger-button',
  width: 750,
  height: 500,
  thumbnailWidth: 280,
  thumbnailHeight: 180,
  waitForThumbnailsBeforeUpload: false,
  showProgressDetails: true,
  hideUploadButton: false,
  hideSearch: false,
  hideRetryButton: false,
  hideCancelButton: false,
  note: null,
  closeModalOnClickOutside: false,
  closeAfterFinish: false,
  closeUploadPanelAfterFinish: false,
  disableStatusBar: false,
  disableInformer: false,
  disableThumbnailGenerator: false,
  disablePageScrollWhenModalOpen: true,
  animateOpenClose: true,
  onRequestCloseModal: () => this.closeModal(),
  locale: default,
  browserBackButtonCloseModal: false,
  theme: 'light',
  viewType: 'grid',
  showFolderTree: false,
  showDetailsView: false,
  contextMenuSubTabs: {
    fileMore: ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'],
    fileShare: ['SHARE_ASSETS', 'GET_LINK']
  },
  resetAfterClose: false
}

config: object (required)

default: null

The config objects contains the main configuration for the plugin to interact with your Filerobot project:

• companyName (string - optional): your company name, used when sharing assets, defaults to scaleflex
• foldersLimit (number - optional): number of folders to be retrieved and displated in the first request, defaults to 200
• filesLimit (number - optional): number of files to be retrieved and displayed in the first request, defaults to 50
• rootFolderPath (string - optional): folder path to be used as the root folder displayed, defaults to /
• tagging (object - optional): ML-based auto-tagging configuration
  • language (string - optional): language used for generating and saving tags, defaults to 'en'
  • confidence (number - optional): confidence score from which the auto generated tags would be chosen, defaults to 60
  • limit (number - optional): number of auto-tags generated, defaults to 10
  • provider (string - optional): ML-based auto-tagging provider, defaults to google
  • suggestionList (array of strings - optional): list of suggested tags

inline: boolean (optional)

default: false

If set to true, the plugin will be displayed as inline element in the element referred by the target property. Otherwise, it will pop up in a modal upon trigger, see below.

trigger: string (optional)

default: null

The selector used for triggering the display of the plugin modal, if passed to querySelectorAll function. Available options:

• HTML tag, eg. body
• CSS selector, eg. #filerobot-trigger-button or .filerobot-trigger-button

Multiple triggers are supported as click events.

required if inline: false

target: string (required)

default: body

The selector used for displaying the plugin, if passed to querySelector function. Options:

• HTML tag, eg. body
• CSS selector, eg. #filerobot-container or .filerobot-container

width: integer|string (optional)

default: 700

Width of the plugin as a number if specified in pixels or a percentage, eg. '50%'

height: integer|string (optional)

default: 500

Height of the plugin as a number if specified in px or a percentage eg. '35%'

thumbnailWidth: integer (optional)

default: 280

Pixel width of the asset thumbnails displayed in the gallery. Apect ratio of images is kept in case of image assets.

thumbnailHeight: integer (optional)

default: 170

Pixel height of the asset thumbnails displayed in the gallery. Apect ratio of images is kept in case of image assets.

waitForThumbnailsBeforeUpload: boolean (optional)

default: false

If set to true, delays the start of the upload process until the asset thumbnails are generated and displayed in the plugin.

showProgressDetails: boolean (optional)

default: true

If set to false, hides the upload progress bar.

hideUploadButton: boolean (optional)

default: false

If set to true, hides the Upload button at the top of the plugin.

hideSearch: boolean (optional)

default: false

If set to true, hides Search field at the top of the plugin.

hideRetryButton: boolean (optional)

default: false

If set to true, hides the Retry button that can be used to retry an upload in case of failing upload.

hideCancelButton: boolean (optional)

default: false

If set to true, hides the Cancel used to cancel an upload.

note: string (optional)

default: null

A custom note displayed in the upload screen.

closeModalOnClickOutside: boolean (optional)

default: false

If set to true, plugin modal will be closed when clicking outside of the modal.

only relevant if inline: false

closeAfterFinish: boolean (optional)

default: false

If set to true, modal will close after upload is finished.

closeUploadPanelAfterFinish: boolean (optional)

default: false

If set to true, the upload panel will be closed automatically and explorer would be shown.

only relevant if inline: false

onClickDoneButton: function (optional)

default: () => {}

A callback function that would be triggered when the user clicks on done button that is shown in the top left buttons of topbar after finish uploading

Only relevant if closeAfterFinish: false` to be able to see the done button.

disableStatusBar: boolean (optional)

default: false

If set to true, disables the status-bar plugin which shows the upload/download progress.

disableInformer: boolean (optional)

default: false

If set to true, disables the informer plugin used to show warnings and errors.

disableThumbnailGenerator: boolean (optional)

default: false

If set to true, disables the thumbnail-generator plugin that generates image thumbails.

disablePageScrollWhenModalOpen: boolean (optional)

default: true

If set to true, disables scrolling for the document while the plugin modal is open.

only relevant if inline: false (optional)

onRequestCloseModal: () => undefined (optional)

default: closeModal function

Specified a custom function to be executed when trying to close the modal.

default closing modal behavior is overriden

animateOpenClose: boolean (optional)

default: true

If set to false, disable the modal's opening and closing.

only relevant if inline: false

locale: object (optional)

default: locales from filerobot's backend then default locale file with all labels is under lib/defaultLocale.js.

You can override some labels by specifying a translation object here, such as:

{
  strings: {
    baseFolderTitle: 'Root' // overrides the default Home value to Root
  }
}

theme: string (optional)

default: 'light'

• light: uses the light theme
• dark: uses the dark theme
• auto: respects the user's default mode

browserBackButtonCloseModal: boolean (optional)

default: false

If set to true, the browser Back button will close the modal, otherwise it will trigger the standard back browser behavior.

only relevant if inline: false

viewType: string (optional)

default: grid

Specified the default view for the asset list:

• grid: shows the items as cards in a grid
• list: shows the items as horizontal rows in a list (table-like)
• tiles: same as list but with larger previews

The user will be able to switch between views from the view selector icon in the top bar.

showFolderTree: boolean (optional)

default: false

If set to true, shows the folder tree will in the left bar of the plugin for the user to navigate folders. The user can show / hide the folder tree from the view switcher icon in the top bar.

showDetailsView: boolean (optional)

default: false

If set to true, shows the asset details view on the right bar of the plugin for the user to view various details about selected assets. The user can show / hide the details view switcher icon in the top bar.

contextMenuSubTabs: object (optional)

default:

{
  fileMore: ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'],
  fileShare: ['SHARE_ASSETS', 'GET_LINK']
}

If you need to customize the sub tabs that are opened from the parent tabs of the context menu (the menu shown on clicking right click on the file/folder):

• fileMore (array of strings): the sub tabs for more details parent tab inside file's context menu, those are all the sub tabs available for that parent tab ['META', 'TAGS', 'EMBED', 'VISIBILITY', 'VERSIONING', 'VARIANTS'].
• fileShare (array of strings): the sub tabs for share parent tab inside file's context menu, those are all the sub tabs available for that parent tab ['SHARE_ASSETS', 'GET_LINK'].

videoTranscoding: object (optional)

default:

{
  resolution: 'auto',
  protocol: 'HLS'
}

Video transcoding options for post-upload video transcoding:

• resolution (string - required): target resolutions for video transcoding, defaults to auto.
• protocol (string - required): which protocol to use while transcoding, defaults to HLS.

imagePreviewBackground: object (optional)

default:

{
  type: 'solid',
  color: 'auto'
},

Image preview background options for adding background to images :

• type (string - required): type of background image used solid | blur, defaults to solid.
• color (string - required): To tint the background and value is color code or name, defaults to auto.
• blur (number - required): Applies Gaussian blur to the image and value is the kernel size of the filter in pixels, used only if type is blur