<p>It doesn't seems possible natively, you should write a custom upload script.</p>

<p>→ <a href="https://imperavi.com/redactor/docs/upload-images/" rel="nofollow noreferrer">Example #1</a></p>

<p>→ <a href="https://gist.github.com/sathoro/8178981#file-controller-php" rel="nofollow noreferrer">Example #2</a></p>

<p>If it doesn't matter to add the images inside your rich text field, one more simple workaround could be to allow image upload to your assets using a separate upload field.</p>

<p>→ <a href="https://craftcms.com/docs/assets-fields#uploading-files-from-front-end-entry-forms" rel="nofollow noreferrer">Uploading Files from Front-end Entry Forms</a></p>

CC BY-SA 3.0
2017-11-30T19:09:51.927Z
Hi Romain, Thanks. The front-end form is to publish blog posts. I already have a separate upload field for the posts' featured image. However, I want users to be able to insert images between paragraphs. Ideally, I'd do this with a Matrix field, but my JS skills are insufficient to add new blocks on the front-end. I saw example #1. However, example #2 looks more interesting since I would also like to rename files on upload. I would basically be creating a plugin, correct? Could I use pluginfactory.io and select Controllers comp. & put content of ex. #2 in it?
Andrea DeMers
CC BY-SA 3.0
2017-12-01T12:28:34.540Z
Yes, you should write a plugin with a controller. Content of example #2 is a good start, but it needs some adaptations to works with Redactor. I made a first draft, which starts to work ; I could send it to you later.
Romain P.
CC BY-SA 3.0
2017-12-01T15:28:36.517Z
Hi Romain, that would be most helpful. I don't have any experience with plugin development yet, so any help is greatly appreciated.
Andrea DeMers
CC BY-SA 3.0
2018-01-05T10:54:22.183Z
Sorry for the late reply, I'm still very busy since my previous message.

Here is perhaps something to start: https://cl.ly/2p0C3q1g2q0p. Please note that this will not work as it is currently, it's just a quick first draft.

Hope you can start something with this. I don't have so experience in plugin development, but don't be afraid, your request is a very good opportunity to learn!
Romain P.
CC BY-SA 3.0
2018-01-05T14:35:00.910Z
Many thanks, Romain, I'll give it a go and when I get it working, I'll share it with Craft community.
Andrea DeMers
CC BY-SA 3.0
2017-11-30T16:00:30.790Z
2017-12-01T10:13:18.243Z
2017-12-01T10:13:18.243Z
Romain P.
<p>I want to allow registered users to insert (i.e. upload) images into a Redactor rich text field in a front-end form.</p>

