Filelink

Upload

Javascript doesn't allow the implementation of images and files uploads. Therefore, this feature utilizes server-side languages, such as PHP.

First of all, make sure that you have properly set a path to the upload's file. You can do this by modifying the option on load, like this:

RedactorX('#entry', {
    plugins: ['filelink'],
    filelink: {
        upload: '/your-server-side-upload/'
    }
});

And the upload script will process file, it may look like this:

<?php

// This is a simplified example, which doesn't cover security of uploaded files.
// This example just demonstrate the logic behind the process.

$files = [];
if (isset($_FILES['file']))
{
    foreach ($_FILES['file']['name'] as $key => $name)
    {
        move_uploaded_file($_FILES['file']['tmp_name'][$key], '/my-files/'.$name);

        $files['file-'.$key] = [
            'url' => '/my-files/'.$name,
            'name' => $name,
            'id' => md5(date('YmdHis'))
        ];
    }
}

echo stripslashes(json_encode($files));

JSON example of response:

{
    "file": {
        "url": "some-file-url",
        "name": "some-file-name",
        "id": "some-id"
    }
}

Select

Set in the settings the path to the JSON file that defines the file list.

RedactorX('#entry', {
    plugins: ['filelink'],
    filelink: {
        select: '/your-files.json'
    }
});

Specify the path to the JSON file to display a list of files in the file popup. A JSON file can look like this:

[
    {
        "title": "File 1",
        "name": "1.txt",
        "url": "/file-url/1.txt",
        "id": 1,
        "size": "301Kb"
    },
    {
        "title": "File 2",
        "name": "2.txt",
        "url": "/file-url/2.txt",
        "id": 2,
        "size": "1MB"
    }
]

Events

file.upload

Arguments:

• $el Dom
  • The Dom element of the file
• data Object
  • The response object with data of the uploaded file

Occurs whenever a file is uploaded into the editor.

RedactorX('#entry', {
    plugins: ['filelink'],
    filelink: {
        upload: '/your-server-side-upload/',
        select: '/your-files.json'
    },
    subscribe: {
        'file.upload': function(event) {
            var data = event.get('data');
            var $file = event.get('$el');
            $file.addClass('my-file');
        }
    }
});

file.select

Arguments:

• $el Object
  • The Dom element of the file
• data Object
  • The response object with data of the file

Occurs whenever a file is selected from the list.

RedactorX('#entry', {
    plugins: ['filelink'],
    filelink: {
        upload: '/your-server-side-upload/',
        select: '/your-files.json'
    },
    subscribe: {
        'file.select': function(event) {
            var data = event.get('data');
            var $file = event.get('$el');
            $file.addClass('my-file');
        }
    }
});

Get deleted files

You can use the API method files.getStates for tracking deleted files.

// call editor
var app = RedactorX('#entry', {
    plugins: ['filelink'],
    filelink: {
        upload: '/your-server-side-upload/',
        select: '/your-files.json'
    }
});

// api
var changes = app.filelink.getStates();
for (var key in changes) {
    if (changes[key].status === false) {
        // element was deleted
    }
    else {
        // element is still in the content
    }
}

How deleted files tracking works:

• On the editor start and when files uploaded, all files get the data-file attribute with the ID or with generated ID if the attribute was not specified.
• When you request the files.getStates method, the editor will check the object of all uploaded files or those that were at the start of the editor and compare which ones have been deleted.

Here's an example of an object that is returned by files.getStates:

{
    status: true,
    url: "file-url-path",
    $el: $node,
    id: "1"
}