Advanced Javascript Config

Although the main Files config section contains most useful options, there are also several advanced Javascript options available for those who wish to tweak the interface.

The reason these options are separate from the main config:

1. Avoids cluttering the main config with advanced options that most users don't need.
2. Advanced nested config logic for Javascript-only options.
3. Many Javascript options are functions, and need to get declared directly from Javascript.

Instructions

First, create a Javascript file _files/js/custom.js in your storage_path.

_files/js/custom.js

Open the file and include your custom options. In the below example, we are assigning popup image click to zoom images instead of navigating to previous/next.

_files/js/custom.js

_c.config = {
    popup: {
        click: 'zoom', // prev_next, next, zoom
    }
}

Below is a list of all current options with defaults:

_c.config = {

  // custom context menu (dropdown) options
  contextmenu: {
    rotate: {
      text: 'rotate',
      // icon name, or include custom icon <path d="..."> value from https://pictogrammers.com/library/mdi/
      icon: 'rotate_right',
      condition: (item) => item.browser_image,
      // href: (item) => { return item.url_path; },
      action: (item) => _h.popup(null, null, null, item.url_path),
      // class: 'mybutton'
    },
  },

  // download_dir options
  download_dir: {
    javascript: true, // Use the Javascript downloads API to download zip files
    current_dir_only: true, // Only assign download dir button to current directory
    use_filter: true, // If there is a search filter, only filtered files will be downloaded
  },

  // embed Youtube/Vimeo by linking with .url files
  /*
  [InternetShortcut]
  URL=https://www.youtube.com/watch?v=8jT9ygmMvMg
  */
  embed: {
    enabled: true, // entirely disable embed, .url files will work like normal clickable links
    youtube: true, // enable Youtube embed
    vimeo: true, // enable Vimeo embed
    preview: true, // load preview images from embed source into layout
    modal: true, // display video in Files modal on click
    params: 'autoplay=1&modestbranding=1', // add optional url parameters to the embedded video
  },

  // favicon
  // Add your own encoded inline favicon or false to disable / SVG https://yoksel.github.io/url-encoder/
  favicon: "<link rel=\"icon\" href=\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2337474F' d='M20,18H4V8H20M20,6H12L10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6Z' /%3E%3C/svg%3E\" type=\"image/svg+xml\" />",

  // history_scroll / attempts to restore scroll position on browser history navigation
  history_scroll: true,

  // custom language options
  lang: {

    // assign language menu in topbar / true = all / false = no menu (default)
    menu: ['pt', 'en', 'zh'], // Portuguese, English, Chinese

    // override or create new languages
    langs: {
      fr: {
        logout: 'déconnexion',
      },
      no: {
        date: 'dato',
        flag: 'no',
      },
    },
  },

  // load_svg_max_filesize 100kb / because complex SVG vector files will slow down rendering in browser
  load_svg_max_filesize: 100000,

  // panorama options
  panorama: {
    // function to detect panorama equirectangular source file
    is_pano: (item) => {
      var d = item.dimensions;
      // >=2048px && ratio 2:1 with 1% pixel margin
      return d[0] >= 2048 && Math.abs(d[0] / d[1] - 2) < 0.01;
    },
  },

  // popup options
  popup: {
    captionEl: true, // show popup caption
    caption_hide: true, // Auto-hide popup caption on mouse inactivity
    caption_style: 'block', // caption style: block, box, subtitles, gradient, topbar, none
    caption_align: 'center-left', // caption align: left, center-left, center, right
    click: 'prev_next', // popup click: prev_next, next, zoom
    zoomEl: false, // show zoom button
    playEl: false, // show slideshow play button
    transition: 'glide', // slideshow transition: none, slide, glide, fade, zoom, pop, elastic
    play_transition: null, // assign transition for slideshow (same as above). Inherits main transition by default
    bgOpacity: .95, // background opacity
    play_interval: 5000, // slideshow play interval
    loop: true, // loop slideshow
    video_autoplay_clicked: true, // autoplay videos when clicked from layout
    video_autoplay: false, // autoplay all videos
    transitions: { // custom transitions Object
      mytransition: function(dir) {
        return {
          translateX: [10 * dir, 0],
          opacity: [.1, 1],
          duration: 1000,
          easing: 'easeOutQuart'
        }
      },
    },
  },

  // theme config
  theme: {
    themes: ['contrast', 'light', 'dark'], // array of available themes for button switch
    default: 'contrast', // default theme when no theme is previously selected
    button: true, // allow button to switch themes
    auto: true, // allow prefers-color-scheme:dark
  },

  // custom page <title> function / below is default
  title: (path, name, error, count) => {
    return (name || '/') + (error ? '' : ' [' + count + ']');
  },

  // uppy uploader interface options
  uppy: {
    note: 'Upload images only, maximum %upload_max_filesize%',
    locale: '', // https://github.com/transloadit/uppy/tree/main/packages/%40uppy/locales/src
    DropTarget: false,
    Webcam: false, // https://uppy.io/docs/webcam/
    ImageEditor: { // https://uppy.io/docs/image-editor/
      quality: 0.8,
      cropperOptions: {},
      actions: {},
    },
    // https://uppy.io/docs/compressor/
    Compressor: {

      // options specific to watermarking images on upload
      watermark: {
        text: '©Alibaba Photo', // overlay text here, if you don't want to assign per-upload
        position: 'bottom-right', // default overlay alignment
        interface: false, // disable overlay options from uploader, in which case options from here will always apply
        scale: .33, // scale the overlay relative to the image width in fraction of 1 / .33 = 33%
        margin: .03, // overlay margin from the image edges when using all positions except 'center' in fraction of 1 / .03 = 3%
        font: '10px Futura', // assign a font, which must be available on the device that renders the overlay
        fillStyle: 'white', // text fill color / only applies for text
        shadowColor: 'rgba(0,0,0,.25)', // shadow color
        shadowBlur: 10, // shadow blur
        globalAlpha: .5, // overlay alpha transparency value
        image_src: './path/image.png', // assign an image src from a different location
        font_src: 'https://fonts.bunny.net/righteous/files/righteous-latin-400-normal.woff2', // assign a font source from a web url
      },
    },
  },
}