8206

Subir un archivo al servidor con summernote

Summernote es un editor de texto muy sencillo y ligero que se suele utilizar para campos que no necesiten de una especial complejidad de composición.

Recientemente he tenido que lidiar para hacer que el botón de imagen de summernote subiera un archivo al servidor antes de procesar el formulario.

Dejo aquí los pasos a seguir por si alguien los necesita:

Por un lado, en el archivo en el que está el formulario necesitamos definir esta función:

function uploadImage(image) {
            var data = new FormData();
            data.append("files", image);
            $.ajax({
                url: 'el-archivo-php-que-viene-despues.php',
                cache: false,
                contentType: false,
                processData: false,
                data: data,
                type: "post",
                success: function(url) {
                  alert(url);
                    var image = $('').attr('src', '/' + url);
                    $('#textareasummernote').summernote("insertNode", image[0]);
                },
                error: function(data) {
                    console.log(data);
                }
            });
        }

A continuación, cuando llamamos a summernote,

$('#textareasummernote').summernote({

            height: 200,
            callbacks: {
              onImageUpload: function(image) {
                uploadImage(image[0]);
              }
              }
          });

Por  otro lado, tenemos que crear un archivo php, aquí lo he llamado el-archivo-php-que-viene-despues.php

Ese archivo va así

if ($_FILES['files']['name']) {

$ruta='eldirectorioquesea/';
            if (!$_FILES['files']['error']) {
                $name = md5(time());
                $ext = explode('.', $_FILES['files']['name']);
                $filename = $name . '.' . $ext[1];
                $destination = $ruta. $filename;
                $location = $_FILES["files"]["tmp_name"];
                move_uploaded_file($location, $destination);
                echo $ruta.$filename;
            }
            else
            {
              echo  $message = 'Se ha producido el siguiente error:  '.$_FILES['files']['error'];
            }
        }

 

X

Información relacionada...

Enlace arriba