Javascript Summernote JS upload de fotos com PHP

assinante · 10 de setembro de 2020

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>

    <title>Imagem de Teste</title>

</head>


<body>

<script type="text/javascript">
    $(document).ready(function() {
        $('#summernote').summernote({
            height: 200,
            onImageUpload: function(files, editor, welEditable) {
                sendFile(files[0], editor, welEditable);
            }
        });
        function sendFile(file, editor, welEditable) {
            data = new FormData();
            data.append("file", file);
            $.ajax({
                data: data,
                type: "POST",
                url: "upload.php",
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(welEditable, url);
                }
            });
        }
    });
</script>


<form action="upload.php" method="POST"> 
<textarea id="summernote" rows="20"></textarea>  
<button type="submit">Enviar</button>
</form>

</body>
</html>

Esse codigo acima é a minha index com um form e uma tentativa falha de salvar as imagens do summernote no bd.

Esse aqui em baixo é o meu upload php

<?php
if ($_FILES['file']['name']) {
            if (!$_FILES['file']['error']) {
                $name = md5(Rand(100, 200));
                $ext = explode('.', $_FILES['file']['name']);
                $filename = $name . '.' . $ext[1];
                $destination = '/assets/images/' . $filename; //change this directory
                $location = $_FILES["file"]["tmp_name"];
                move_uploaded_file($location, $destination);
                echo 'http://test.yourdomain.al/images/' . $filename;//change this URL
            }
            else
            {
              echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
            }
        }

quebrei muito a cabeça para chegar nesse exemplo acima, porém, ainda não tive sucesso!

Quero que o Summernote salve em meu servidor as imagens que estão em meus artigos, e gere uma url da imagem que sera usada para visualizar ela no post

Quem souber, por favor, ajude! é para um trabalho de cursinho (sem fins lucrativos), porém, ainda não saiu nada.

Renan M Galvão · 11 de setembro de 2020

Aparentemente o callback "onImageUpload" precisa estar dentro do parâmetro "callbacks". No caso o teu código deveria ser:

$('#summernote').summernote({
  height: 200,
  callbacks:{
    onImageUpload: function(files, editor, welEditable) {
    	sendFile(files[0], editor, welEditable);
    }
  }
});

Documentação: https://summernote.org/deep-dive/#onimageupload. Tente e veja se funciona.

assinante · 12 de setembro de 2020

@Renan M Galvão

Olá, Renan! Nesse caso, não entendi muito bem essa parte da documentação deles, esse "onImageUpload" envia para onde a imagem? Tipo, eu preciso ainda receber ela no meu outro arquivo "upload.php" para colocar a imagem dentro de uma pasta em meu servidor para o caminho dela ser "meusite.com/img/nome_imagem.png". Você entendeu essa parte da estrutura do Summernote? Caso já tenha trabalhado com algo semelhante, recomenda o Summernote ou outro WYSIWYG Editor, comecei a testar o Tiny MCE, achei a documentação mais fácil, sabe se com ele fazer esse upload das imagens fica mais fácil?

Aguardo uma sugestão

Obrigado pela ajuda em seu segundo post

Renan M Galvão · 14 de setembro de 2020

Boa noite, Assinante. O Summernote trabalha com eventos, quando você coloca uma imagem no editor esse evento é acionado e uma função designada vai tratar os dados (caso tenha algum), a função que trabalha os dados é essa que está associado ao onImageUpload como o nome indica. Você está sobrescrevendo essa função para salvar o arquivo diretamente no servidor ao invés de usar uma imagem de base64 no texto. Entretanto, testei essa biblioteca no Firefox e os eventos não estão funcionando nessa versão. Não sei qual navegador você utiliza, mas pode estar ocorrendo em outros. Também vi no github que está há meses sem atualização. Deve ser algum tipo de bug, por isso você não está conseguindo rodar o código como eu também não consegui. Já utilizei essa biblioteca no passado em outra versão e não tive problemas porquê eu não precisava carregar a imagem para o servidor. Se você achou esse outro editor e está lidando melhor com ele, vai na fé, o Summernote parece estar simplesmente quebrado. Há mais de 400 problemas abertos no github.

