Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-30T19:09:51.927Z
Answers.Text: 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?
Answers.UserDisplayName: Andrea DeMers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-12-01T12:28:34.540Z
Answers.Text: 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.
Answers.UserDisplayName: Romain P.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-12-01T15:28:36.517Z
Answers.Text: Hi Romain, that would be most helpful. I don't have any experience with plugin development yet, so any help is greatly appreciated.
Answers.UserDisplayName: Andrea DeMers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-05T10:54:22.183Z
Answers.Text: 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!
Answers.UserDisplayName: Romain P.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-01-05T14:35:00.910Z
Answers.Text: Many thanks, Romain, I'll give it a go and when I get it working, I'll share it with Craft community.
Answers.UserDisplayName: Andrea DeMers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-30T16:00:30.790Z
Answers.LastActivityDate: 2017-12-01T10:13:18.243Z
Answers.LastEditDate: 2017-12-01T10:13:18.243Z
Answers.UserDisplayName: Romain P.
Body: <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>
  
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-11-30T15:58:13.847Z
Comments.Text: 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
Comments.UserDisplayName: Robin Schambach
Comments.ContentLicense: CC BY-SA 3.0
Comments.CreationDate: 2017-12-01T15:30:02.230Z
Comments.Text: Hi Robin, Thanks! Quill looks quite nice. I would be very interested in seeing the code.
Comments.UserDisplayName: Andrea DeMers
Tags: <redactor><image><upload><frontend-form>
Title: How can I insert images into a Redactor rich text field in a front-end form?
ThreadText: # 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 username_1, 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 username_2, 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 username_2, 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, username_2, I'll give it a go and when I get it working, I'll share it with Craft community.  
  
  ---
  
  