<p>I dowloaded the Image Manager plugin from Imperavi (<a href="https://imperavi.com/redactor/plugins/imagemanager/" rel="nofollow noreferrer">https://imperavi.com/redactor/plugins/imagemanager/</a>) and set up my Redactor config as follows:</p>

<pre><code>{% includeJsResource "lib/redactor/redactor.js" %}
{% includeJsResource "lib/redactor/plugins/source.js" %}
{% includeJsResource "lib/redactor/plugins/fullscreen.js" %}
{% includeJsResource "lib/redactor/plugins/imagemanager.js" %}
{% includeCssResource "lib/redactor/redactor.css" %}

{% set redactorJS %}
    $('#{{ elId }}').redactor({
        buttons: ['format', 'bold', 'italic', 'deleted', 'lists', 'link', 'html', 'image'],
        formatting: ['p', 'blockquote', 'h2', 'h3'],
        plugins: ['source','fullscreen', 'imagemanager'],
        minHeight: 300,
        imageUpload: '/upload.php',
    });
{% endset %}
{% includeJs redactorJS %}
</code></pre>

<p>I can see the image button in the toolbar and the browse files modal when I click the image button. However, it doesn’t upload anything because <code>imageUpload: '/upload.php',</code> is obviously incorrect. What, if anything, can I replace <code>upload.php</code> with? If this isn’t possible, what else could I do to achieve this functionality? Thanks!</p>

<p><strong>UPDATE</strong>:</p>

<p>I have the following code in <code>craft/plugins/imagesuploaderscript/controllers/ImagesUploaderScriptController.php</code> from CloudApp share link in comment below:</p>

<pre><code>namespace Craft;
</code></pre>

<p>class ImagesUploaderScriptController extends BaseController
{</p>

<pre><code>protected $valid_extensions = array('jpg', 'jpeg', 'png');
protected $assetSourceId = 1;
protected $assetFolderId = 1;

public function actionUpload()
{
    $this-&gt;requireAjaxRequest();

    $errors = array();
    $success = array();

    if (!$_FILES['file']['error'])
    {
        $filename = $_FILES['file']['name'];
        $file = $_FILES['file']['tmp_name'];
        $extension = pathinfo($filename, PATHINFO_EXTENSION);

        if (!in_array($extension, $this-&gt;valid_extensions))
        {
            $errors[] = "$filename has an invalid extension.";
        } else {
            $uploadDir = craft()-&gt;assetSources-&gt;getSourceById($this-&gt;assetSourceId)-&gt;settings['path'];

            if (move_uploaded_file($file, $uploadDir . $filename))
            {
                IOHelper::deleteFile($file);

                $file = $uploadDir . $filename;

                $fileModel = new AssetFileModel();
                $fileModel-&gt;sourceId = $this-&gt;assetSourceId;
                $fileModel-&gt;folderId = $this-&gt;assetFolderId;
                $fileModel-&gt;filename = IOHelper::getFileName($filename);
                $fileModel-&gt;kind = IOHelper::getFileKind(IOHelper::getExtension($filename));
                $fileModel-&gt;size = filesize($file);
                $fileModel-&gt;dateModified = IOHelper::getLastTimeModified($file);

                craft()-&gt;assets-&gt;storeFile($fileModel);

                // print_r($fileModel);

                // displaying file
                $image = array(
                    'url' =&gt; 'images/'.$filename,
                    'id' =&gt; 1
                );
                $this-&gt;returnJSON($image);
                exit;
            }
            else
            {
                $errors[] = "$filename was unable to be saved.";
            }
        }
    }

    $this-&gt;returnJSON(compact('errors'));
    exit;
}
</code></pre>

<p>}</p>

<p>How do I get my form to talk to it? Also, what else do I need to do to get it to work?</p>

CC BY-SA 3.0
2017-11-30T15:58:13.847Z
I'm not sure if there is a really quick and dirty solution without messing things up in some way or another. The best way would be creating a custom redactor plugin. Craft made it's own for that `craft/app/resources/js/craft/redactor.js::10511` you could search for an existing one or create your own. All in all you have to send a request to the AssetController with the file and the parent folder and return the img tag. I've done it with https://quilljs.com but not with the redactor. If you want I can show you the default code
Robin Schambach
CC BY-SA 3.0
2017-12-01T15:30:02.230Z
Hi Robin, Thanks! Quill looks quite nice. I would be very interested in seeing the code.
Andrea DeMers
<redactor><image><upload><frontend-form>
How can I insert images into a Redactor rich text field in a front-end form?
# How can I insert images into a Redactor rich text field in a front-end form?

(Asked by: username_0 on 2017-11-30)

I want to allow registered users to insert (i.e. upload) images into a Redactor rich text field in a front-end form.
I dowloaded the Image Manager plugin from Imperavi (https://imperavi.com/redactor/plugins/imagemanager/) and set up my Redactor config as follows:
{% includeJsResource "lib/redactor/redactor.js" %}
{% includeJsResource "lib/redactor/plugins/source.js" %}
{% includeJsResource "lib/redactor/plugins/fullscreen.js" %}
{% includeJsResource "lib/redactor/plugins/imagemanager.js" %}
{% includeCssResource "lib/redactor/redactor.css" %}

{% set redactorJS %}
    $('#{{ elId }}').redactor({
        buttons: ['format', 'bold', 'italic', 'deleted', 'lists', 'link', 'html', 'image'],
        formatting: ['p', 'blockquote', 'h2', 'h3'],
        plugins: ['source','fullscreen', 'imagemanager'],
        minHeight: 300,
        imageUpload: '/upload.php',
    });
{% endset %}
{% includeJs redactorJS %}

I can see the image button in the toolbar and the browse files modal when I click the image button. However, it doesn’t upload anything because imageUpload: '/upload.php', is obviously incorrect. What, if anything, can I replace upload.php with? If this isn’t possible, what else could I do to achieve this functionality? Thanks!
UPDATE:
I have the following code in craft/plugins/imagesuploaderscript/controllers/ImagesUploaderScriptController.php from CloudApp share link in comment below:
namespace Craft;

class ImagesUploaderScriptController extends BaseController
{
protected $valid_extensions = array('jpg', 'jpeg', 'png');
protected $assetSourceId = 1;
protected $assetFolderId = 1;

public function actionUpload()
{
    $this->requireAjaxRequest();

    $errors = array();
    $success = array();

    if (!$_FILES['file']['error'])
    {
        $filename = $_FILES['file']['name'];
        $file = $_FILES['file']['tmp_name'];
        $extension = pathinfo($filename, PATHINFO_EXTENSION);

        if (!in_array($extension, $this->valid_extensions))
        {
            $errors[] = "$filename has an invalid extension.";
        } else {
            $uploadDir = craft()->assetSources->getSourceById($this->assetSourceId)->settings['path'];

            if (move_uploaded_file($file, $uploadDir . $filename))
            {
                IOHelper::deleteFile($file);

                $file = $uploadDir . $filename;

                $fileModel = new AssetFileModel();
                $fileModel->sourceId = $this->assetSourceId;
                $fileModel->folderId = $this->assetFolderId;
                $fileModel->filename = IOHelper::getFileName($filename);
                $fileModel->kind = IOHelper::getFileKind(IOHelper::getExtension($filename));
                $fileModel->size = filesize($file);
                $fileModel->dateModified = IOHelper::getLastTimeModified($file);

                craft()->assets->storeFile($fileModel);

                // print_r($fileModel);

                // displaying file
                $image = array(
                    'url' => 'images/'.$filename,
                    'id' => 1
                );
                $this->returnJSON($image);
                exit;
            }
            else
            {
                $errors[] = "$filename was unable to be saved.";
            }
        }
    }

    $this->returnJSON(compact('errors'));
    exit;
}

}
How do I get my form to talk to it? Also, what else do I need to do to get it to work?

**Tags:** redactor, image, upload, frontend-form

> **Comments:**
> **username_1**: I'm not sure if there is a really quick and dirty solution without messing things up in some way or another. The best way would be creating a custom redactor plugin. Craft made it's own for that `craft/app/resources/js/craft/redactor.js::10511` you could search for an existing one or create your own. All in all you have to send a request to the AssetController with the file and the parent folder and return the img tag. I've done it with https://quilljs.com but not with the redactor. If you want I can show you the default code  
> **username_0**: Hi Robin, Thanks! Quill looks quite nice. I would be very interested in seeing the code.  

---

## 1 answers

### Answer by username_2 on 2017-11-30. Score: 3 | Accepted answer

It doesn't seems possible natively, you should write a custom upload script.

→ [Example #1](https://imperavi.com/redactor/docs/upload-images/)

→ [Example #2](https://gist.github.com/sathoro/8178981#file-controller-php)

If it doesn't matter to add the images inside your rich text field, one more simple workaround could be to allow image upload to your assets using a separate upload field.

→ [Uploading Files from Front-end Entry Forms](https://craftcms.com/docs/assets-fields#uploading-files-from-front-end-entry-forms)

> **Comments:**
> **username_0**: Hi Romain, Thanks. The front-end form is to publish blog posts. I already have a separate upload field for the posts' featured image. However, I want users to be able to insert images between paragraphs. Ideally, I'd do this with a Matrix field, but my JS skills are insufficient to add new blocks on the front-end. I saw example #1. However, example #2 looks more interesting since I would also like to rename files on upload. I would basically be creating a plugin, correct? Could I use pluginfactory.io and select Controllers comp. & put content of ex. #2 in it?  
> **username_2**: Yes, you should write a plugin with a controller. Content of example #2 is a good start, but it needs some adaptations to works with Redactor. I made a first draft, which starts to work ; I could send it to you later.  
> **username_0**: Hi Romain, that would be most helpful. I don't have any experience with plugin development yet, so any help is greatly appreciated.  
> **username_2**: Sorry for the late reply, I'm still very busy since my previous message.  Here is perhaps something to start: https://cl.ly/2p0C3q1g2q0p. Please note that this will not work as it is currently, it's just a quick first draft.  Hope you can start something with this. I don't have so experience in plugin development, but don't be afraid, your request is a very good opportunity to learn!  
> **username_0**: Many thanks, Romain, I'll give it a go and when I get it working, I'll share it with Craft community.  

---