https://github.com/summernote/summernote/issues/3640

Obrigado, você. Fique com Deus.

GabrielSennaMs · 16 de setembro de 2020

@assinanteBom amigo dei uma olhada no seu código e encontrei alguns erros no uso da API.

Se eu for explicar cada ponto errado, vai levar muito tempo, então eu criei esse exemplo que você pode usar como base e acerta o seu código.

Em 14/09/2020 às 18:59, Renan M Galvão disse:

Entretanto, testei essa biblioteca no Firefox e os eventos não estão funcionando nessa versão.

@Renan M GalvãoEu efetuei alguns testes no Firefox e está funcionado sem problema, depois se possível utilize esse exemplo abaixo no seu Firefox.

Página com o edito:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <!-- include libraries(jQuery, bootstrap) -->
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <!-- include summernote css/js -->
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
        <title>Imagem de Teste</title>
        <style>

            html, body {
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
                display: flex;
            }

            form {
                max-width: 1000px; 
                margin: auto;
            }

        </style>
    </head>
    <body>
        <form action="upload.php" onsubmit="return false;" method="POST"> 
            <textarea id="summernote" name="editordata"></textarea>  
        </form>
        <script type="text/javascript">

            $(function()
            {
                const $summernote = $('#summernote').summernote({
                    height: 300,
                    callbacks: {
                        onImageUpload: function(files)
                        {
                            for(let num = 0; num < files.length; num++)
                            {
                                sendFile(
                                    files[num], 
                                    function(objectImg)
                                    {
                                        let img = document.createElement('img');
                                        
                                        img.src = objectImg.url;
                                        img.alt = objectImg.name;
                                        
                                        $summernote.summernote('insertNode', img);
                                    },
                                    function(error)
                                    {
                                        console.error(error)
                                    }
                                );
                            } 
                        }
                    }
                });
            });

            function sendFile(file, callbackSuccess, callbackError)
            {
                let data = new FormData();

                data.append('image', file);
            
                $.ajax({
                    type: 'post',
                    url: 'upload_image.php',
                    contentType: false,
                    processData: false,
                    data,
                    success: (res) => callbackSuccess(res),
                    error: (res) => callbackError(res)
                });
            }

        </script>
    </body>
</html>

Arquivo de upload

<?php 

require_once 'FileImage.php';
header('Content-Type: application/json');

try
{
    if ($_SERVER["REQUEST_METHOD"] = 'POST')
    {
        if (isset($_FILES['image']))
        {
            $img = new FileImage($_FILES['image']);

            if ($img->getStatus())
            {
                echo($img);
                exit();
            }           
        }
        else
        {
            throw new Exception('O arquivo de upload não foi encontrado');     
        }
    }
    else
    {
        throw new Exception('Method Not Allowed');            
    }

    throw new Exception('Ocorreu um erro ao tentar efetuar o upload do arquivo para o servidor'); 
}
catch (Exception $e)
{
    echo(json_encode(["error" => $e->getMessage()]));
}

Class FileImage

<?php

class FileImage 
{
    /**
     * @var $tempFile Local temporario do arquivo
     */
    private $tempFile = null;

    /**
     * @var $name Nome do arquivo gerado usando o método hashNameFile
     */
    private $name = null;

    /**
     * @var $type Tipo do arquivo
     */
    private $type = null;

    /**
     * Tamanho do arquivo
     */
    private $size = null;

    /**
     * Status da verificação do arquivo usando o método isImage
     */
    private $statusVerified = false;

    /**
     * Local padrão para salvar os arquivos
     */
    private $localDefault = "/assets/img";

    /**
     * Tipos de arquivos de imagens permitidos
     * 
     * @var $types
     */
    private $types = ['jpg', 'jpeg', 'png', 'gif'];
    
