How To… | Upload images

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

1) URL path to an upload script

First of all, make sure that you set a proper path to the upload’s file. You can do it by setting Redactor’s option on load, for example:

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

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

Let’s assume that file will handle images. Its code may look like this:

<?php

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

// files storage folder
$dir = '/sitecom/images/';
$files = [];
$types = ['image/png', 'image/jpg', 'image/gif', 'image/jpeg', 'image/pjpeg'];

if (isset($_FILES['file']))
{
    foreach ($_FILES['file']['name'] as $key => $name)
    {
        $type = strtolower($_FILES['file']['type'][$key]);
        if (in_array($type, $types))
        {
            // setting file's mysterious name
            $filename = md5(date('YmdHis')).'.jpg';
            $path = $dir.$filename;

            // copying
            move_uploaded_file($_FILES['file']['tmp_name'][$key], $path);

            $files['file-'.$key] = array(
                'url' => '/tmp/images/'.$filename.'.jpg', 'id' => $id
            );
        }
    }
}

echo stripslashes(json_encode($files));

JSON example:

{
    "file": {
        "url": "image-url.jpg",
        "id": "some-id"
    }
}

And for multiple images:

{
    "file-1": {
        "url": "image-url-1.jpg",
        "id": "some-id"
    },
    "file-2": {
        "url": "image-url-2.jpg",
        "id": "some-id"
    }
}

This is a simplified example, which doesn’t cover the security of any uploaded files. This example just demonstrates the logic behind the process, because for any given Redactor’s integration instance file uploads may widely vary.

2) Custom function

The second way to upload images is a custom function. If you set the function as the imageUpload setting, the upload process is in your hands.

$R('#content', {
    imageUpload: function(formData, files, event)
    {
        // ... your process for uploading an image ...
        //  in the end, you must return JSON or a string with the image URL
        // return json;
        // or
        // return '/images/my-image.jpg';
    }
});

The custom function gets the following arguments:

• formData – FormData object with all data to upload
• files – FileList array is files only
• event – Triggered event if image uploaded with drag and drop

3) Custom function with promises

Here is an example of Promise in the imageUpload custom function:

imageUpload: function(data, files, e, upload)
{
    return new Promise(function(resolve, reject)
    {
        var url = '/upload-path/';
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(e)
        {
            if (xhr.readyState === 4)
            {
                if (xhr.status === 200)
                {
                    resolve(xhr.response);
                }
                else
                {
                    reject(xhr.status);
                }
            }
        }

        xhr.open('post', url);
        xhr.send();

    }).then(function(response)
    {
        // success
        upload.complete(response);

    }).catch(function(response)
    {
        // fail
        upload.complete(response);
    });
}

The success response must contain JSON:

{
    "file": {
        "url": "image-url.jpg",
        "id": "some-id"
    }
}

Or just a string with image’s url, for example:

'/images/my-image.jpg'

The fail response must return JSON with error key like this:

{
    "error": true,
    "message": "Something went wrong..."
}