Take a look at our new Article and Redactor X editors.


Upload files

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 Redactor's option on load, like this:

<!--element -->
<textarea id="content"></textarea>

<!-- call -->
$R('#content', { fileUpload: '/your-upload-script/' });

And upload-script will process files, it may look like this:


// 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:

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

And for multiple files:

    "file-1": {
        "url": "some-file-1-url",
        "name": "some-file-1-name",
        "id": "some-id"
    "file-2": {
        "url": "some-file-2-url",
        "name": "some-file-2-name",
        "id": "some-id"

This is not the exact example, it is intended to give you an overall idea of the process and doesn't take the upload's security into account. Also it doesn't reflect all of the nuances of every possible integration type.