Skip to main content

File manager

File manager config options include capabilities to upload, copy, move, delete, rename, duplicate, zip and unzip files as well as edit text, create new folders and create new files.

File manager options​

In config options you will find the several options, all disabled by default for security reasons.

'allow_upload' => false,
'allow_delete' => false,
'allow_rename' => false,
'allow_new_folder' => false,
'allow_new_file' => false,
'allow_duplicate' => false,
'allow_text_edit' => false,
'allow_zip' => false,
'allow_unzip' => false,
'allow_move' => false,
'allow_copy' => false,

allow_all shortcut​

If you want to allow all file manager from a single option, you can use the allow_all shortcut.

'allow_all' => true, // allows all file manager options

Javascript options​

There are also Javascript config options for tweaking the file manager interface.

// 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)
  }
},

Uploader options​

In addition, you will find the following options available in config.php specifically for the uploader.

'upload_allowed_file_types' => '',  // comma-separated list of allowed upload file types / empty = allow any / 'jpeg, jpg, image/*'
'upload_max_filesize' => 0,         // [bytes] / 0 = unlimited (but limited by server PHP upload_max_filesize)
'upload_exists' => 'increment',     // 'increment' / 'overwrite' / 'fail'

Uploader Resize and Compression​

In the upload interface, there is an option "Resize and compress images", which is useful to optimize and limit the size and dimensions of images on upload. See this post for more information.

Disable interface​

There are a few ways to disable the resize-interface. The simple solution is to add to custom CSS:

.compressor-container {
  display: none;
}

Optionally, you can disable the interface from Javascript config:

_c.config = {
    uppy: {
        Compressor: { // https://uppy.io/docs/image-editor/
          interface: false
        }
    }
}

Using without the interface​

You may want to force resizing and compression without displaying the interface.

_c.config = {
    uppy: {
        Compressor: { // https://uppy.io/docs/image-editor/
          interface: false,
          enabled: true,
          maxWidth: 1600,
          maxHeight: 1600,
          quality: 0.8
        }
    }
}

Advanced options​

The resizer and compressor options are inherited from Compressor.js options.

_c.config = {
    uppy: {
        Compressor: { // https://uppy.io/docs/image-editor/
          interface: true, // Option only used in Files gallery to show the interface
          enabled: true, // Option only used in Files gallery to enable or disable the Compressor
          strict: true, // Indicates whether to output the original image instead of the compressed one when the size of the compressed image is greater than the original one's, except the following cases:
          maxWidth: Infinity, // The max-width of the output image.
          maxHeight: Infinity, // The max-height of the output image.
          minWidth: 0, // The min-width of the output image.
          minHeight: 0, // The min-height of the output image.
          width: undefined, // The width of the output image. If not specified, the natural width of the original image will be used, or if the height option is set, the width will be computed automatically by the natural aspect ratio.
          height: undefined, // The height of the output image. If not specified, the natural height of the original image will be used, or if the width option is set, the height will be computed automatically by the natural aspect ratio.
          resize: 'none' // Options: "none", "contain", and "cover". Sets how the size of the image should be resized to the container specified by the width and height options.
          quality: 0.8, // The quality of the output image. It must be a number between 0 and 1.
          convertTypes: ['image/png'], // Files whose file type is included in this list, and whose file size exceeds the convertSize value will be converted to JPEGs.
          convertSize: 5000000, // Files whose file type is included in the convertTypes list, and whose file size exceeds this value will be converted to JPEGs. To disable this, just set the value to Infinity.
          beforeDraw: (context, canvas) => { // draw something on the empty canvas before the image is placed on top
            context.fillStyle = '#fff';
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.filter = 'grayscale(100%)';
          },
          drew: (context, canvas) => { // draw something on top of the image, for example watermark text or logo
            context.fillStyle = '#fff';
            context.font = '2rem serif';
            context.fillText('watermark', 20, canvas.height - 20);
          },
          success: (res) => {}, // success event
          error: (err) => {}, // error event
        }
    }
}