How to upload images with Tinymce

Question

How do I select the local image of the computer and upload it to my server which should return the image URL in Tinymce and generate the tag <img> with the src containing the image URL on the server? I was reading the documentation File & Image Upload And I didn’t understand it very well. I even tried to implement it. I saw that there should be a script to handle the upload and it should return the JSON with the image address, but I didn’t understand how it will work on the client side, better as applying in Timymce. I already have the basic back-end script ready to receive the images, but I can’t get TMCE to send them. I’m almost disillusioned and creating a gallery of images for this.

<?php

class Upload {

    private $file;
    private $nameInput;
    private $mimeImg;
    private $dir;
    private $dirUpload;
    private $newName;

    function __construct($file, $name) {
        $this->file = $file;
        $this->nameInput = $name;
        $this->dir = $_SERVER['DOCUMENT_ROOT'] . '/mysite/img/postagens/';
        $this->dirUpload = $this->dir . date('YmdHisS-') . basename($this->file[$name]['name']);
        $this->newName = '/mysite/img/postagens/' . date('YmdHisS-') . basename($this->file[$name]['name']);
        $this->mimeImg = ['image/png', 'image/jpeg', 'image/gif', 'image/ico', 'image/vnd.microsoft.icon'];
    }

    public function getName() {
        return $this->file[$this->nameInput]['name'];
    }

    public function getNewName() {
        return $this->newName;
    }

    public function getDirUpload() {
        return $this->dirUpload;
    }

    public function getType() {
        return $this->file[$this->nameInput]['type'];
    }

    public function getSize() {
        return $this->file[$this->nameInput]['size'];
    }

    public function getError() {
        return $this->file[$this->nameInput]['error'];
    }

    public function setName($name) {
        $this->dirUpload = $this->dir . '/' . $name;
    }

    public function setTmpName() {
        $this->file[$this->nameInput]['tmp_name'];
    }

    public function setSalve() {
        return move_uploaded_file($this->file[$this->nameInput]['tmp_name'], $this->dirUpload);
    }

    function getFile() {
        return $this->file[$this->nameInput]['tmp_name'];
    }

}


$upload = new Upload($_FILES, 'img');
$upload->setSalve();
header('Content-Type: application/json');
json_encode(['location',$upload->getNewName()]);

Answer 1

According to the documentation, would be as follows:

// Exemplo básico
tinymce.init({
  selector: 'textarea',
  images_upload_url: 'arquivoQueRecebeAsImagens.php',
  images_upload_base_path: '/pasta/padrao/para/armazenar',
  images_upload_credentials: true
});

Also in the documentation has the example of upload, see below:

<?php
  /*******************************************************
   * Only these origins will be allowed to upload images *
   ******************************************************/
  $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

  /*********************************************
   * Change this line to set the upload folder *
   *********************************************/
  $imageFolder = "images/";

  reset ($_FILES);
  $temp = current($_FILES);
  if (is_uploaded_file($temp['tmp_name'])){
    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("HTTP/1.0 403 Origin Denied");
        return;
      }
    }

    /*
      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="There is no P3P policy."');

    // Sanitize input
    if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
        header("HTTP/1.0 500 Invalid file name.");
        return;
    }

    // Verify extension
    if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), array("gif", "jpg", "png"))) {
        header("HTTP/1.0 500 Invalid extension.");
        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);

    // 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' => $filetowrite));
  } else {
    // Notify editor that the upload failed
    header("HTTP/1.0 500 Server Error");
  }
?>

If you still can’t, I recommend opening this link to see the other Tinymce Upload options.