Advanced Javascript Config
Although the main PHP config contains the most useful core options, there are also many advanced Javascript options that specifically affect the interface. In most cases, you won't need to modify any of these options, but in some cases you may want to make some changes.
Instructions
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'
}
}
Options
Below are options with example values. Use the support forums if you require assistance.
Do not copy-paste!
The below values are only examples. Please do not copy-paste the entire sample config, as that will cause unexpected results. Only include specific custom options that you want to modify.
_c.config = {
// options for the optional audioplayer / disabled by default
// built on top of https://github.com/sampotts/plyr, and you can merge native plyr options
audioplayer: {
// controls: this.controls, // Plyr controls array or html / please avod
enabled: false, // enable audioplayer / disabled by default, as it could be confusing when clicking audio files
autoplay: true, // attempt to autoplay audio tracks as soon as they open
include_dirs: '', // include dirs regex (will exclude all dirs except those that match the regex)
exclude_dirs: '', // exclude dirs regex
autopause: true, // pause player when video/audio opens in modal/popup
autoplay_click: true, // attempt to autoplay audio on document.click if initial autoplay is blocked by browser interaction policy
list_click: true, // play audio files in audio player when clicked from the layout
filter: true, // synchronize playlist with list filters / if false, all items in dir will play, regardless of filter
sort: 'list', // list, initial, shuffle, name_asc, name_desc, date_asc, date_desc
autohide: true, // hide audioplayer on scroll down, re-emerge on scroll up
remember_state: true, // remember audioplayer playing state when navigating to new folders with audio tracks / also uses localStorage
loop: true, // loop tracks / migrated to this.myloop and deleted here, because we need to keep default Plyr object/disabled
autoplay_next: true, // autoplay next track when current track ends (if there are multiple tracks)
allow_nav: true, // allow navigation between tracks in current dir with next/previous buttons
files: '', // if you want to load global files into the audioplayer, assign the root path to load tracks from 'path/music' or array ['path/to/track1.mp3', 'path/to/track2.mp3'] (urls can be absolute)
mini_default: false, // mini player is default
mini_remember: true, // remember mini player state localStorage
history: _c.config.history, // listen to #hash on page load and push history / a bit dodgy ...
title: '%title% — %artist%', // title template, from ID3 tags if available / %filename% %nicename% %title% %artist% %album%
title_default: '%nicename%', // default title, when ID3 tags don't exist for file or title is disabled
title_autohide: true, // autohide title, show only on hover and temporarily when new track loads
title_show_duration: 3000, // temporarily show title for 3 seconds when new track loads
},
// choose what function to trigger when clicking items in the list
click: 'popup', // 'popup' | 'modal' | 'download' | 'window' | 'menu'
// choose window _target for click_window[] and .url files
click_target: '_blank', // '_blank' | '_self'
// array of file extensions that should open directly in new window on click
click_window: [], // ['pdf', 'html']
// open browser in popup window for `click_window` items
click_window_popup: true, // true | false
// maximum file size for text/code files to load and preview in the code editor / 1000000 (1mb) default
code_max_load: 1000000, // bytes
// enabled context-menu button and right-click menu with options
context_menu: true, // true | false
// regex to match imagemagick image types that should be converted even when supported in browser (Safari)
convert_native_formats: /tiff|dng/,
// add your own encoded inline favicon svg 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\" />", // "{ encoded url}" | false
// custom folder preview ratio (unless assigned from {ext}_preview_ratio or {mime}_preview_ratio)
file_preview_ratio: 1,
// filter input live search on keybaord input. When disabled, input filter requires keyboard-return or unfocus to trigger, which may be useful if you have 1000's of files in folders and want to prevent slow filtering from triggering unnecessarily.
filter_live: true,
// array of file properties to use when filtering, more properties will cause slower processing. IPTC-related properties will only apply for images that contain IPTC data (title, keywords, copyright etc)
// name, filetype, mime, features, title, headline, description, creator, credit, copyright, keywords, city, sub-location, province-state
filter_props: ['name', 'filetype', 'mime', 'features', 'title'],
// folder action buttons to display in the topbabr right
// ['rename', 'new_file', 'new_folder', 'upload', 'download', 'reload', 'contextmenu']
folder_buttons: ['new_file', 'new_folder', 'upload', 'reload', 'contextmenu'],
// custom folder preview ratio (when custom thumbnail assigned)
folder_preview_ratio: 1,
// insert custom footer html, at the bottom of main scroll area
footer: '<div class="custom-links"><a href="#">link 1</a><a href="#">link2</a><a href="#">scheit</a><a href="#">homepage</a></div>',
// insert custom fixed footer html at the bottom of page, which remains in place during scroll
footer_fixed: '<div class="custom-links"><a href="#">link 1</a><a href="#">link2</a><a href="#">scheit</a><a href="#">homepage</a></div>',
// Google docs viewer extensions regex (when _c.use_google_docs is enabled)
google_docs_extensions: /(doc|ppt|pages)x?$/,
// insert custom header html at top of page (goes behind sidebar)
header: '<a href="#">link 1</a>',
// allow browser history ?path/to/folder on navigation / allows deep-linking to files and dirs
history: true, // true | false
// attempt to restore scroll position on browser history navigation
history_scroll: true, // true | false
// append string to inline PDF url's. Useful for example to append '#toolbar=0' if you don't want the PDF toolbar to display
inline_pdf_append_url: '',
// folders are stored in javascript cache / if disabled, folders will always reload from server on navigation
javascript_cache: true,
// array of available layout options / can also be a full object with min/max properties
layouts: ['list', 'imagelist', 'blocks', 'grid', 'rows', 'columns'],
// regex to match file types (mime) that should not attempt to load images into the layout
load_images_exclude: /video|jpeg/,
// load and preview PDF documents in modal if browser supports inline PDF embed
load_inline_pdf: true, // true | false
// max SVG file size to display in browser / because complex SVG vectors are extremely sluggish
load_svg_max_filesize: 100000, // 100kb default
// folders are stored in browser localStorage cache when re-visiting the application
localStorage_cache: true,
// inserts a logo from given path into the topbar / use CSS to adjust if required
logo: './_files/logo/logo.png',
// optionally, insert custom html for the logo, for example if you want to include a link
logo: '<a href="ladida" target="_blank"><img src="./_files/logo/logo.png" class="logo"></a>',
// GPS map link template / Google default / optional https://www.openstreetmap.org/?#map=15/{latitude}/{longtitude}
map_link: 'https://www.google.com/maps/search/?api=1&query={latitude},{longtitude}',
// default PDF thumbnail preview ratio for layout items / may adjust after thumbs load if `previews_update` is enabled
pdf_preview_ratio: .7727272727, // default US-Letter 8.5 in x 11 in
// block user right-click on sensitive items (images, video, links) / also disables right-click contextmenu
prevent_right_click: false, // true | false
// cache preview images as normal images / disable to force reload from server / because stale folder preview images might get cached
preview_image_cache: true, // true | false
// update layout after loading video and PDF thumbnails / may cause layout adjustments
previews_update: true, // true | false
// allow OS `prefers_reduced_motion` to dictate transitions disabled
respect_prefers_reduced_motion: false, // true | false
// automatically refresh page after x seconds / 0 disabled
refresh: 0, // seconds
// set url to refresh when `refresh` options triggers / default false will reload current page
refresh_url: false, // false | 'nohash' | '{custom url}'
// regex to match image types that should not be resized / useful if you want to always load original gif animations
resize_exclude: /gif/,
// custom page <title> / defaults to "foldername [file count]"
title: '%name% [%count%]', // string with available vars %name%, %path% and %count%
// insert custom topbar html, above main topbar
topbar: '<a href="#">link 1</a><a href="#">link 1</a><a href="#">link 1</a>',
// set how the topbar attaches itself to screen
topbar_sticky: 'scroll', // true | 'scroll' | false
// enable transitions when navigating between pages (incomplete)
transitions: true, // true | false
// open videos in popup instead of modal (recommended to keep modal, for enhanced video features)
video_popup: false,
// default video thumbnail preview ratio for layout items / may adjust after thumbs load if `previews_update` is enabled
video_preview_ratio: 1.5, // default video layout ratio
// exposes the CodeMirror config object for customization / https://codemirror.net/5/doc/manual.html#config
codemirror: {},
// custom context menu (dropdown) options [EXAMPLE]
contextmenu: {
rotate: {
text: 'rotate',
// icon name, or include custom icon <path d="..."> value from https://pictogrammers.com/library/mdi/
icon: 'rotate_right',
// condition for button to display
condition: (item) => {
return item.browser_image;
},
// href: (item) => { return item.url_path; },
// do something on click
action: (item) => {
console.log(item); // item object
},
class: 'mybutton'
},
},
// download folder 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
recursive: true, // attempt to fetch files recursively via PHP / does not work with zip via server/PHP
max_filesize: 2000000000, // block download when filesize exceeds this value / default ~ 2000 MB ~ 2GB
prompt_filesize: 100000000, // display download prompt when filesize exceeds this value / default ~ 100 MB
},
// drag-and-drop file manager options
drag: {
enabled: true, // drag-and-drop is enabled
prompt: false, // don't prompt on drag-and-drop because action is does not require confirmation
move: true, // allow move (default drag and drop)
copy: true, // allow copy on drag-and-drop (normally keyboard-cmd/ctrl while dropping files)
delete: false, // drag selected files to trashcan / disabled because it doesn't seem useful
},
// embed Youtube/Vimeo by linking to .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
},
// file manager options
filemanager: {
path_selector_root_value: '.', // indicates root (home) dir in dropdown target selector
path_selector_root_label: '', // if empty, we will use default `🏠 ${ lang.get('home', true) }`
prompt: {
delete: true, // could be off, but better safe than sorry / overrides to false on drag to trashcan
duplicate: true, // could be off, in which case duplicate names are created automatically
copy: true, // always true, except when this.show_prompt is assigned from drag.js
move: true, // always true, except when this.show_prompt is assigned from drag.js
new_file: true, // could be off, but would create unique file name automatically
new_folder: true, // could be off, but would create unique file name automatically
rename: true, // always on
unzip: true, // could be off, in which case it will unzip to current dir
zip: true, // could be off, in which case it will zip to incrementing name 'Archive.zip' or 'file.txt.zip' (single file)
}
},
// exposes the filesize.js config options / https://github.com/avoidwork/filesize.js
filesize: {
standard: 'iec' // 'jedec'
},
// custom language options [EXAMPLE]
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',
},
},
},
// login-related options
login: {
login_button: true, // display login button in topbar if there is login and user is not already logged in
logout_button: true, // display logout button in topbar if user is logged in
ping: 60, // ping server every x seconds to check login status and trigger `on_logout` if logged out
on_logout: 'form', // show login form on logout | 'refresh', 'form', 'toast', false
},
// modal markdown editor config
// https://demo.files.gallery/?files#markdown.md
markdown: {
enabled: true, // markdown editor with split screen and preview enabled
extensions: ['md', 'markdown', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mkdown', 'ron'], // extensions to apply markdown editor on
// modes array and order / default first mode is 'split' on large screens and 'edit' on small screens
modes: matchMedia('(min-width: 576px)').matches ? ['split', 'edit', 'preview'] : ['edit', 'preview', 'split'],
remember_mode: true, // remember current markdown mode when navigating and re-opening / if false, will always reset
scroll_sync: true, // sync scroll in split mode
html: (html) => html, // custom preview html parser in if someone wants to (html) => DOMPurify.sanitize(html)
link_target: '_blank', // open markdown preview links in _blank window on click
// markdown insert shortcuts
shortcuts: {
'B': ['**', '**'], // Ctrl-B bold
'I': ['_', '_'], // Ctrl-I italic
'K': ['[', '](https://)'],// Ctrl-K link
'Alt-I': ['![', ']()'] // Ctrl-Alt-I image
}
},
// pass through options for marked.js markdown renderer
// https://marked.js.org/using_advanced#options
marked: {},
// options to load album cover pictures from audio files / built with https://github.com/aadsm/jsmediatags
mediatags: {
layout_pictures: true, // attempt to load audio album cover pictures into main items layout
modal_picture: true, // attempt to load audio album cover picture into modal
tags: ['album', 'artist', 'genre', 'picture', 'title'], // tags to read
types: ['mpeg', 'mp3', 'mp4', 'ogg', 'flac', 'x-m4a', 'x-wav'], // supported audio types
observer_options: {}, // default intersection observer options for loading pictures in main layout
},
// left sidebar menu options
menu: {
hidden: false, // start with menu hidden
expanded: false, // expand all recursive menu items on load
localStorage: true, // browser localStorage remembers menu hidden and expanded from user activity
},
// modal types configuration
modal_types: {
dir: {
anchor: true, // surround preview image with clickable <a> anchor tag
info: true, // show info in footer
// spinner: false, // spinner load indicator
// fullscreen: false, // open type in fullscreen
},
file: {
info: true
},
code: {},
image: {
anchor: true, // open image in popup or new window
info: true // because image meta data, and photo would by default open in popup anyway
},
video: {},
audio: {},
embed: {
spinner: true // Youtube/Vimeo needs spinner class
},
pdf: {},
document: {
spinner: true // Google docs iframe can be slow and might repeat so use spinner class
},
'custom-preview': {
info: true
},
'video-thumb': {
info: true
},
'pdf-thumb': {
anchor: true, // open PDF in new window / this scenario is unlikely
info: true
},
},
// custom click handler for files, includes e (event) and clicked item object properties
on_click: (e, item) => {
if(item.is_dir) return; // return falsy value to continue with default click functionality
console.log('item', item); // contains all properties for the clicked item
e.preventDefault(); // preventDefault() if you intend to return true and want to block default browser <a> link click
my_function(item); // do your own thing using the item properties object
return true; // return truthy value to exit and prevent further click functionality
},
// custom select handler including event and clicked item object with properties
on_select: (e, item) => {
console.log('on_select', item);
},
// panorama viewer options
panorama: {
// function to detect panorama 2:1 equirectangular source file
is_pano: (item) => {
const d = item.dimensions;
// >=2048px && ratio 2:1 with 1% pixel margin
return d[0] >= 2048 && Math.abs(d[0] / d[1] - 2) < 0.01;
},
},
// player / video, audio, embed player that opens in the modal on click
// built on top of Plyr https://github.com/sampotts/plyr
player: {
// video: {}, // options specifically for video, inherits default options
// audio: {}, // options specifically for audio, inherits default options
// embed: {}, // options specifically for embed (Youtube, Vimeo), inherits default options
// default player options for video, audio and embed
// also accepts Plyr options https://github.com/sampotts/plyr#options
default: {
enabled: true, // enable the custom (Plyr) video player / if disabled, native browser player will be used
autoplay: true, // autoplay when item opens
//controls: this.controls, // custom Plyr controls array or html / avoid because it's complicated
autoplay_next: true, // autoplay next modal item on audio/video end event
autoplay_next_media_only: false, // autplay next modal item on audio/video end event, only if next item is media (audio/video/embed)
}
},
// popup options
popup: {
autoplay: false, // autoplay slideshow on popup open
bgOpacity: .95, // background opacity
captionEl: true, // show popup caption
caption_align: 'center-left', // caption align: left, center-left, center, right
caption_hide: true, // Auto-hide popup caption on mouse inactivity
caption_style: 'block', // caption style: block, box, subtitles, gradient, topbar, none
click: 'prev_next', // popup click: prev_next, next, zoom
fullscreen: false, // enter fullscreen on popup open, and exit fullscreen on popup close (only works on user click)
loop: true, // loop slideshow
open: false, // automatically opens first image on initial page load (only if first item is image)
playEl: false, // show slideshow play button
play_interval: 5000, // slideshow play interval
play_transition: null, // assign transition for slideshow (same as above). Inherits main transition by default
transition: 'glide', // slideshow transition: none, slide, glide, fade, zoom, pop, elastic
zoomEl: false, // show zoom button
include_videos: true, // include videos when navigating files in the popup (supports images and videos, but videos will by default open in modal when clicked)
video_autoplay: true, // autoplay videos when they appear in popup
transitions: { // custom transitions object
mytransition: function(dir) {
return {
translateX: [10 * dir, 0],
opacity: [.1, 1],
duration: 1000,
easing: 'easeOutQuart'
}
},
},
},
// select (file manager) interface options
select: {
enabled: true, // file selection is enabled
buttons: ['move', 'copy', 'duplicate', 'zip', 'unzip', 'delete', 'copy links', 'download', 'rename'], // select buttons and order
mode: false, // select mode is disabled by default
mode_button: true, // show select mode toggle button in topbar
display: 'select-mode', // 'select-mode', // select, fixed, select-mode, always
copy_links_separator: ', ', // '\n', ', ', ' ' / link separator when mass-copying links
keyboard_shortcuts: ['a', 'i', 'c', 'v', 'n', 'Backspace', 'd'] // keyboard shortcuts enabled
},
// options related to the settings editor when `'allow_settings' => true`
settings_editor: {
show_button: true, // show settings button in topbar / if disabled, must use ?settings=1
allow_default: true, // allow editing 'default' config settings
allow_users: true, // allow managing users
allow_new: true, // allow adding new users
allow_remove: true, // allows removing users
allow_rename: true, // allows renaming existing users
select_current_user_append: ' ←', // append to current user in selection dropdown to identify current user
reload: true, // true / 'close' / false // reload browser if default or current user changes
reload_confirm: false, // false / 'Refresh required. Reload page now?' / true
// new user config template (include mostly useful options to override default config)
template: `<?php
// CONFIG / https://www.files.gallery/docs/config/
return [
//'root' => '',
//'start_path' => '',
'password' => '$PASSWORD',
//'allow_all' => false,
//'allow_settings' => false, // only enable for trusted users! https://www.files.gallery/docs/security/#allow_settings-enabled
//'files_include' => '',
//'files_exclude' => '',
//'dirs_include' => '',
//'dirs_exclude' => '',
//'upload_allowed_file_types' => '',
];`,
},
// sort options
sort: {
default: 'name_asc', // 'name_asc' | 'name_desc' | 'kind_asc' | 'kind_desc' | 'size_asc' | 'size_desc' | 'date_asc' | 'date_desc' | 'shuffle'
dirs_first: true, // sort dirs first
function: 'locale', // 'locale' | 'basic' | '{ custom locale }' / https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare
options: ['name', 'kind', 'size', 'date', 'shuffle'] // available sort options
},
// theme options
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
},
// 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
// https://www.files.gallery/docs/image-watermarking/
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
},
},
},
}