Skip to main content

Filemanager

Filemanager options include capabilities to upload, delete, rename, duplicate, edit text, create new folder and create new file.

Security

You should be careful when enabling filemanager features, as you are basically allowing users to create and modify files on server. It's a good idea to assign a login, or you should be sure that no unwelcome guests have access.

Filemanager options

In config.php, you will find the following options, all disabled by default.

'allow_upload' => false,
'allow_delete' => false,
'allow_rename' => false,
'allow_new_folder' => false,
'allow_new_file' => false,
'allow_duplicate' => false,
'allow_text_edit' => false,

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_note' => '', // include a small text note at bottom of uploader / 'Max file size %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.

Limitations

There are currently a few limitations with the Resizer and Compressor, which we hope to resolve in a future release. I already have a pending request for the Uppy uploader.

  1. Resize and compression removes EXIF and IPTC meta data from images.
  2. When enabled, it will always attempt to compress images, even those that don't get resized.

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