title: TinyMCE Image Uploader with Specified Upload Path
body: <p>I would like to know are there any ways to upload an image using local file picker in TinyMCE that we can specify the image upload path? Previously I already made a local file (image) picker, but when I upload it, the image would be stored as base64 encoded image in txt file. What I want is for the image to be saved directly to my server and for the &quot;img src&quot; to be the specified upload path. Anyone knows the code to do this? All helps are appreciated, thank you very much!</p>
  <p>28/8/2021
  I want to update my current code based on the answer suggested by @Dmitry D. I already set the automatic_uploads to 'true', and specified the upload directory accustomed to my local directory, but it still returns a 405 http error.</p>
  <p>Currently I'm using TinyMCE 5.8.2 production package
  I already set the FLASK_ENV = development and FLASK_APP = app</p>
  <p>This is my index.html</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;container&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
              &lt;h2&gt;TinyMCE Upload Image with Python Flask&lt;/h2&gt;
              &lt;form id=&quot;posts&quot; name=&quot;posts&quot; method=&quot;post&quot; action=&quot;./static/tinymce/postAcceptor.php&quot;&gt;
                  &lt;textarea name=&quot;message&quot; id=&quot;message&quot;&gt;&lt;/textarea&gt;&lt;br&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;script src=&quot;./static/tinymce/tinymce.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
      tinymce.init({
          selector: &quot;textarea#message&quot;,
          plugins: &quot;code image&quot;,
          toolbar: 'undo redo image',
          image_title: true,
          automatic_uploads: true,
          images_upload_url: './static/tinymce/postAcceptor.php',
          images_upload_credentials: true,
          file_picker_types: 'image',
      });
  &lt;/body&gt;
  </code></pre>
  <p>app.py (Flask framework)</p>
  <pre class="lang-py prettyprint-override"><code>from flask import Flask, render_template, jsonify, request
  from werkzeug.utils import secure_filename
  import os
  import urllib.request
   
  app = Flask(__name__)
  
  @app.route('/')
  def main():
      return render_template('index.html')
  
  if __name__ == '__main__':
      app.run(debug=True)
  
  </code></pre>
  <p>postAcceptor.php</p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
    /***************************************************
     * Only these origins are allowed to upload images *
     ***************************************************/
    $accepted_origins = array(&quot;http://localhost&quot;, &quot;http://127.0.0.1&quot;);
  
    /*********************************************
     * Change this line to set the upload folder *
     *********************************************/
    $imageFolder = &quot;./static/uploads/&quot;;
  
    if (isset($_SERVER['HTTP_ORIGIN'])) {
      // same-origin requests won't set an origin. If the origin is set, it must be valid.
      if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
        header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
      } else {
        header(&quot;HTTP/1.1 403 Origin Denied&quot;);
        return;
      }
    }
  
    // Don't attempt to process the upload on an OPTIONS request
    if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
      header(&quot;Access-Control-Allow-Methods: POST, OPTIONS&quot;);
      return;
    }
  
    reset ($_FILES);
    $temp = current($_FILES);
    if (is_uploaded_file($temp['tmp_name'])){
      /*
        If your script needs to receive cookies, set images_upload_credentials : true in
        the configuration and enable the following two headers.
      */
      // header('Access-Control-Allow-Credentials: true');
      // header('P3P: CP=&quot;There is no P3P policy.&quot;');
  
      // Sanitize input
      if (preg_match(&quot;/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/&quot;, $temp['name'])) {
          header(&quot;HTTP/1.1 400 Invalid file name.&quot;);
          return;
      }
  
      // Verify extension
      if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array(&quot;gif&quot;, &quot;jpg&quot;, &quot;png&quot;))) {
          header(&quot;HTTP/1.1 400 Invalid extension.&quot;);
          return;
      }
  
      // Accept upload if there was no origin, or if it is an accepted origin
      $filetowrite = $imageFolder . $temp['name'];
      move_uploaded_file($temp['tmp_name'], $filetowrite);
  
      // Determine the base URL
      $protocol = isset($_SERVER['HTTPS']) &amp;&amp; $_SERVER['HTTPS'] == 'on' ? &quot;https://&quot; : &quot;http://&quot;;
      $baseurl = $protocol . $_SERVER[&quot;HTTP_HOST&quot;] . rtrim(dirname($_SERVER['REQUEST_URI']), &quot;/&quot;) . &quot;/&quot;;
  
      // Respond to the successful upload with JSON.
      // Use a location key to specify the path to the saved image resource.
      // { location : '/your/uploaded/image/file'}
      echo json_encode(array('location' =&gt; $baseurl . $filetowrite));
    } else {
      // Notify editor that the upload failed
      header(&quot;HTTP/1.1 500 Server Error&quot;);
    }
  ?&gt;
  </code></pre>
  <p>My directory roughly looks like this:</p>
  <p>ImageUploader/
  -app.py<br />
  -venv<br />
  -static<br />
  ----uploads<br />
  ----tinymce<br />
  --------tinymce.min.js<br />
  --------postAcceptor.php<br />
  -templates<br />
  ----index.html</p>
  <p>After I write flask run, and then clicked on the image button, the upload menu is there and I can browse from my local directory, but it when I try to upload it, it says &quot;HTTP: Error 405&quot;. I tried to inspect it, and on the console menu it founds an error that said &quot;POST http://localhost:5000/static/tinymce/postAcceptor.php 405 (METHOD NOT ALLOWED)&quot;</p>
  <p>Anybody knows how this could happen and how to solve it? Thank you very much guys!</p>