Client configuration

File Uploader is a client-server component that is why it has both widget settings (for the client/browser part) and server settings.
The client part contains various settings related to visualization, usability and so on.
All parameters that specify directory paths, security settings and limitations are on the server side.

The list of widget parameters

Client-side settings are a set of key/value pairs, sometimes nested. You can read more about add-on configuration for your editor in the corresponding installation manuals: CKEditor, TinyMCE, Bootstrap Editor or JavaScript.

urlUploader: string
Default value: null (auto)
Specifies the URL, where the server uploader is. If you use the unchanged PHP version, most likely you won't need to configure this parameter at all. In other cases, you should specify it explicitly, for example: http://mywebsite.com/uploader.

urlFiles: string
Default value: null (auto)
After uploading the file, the server returns the file name, but the way to form the URL for embedding is specified in this parameter. Hence, this parameter specifies a URL prefix for the file name. For example, if you uploaded a file named "example.jpg", and now want it to embed like "http://mywebsite.com/images/example.jpg", then you need to set urlFiles to http://mywebsite.com/images/ For the PHP version with standard uploader location and upload directory, this parameter is not required (it is detected automatically).

presets: Preset[]
Default value: [defaultPresetImage, defaultPresetPreview, defaultPresetFile]
The list of presets available to a user. Each preset is a structure of the Preset type. If for some preset you specify only some of keys, these keys will be merged with the corresponding default preset.

Preset parameters

name: string
Preset name. Do not change this parameter of existing presets. Names of the built-in presets are image, preview and file.

template: string
The template used to convert data about the uploaded file to the HTML code. More on mode parameters.

isImage: boolean
Available values: true, false
The parameter that defines whether the current upload needs image specific options. For instance, if this parameter is false, images cannot be resized.

hasPreview: boolean
Available values: true, false
If this parameter is set to true, the server will automatically generate a preview, and the user can specify its size.

acceptTypes: string
Filter by MIME types. Used in the standard file selection dialog. Suitable values are, for example, null (no filters), image/* (any images), audio/mp3 (MP3 audio files), and so on.

userOptions: UserOptions
A set of default user options for the current preset. Please read about how presets and user options work at this page: how File Uploader works.

User options

autoRename: boolean
Available values: true, false
The flag that permits automatic renaming of files during commit of the uploaded files list. It removes the necessity to pick available file names manually. By default is true for CKEditor/TinyMCE add-ons when using quick uploading, and false when using uploading with the File Uploader dialog.

imageOptionsFull: ImageOptionsData
The Image options data structure that describes image resize rules. Only for presets having isImage = true (image and preview presets).

imageOptionsPreview: ImageOptions
The Image options data structure that describes preview resize rules. Only for presets having hasPreview = true (preview preset).

Image options

width: number
Maximum width of the rectangle to fit an image to.

height: number
Maximum height of the rectangle to fit an image to.

enlarge: boolean
Available values: true, false
The flag that allows or disallows enlarging an image above its original size.

Configuration example

Here is a File Uploader configuration example:

TinyMCE

CKEditor

config.jsplusFileUploader = {
    urlFiles: "http://mywebsite.com/files/",
    presets: [
        {
            name: "image",
            template: '<img src="{URL}" alt="Uploaded image"/>',
            userOptions: {
                imageOptionsFull: {
                    width: 500,
                    height: 500
                }
            }
        },
        {   
            name: "preview"
            // no changes
        },
        {
            name: "file",
            template: '<a href="{URL}">Download file {NAME}</a>'
        }
    ]
}jsplusFileUploader: {
    urlFiles: "http://mywebsite.com/files/",
    presets: [
        {
            name: "image",
            template: '<img src="{URL}" alt="Uploaded image"/>',
            userOptions: {
                imageOptionsFull: {
                    width: 500,
                    height: 500
                }
            }
        },
        {   
            name: "preview"
            // no changes
        },
        {
            name: "file",
            template: '<a href="{URL}">Download file {NAME}</a>'
        }
    ]
}

Embedding mode parameters

This parameters are held by image, preview and file keys. The default values are listed for these three modes respectively.

acceptTypes: string
Default value (Image preset): "image/*"
Default value (Preview preset): "image/*"
Default value (File preset): ""
MIME types definition for file types permitted to upload. Note that this parameter is used as a filter for the standard file opening dialog and does not maintain security on the server side. For details, please refer to the server side configuration section and to the Security page section.

template: string/HTML
Default value (Image preset): <img src='{URL}'/>
Default value (Preview preset): <a class='jsplus_preview_href' rel='lightbox' href='{URL}'><img src='{PREVIEW_URL}'/></a>
Default value (File preset):

<div style='display:inline-block'><img src="{PLUGIN_URL}img/download.png" style="width:24px;height:24px;margin-right:5px;margin-top:-4px;vertical-align:middle"/><a style="font-size:16px;margin-right:15px;" href='{URL}'>Download {NAME}</a>

A template that defines how to form HTML for embedding based on the names of uploaded files. Please, when you change this parameter, make sure you specified valid HTML code and check it for unclosed tags, otherwise you may experience difficulties during embedding. The template has fields that are constructed dynamically based on the current data:

`{URL}`	Full URL of the uploaded file
`{NAME}`	Name and extension of the uploaded files
`{DIR}`	Upload directory (for now it is always `/`)
`{PATH}`	Upload directory plus name and extension
`{PREVIEW_URL}`	Preview URL. Only for modes with preview embedding.
`{PREVIEW_NAME}`	Preview file name with extension
`{PREVIEW_DIR}`	Upload directory of the preview (for now it is always `/`)
`{PREVIEW_PATH}`	Upload directory of the preview plus name and extension
`{ORIGINAL_URL}`	URL of the original image (if exists). If no original image exists, equal to `{URL}`
`{ORIGINAL_NAME}`	Name and extension of the original image. If no original image exists, equal to `{NAME}`
`{ORIGINAL_DIR}`	Directory of the original image. If no original image exists, equal to `{DIR}`
`{ORIGINAL_PATH}`	Directory + name and extension of the original image. If no original image exists, equal to `{PATH}`
`{PLUGIN_URL}`	URL of the uploading plugin (main JS files) - only for CKEditor & TinyMCE versions

Widget configuration example

Here is an example of File Uploader setup to use it as a CKEditor plugin (configuration is done in config.js).
This configuration modifies the default height and width of images and changes the HTML template to embed in the file embedding mode.

TinyMCE

CKEditor

config.jsplusFileUploader = {
    fullWidth: 1280,
    fullHeight: 720,
    file: {
        template: "<a href='{URL}'/>Download {NAME}</a>"
    }
};jsplusFileUploader: {
    fullWidth: 1280,
    fullHeight: 720,
    file: {
        template: "<a href='{URL}'/>Download {NAME}</a>"
    }
};

To learn more about passing settings to the widget in your editor or applications, please refer to the corresponding section.