    /**
     * Função de construção
     * 
     * @param $file arquivo temporario
     * @param $name nome alternativo, caso não queira usar o hash gerado pelo método hashNameFile
     */
    function __construct($file, $name = null)
    {
        $this->tempFile = $file['tmp_name'];

        if ($this->tempFile == null or !file_exists($this->tempFile))
        {
            throw new Exception("Arquivo não encontrado");  
        }

        $this->type = strtolower(pathinfo(basename($file["name"]), PATHINFO_EXTENSION));

        if (!$this->isImage($this->type))
        {
            throw new Exception("O Arquivo inserido não é uma imagem");  
        }

        $this->name = ($name != null) ? $name : $this->hashNameFile();

        if (!$this->verified())
        {
            $this->statusVerified = $this->moveFile();
        }
        else
        {
            $this->statusVerified = true;
        }

        $this->size = filesize(__DIR__.$this->localDefault.$this->name.'.'.$this->type);
    }

    /**
     * Move o arquivo temporario para seu local designado
     * 
     * @return bool
     */
    private function moveFile(): bool
    {
        return move_uploaded_file($this->tempFile, __DIR__.$this->localDefault.$this->name.'.'.$this->type);
    }

    /**
     * Verifica se o arquivo já existe no local designado
     * 
     * @return bool
     */
    private function verified(): bool
    {
        $file = $this->localDefault.$this->name.'.'.$this->type;

        if (file_exists($file))
        {
            return true;
        }

        return false;
    }

    /**
     * Verifica se o arquivo temporario é uma imagem com o tipo permitido
     * 
     * @return bool
     */
    private function isImage($type = null): bool
    {
        if ($type != null and array_search($type, $this->types) >= 0 and getimagesize($this->tempFile) !== false)
        {
            return true;
        }

        return false;
    }

    /**
     * Retorna o hash em md5 do arquivo
     * Obs..: Isso pode ser usado para evita o reupload da mesma imagem.
     * 
     * @return string
     */
    private function hashNameFile(): string
    {
        return hash_file('md5', $this->tempFile);   
    }

    /**
     * Retorna um json contendo os dados da imagem, 
     * caso a imagens não exista retorna o valor false
     * 
     * @return string|bool
     */
    public function getImage()
    {
        if ($this->statusVerified)
        {
            $data =  [
                "name" => $this->name,
                "url" => $this->localDefault.$this->name.'.'.$this->type,
                "size" => $this->size,
                "type" => $this->type
            ];

            return json_encode($data);
        }
       
        return false;
    }

    /**
     * Comportamento do object quando convertido para uma string
     * 
     * @return string|bool
     */
    function __toString()
    {
        return $this->getImage();
    }

    /**
     * Retorna o status da verificação do contrutor
     * 
     * @return bool
     */
    public function getStatus(): bool
    {
        return $this->statusVerified;
    }
}

assinante · 16 de setembro de 2020

@GabrielSennaMs Vou realizar essas adaptações e reinterpretar minha lógica para corrigir os meus erros com base em seu código compartilhado!

Obrigado!

Renan M Galvão · 23 de setembro de 2020

@GabrielSennaMs Eu troquei o meu HD por um SSD e não tenho mais os arquivos exatos, entretanto, na documentação há dois modos de utilizar esse callback e teve um que não obtive sucesso (código abaixo). Teve outro que funcionou sim e dava apenas o objeto File (como você colocou no teu código), diferentemente do modo que o @assinante colocou inicialmente que era algo como esse daqui, pois achei o mesmo código com 3 argumentos ao invés de um. Talvez a solução seria utilizar uma versão anterior? De todo modo, como eu disse, há vários problemas no pacote e já fazem meses que ele não recebe patches, eu não apostaria nisso.

Código que não funcionou no meu Firefox 80.0.1 64bits. Teste mínimo apenas para verificar se o callback funcionava.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <!-- include libraries(jQuery, bootstrap) -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <!-- include summernote css/js -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote.min.js"></script>
    <script>
      $(document).ready(function(){
        $('#summer').summernote();
        $('#summer').on('summernote.image.upload', function(we, files) {
          console.log(we);
          console.log(files);
        });
      });
    </script>  
  </head>
  <body>
    <div id="summer"></div>
  </body>
</html>