File Link

Load the bundle

<script src="/assets/redactor/redactor.js"></script>
<script src="/assets/redactor/plugins/file-link/file-link.js"></script>

Initialization

The plugin is active only when upload and/or select is set.

const app = Redactor('#entry', {
    plugins: ['fileLink'],
    fileLink: {
        upload: '/upload',
        select: '/files/list.json'
    }
});

Options

• upload (string | false)
  • default false
  • Upload endpoint URL for the Upload tab.
• select (string | object | false)
  • default false
  • Select tab source: URL string (JSON) or an object map of file entries.
• context (boolean)
  • default true
  • When true, adds the button to the context toolbar as well.
• states (boolean)
  • default true
  • When true, tracks file links via data-file for diff reporting.
• classname (string | false)
  • default false
  • CSS class added to inserted file links.
• multiple (boolean)
  • default true
  • Allow multiple file uploads at once.
• name (string)
  • default 'file'
  • Form field name for the upload request.
• data (object | false)
  • default false
  • Extra data sent with upload requests.
• icon (string)
  • SVG icon HTML for the toolbar button.

Static select list:

Redactor('#entry', {
    plugins: ['fileLink'],
    fileLink: {
        select: {
            sample: {
                title: 'Sample PDF',
                url: '/files/sample.pdf',
                name: 'sample.pdf',
                size: '120 KB'
            }
        }
    }
});

Example of full JSON:

{
    "specs": {
        "title": "Product specs",
        "name": "product-specs.docx",
        "url": "/url-to/sample-specs.docx",
        "id": "specs",
        "size": "340Kb"
    }
}

Each key is an entry id.

• title (or name) is shown in the list;
• url is used for the link href;
• size is shown as a shortcut label;
• id is stored in data-file when present.

Language strings

en: {
    fileLink: {
        file: 'File',
        upload: 'Upload',
        title: 'Link text',
        select: 'Select',
        placeholder: 'Drag to upload a file<br>or click to select'
    }
}

Events

filelink:upload

Eitted after a file link is inserted via upload.

Payload: { item, element, source }

filelink:select

Emitted after a file link is inserted from the select list.

Payload: { item, element, source }

filelink:upload:error

Emitted when an upload fails.

Payload: { response }

app.on('filelink:upload', ({ item, element }) => {
    console.log('Uploaded', item.name);
});

app.on('filelink:upload:error', ({ response }) => {
    console.error('Upload failed', response);
});

API

getRemovedFiles

Returns file links removed since tracking started (when states is enabled).

const removed = app.fileLink.getRemovedFiles();

getDiff

Returns the link diff object from tracked refs (when states is enabled).

const diff = app.fileLink.getDiff();