0

Como faço para selecionar a imagem local do computador e fazer upload para o meu servidor o qual deve retorna a URL da imagem no TinyMCE e assim gerar a tag <img> com a src contendo a URL da imagem no servidor? Eu estava lendo a documentação File & Image Upload E não entendi muito bem. Tentei até implementar. Vi que deve haver um script para tratar o upload e o mesmo deve retorna o JSON com o endereço da imagem, mas não entendi como funcionará do lado do cliente, melhor como aplicar no TimyMCE. Já tenho o script básico do lado back-end pronto para receber as imagens, mas não consigo fazer o TMCE mandá-las. Estou quase desitindo e crindo uma galeria de imagens a parte para isso.

<?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()]);

1 Resposta 1

1

De acordo com a documentação, seria da seguinte forma:

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

Também na documentação tem o exemplo do upload, veja abaixo:

<?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");
  }
?>

Caso mesmo assim não consiga, recomendo abrir este link para ver as demais opções do TinyMCE referente a Upload.

1
  • Já tentei essa configuração do js e nada acontece.
    – ayelsew
    Commented 12/07/2017 às 23:27

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .