1

tengo una consulta, tengo un Drag & Drop, que me almacena una imagen como un objeto en una variable JavaScript como podría hacer para enviar ese objeto a PHP y almacenar la imagen en la base de datos como tipo BLOB?

Asi tengo el codigo HTML

         <div class="drag-area">
            <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
            <div class="img"></div>
            <header>Drag & Drop to Upload File</header>
            <span>OR</span>
            <button>Browse File</button>
            <input type="file" hidden name="file" />
        </div>

Y el JS esta asi, en donde se puede ver que la variable file almacena la imagen que se sube cuando se presiona el boton o se arrastra la imagen en el dropArea, cuando hago la petición fetch y paso en el cuerpo el formData al llegar al servidor no lo almacena y simplemente me muestra en la respuesta como Undefined. No conozco muy bien PHP a profundidad, pero si necesito poder solucionar el inconveniente y aprender el porque no esta recibiendo la imagen.

const dropArea = document.querySelector(".drag-area"),
    dragText = dropArea.querySelector("header"),
    icon = dropArea.querySelector(".icon"),
    button = dropArea.querySelector("button"),
    input = dropArea.querySelector("input"),
    img = dropArea.querySelector(".img");
let file; 

button.onclick = () => {
    input.click();
};


input.addEventListener("change", function () {
// Esta variable file es donde se almacena el archivo como un objeto
    file = this.files[0];
    dropArea.classList.add("active");
    showFile();
});

dropArea.addEventListener("dragover", (event) => {
    event.preventDefault(); 
    dropArea.classList.add("active");
    dragText.textContent = "Release to Upload File";
});

dropArea.addEventListener("dragleave", () => {
    dropArea.classList.remove("active");
    dragText.textContent = "Drag & Drop to Upload File";
});

dropArea.addEventListener("drop", (event) => {
    event.preventDefault();
    file = event.dataTransfer.files[0];
});

// Esta funcion valida la extension de la imagen y la renderiza para insertarla por pantalla
function showFile() {
    let fileType = file.type; 
    let validExtensions = ["image/jpeg", "image/jpg", "image/png"];
    if (validExtensions.includes(fileType)) {
        let fileReader = new FileReader(); 
        fileReader.onload = () => {
            let fileURL = fileReader.result; 
            var imgTag = `<img src="${fileURL}" alt="" id="foto">`;
            img.innerHTML = imgTag;
            dragText.classList.add("none");
            button.classList.add("none");
            icon.classList.add("none");
        };
        fileReader.readAsDataURL(file);
    } else {
        alert("This is not an Image File!");
        dropArea.classList.remove("active");
        dragText.textContent = "Drag & Drop to Upload File";
    }
}

 // Aqui hago la peticion fetch
    enviar.addEventListener("click", () => {
        fetch("enviar.php", {
            method: "POST",
//Aqui envio el formulario
            body: new FormData(form),
        })
            .then((response) => response.text())
            .then((response) => {
                console.log(response);
            });
    });

En el servidor la almaceno en la variable $foto y uso la funcion addslashes y file_get_contents

define('DB_HOST','localhost');
define('DB_USER','root');
define('DB_PASS','');
define('DB_NAME','example1');

$conn = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);

if ($conn ->connect_error){
    die ("Conexión fallida: "  . $conn->connect_error);
}

$foto = addslashes(file_get_contents($_FILES['photo_user']['tmp_name']));

$query = "INSERT INTO usuario (foto) VALUES ('$foto')";

$result = $conn->query($query);

if(!$result){
    die("Query Failed: " . mysqli_error($conn));
}else{
    echo "ok";
}
5
  • 1
    Puedes hacerlo con fetch si lo deseas, revisa la documentación Y si tienes problemas dinos cuál es exactamente el problema. Por el momento tu pregunta se basa en opiniones y podría ser cerrada.
    – A. Cedano
    Commented el 8 abr. 2021 a las 19:16
  • En el evento drop no estás ejecutando la función showFile(). Al terminar de cargar el archivo es donde puedes ejecutar una petición AJAX para subirlo, pero te recomiendo que lo guardes en disco y solo ruta+nombre en la base de datos, te vas a evitar muchos dolores de cabeza.
    – Triby
    Commented el 8 abr. 2021 a las 20:11
  • Como podría hacer eso, es que he intentado enviar un formData con fetch, pero me sale error de Undefined array y al final no he podido enviar la imagen a php Commented el 8 abr. 2021 a las 23:21
  • @DanielCarrillo, edita tu pregunta para agregar ese código fetch() que no te funcionó, solo así podemos tratar de ayudarte.
    – Triby
    Commented el 9 abr. 2021 a las 16:23
  • @Triby vale, ya la actualice Commented el 9 abr. 2021 a las 19:31

1 respuesta 1

0

En el código que muestras no hay un formulario, por lo que new FormData(form) va a generar error y, de cualquier forma, si el archivo fue arrastrado, no se agrega al <input type="file">, solo queda en la variable file.

Lo que debes hacer es crear el objeto FormData vacío y usar el método .append() para agregar el archivo, proporcionando 2 parámetros: nombre, valor.

const dropArea = document.querySelector(".drag-area"),
    dragText = dropArea.querySelector("header"),
    icon = dropArea.querySelector(".icon"),
    button = dropArea.querySelector("button"),
    input = dropArea.querySelector("input"),
    img = dropArea.querySelector(".img"),
    enviar = document.querySelector('#enviar');
let file; 

button.onclick = () => {
    input.click();
};


input.addEventListener("change", function () {
// Esta variable file es donde se almacena el archivo como un objeto
    file = this.files[0];
    dropArea.classList.add("active");
    showFile();
});

dropArea.addEventListener("dragover", (event) => {
    event.preventDefault(); 
    dropArea.classList.add("active");
    dragText.textContent = "Release to Upload File";
});

dropArea.addEventListener("dragleave", () => {
    dropArea.classList.remove("active");
    dragText.textContent = "Drag & Drop to Upload File";
});

dropArea.addEventListener("drop", (event) => {
    event.preventDefault();
    file = event.dataTransfer.files[0];
    // Mostrar archivo
    showFile();
});

// Esta funcion valida la extension de la imagen y la renderiza para insertarla por pantalla
function showFile() {
    let fileType = file.type; 
    let validExtensions = ["image/jpeg", "image/jpg", "image/png"];
    if (validExtensions.includes(fileType)) {
        let fileReader = new FileReader(); 
        fileReader.onload = () => {
            let fileURL = fileReader.result; 
            var imgTag = `<img src="${fileURL}" alt="" id="foto">`;
            img.innerHTML = imgTag;
            dragText.classList.add("none");
            button.classList.add("none");
            icon.classList.add("none");
        };
        fileReader.readAsDataURL(file);
    } else {
        alert("This is not an Image File!");
        dropArea.classList.remove("active");
        dragText.textContent = "Drag & Drop to Upload File";
    }
}

// Aqui hago la peticion fetch
enviar.addEventListener("click", (e) => {
    // Evitar comportamiento normal del botón (¿submit?)
    e.preventDefault();
    // Verificar que se agregó un archivo
    if(!file) {
        alert('Agrega un archivo');
        return;
    }
    // Crea un objeto FormData
    let data = new FormData();
    // Agrega el archivo
    data.append('photo_user', file);
    // Solo para ver que sí se agregó el archivo
    console.log(...data);
    fetch("enviar.php", {
        method: "POST",
        body: data,
    })
    .then((response) => response.text())
    .then((response) => {
        console.log(response);
    });
});
<div class="drag-area">
            <div class="icon"><i class="fas fa-cloud-upload-alt"></i></div>
            <div class="img"></div>
            <header>Drag & Drop to Upload File</header>
            <span>OR</span>
            <button>Browse File</button>
            <input type="file" hidden name="file" />
        </div>
        <button id="enviar">Enviar</button>

En PHP, primero debes mover el archivo subido de la ubicación temporal a una ruta final con move_uploaded_file() y crear el registro solo si se pudo mover.

// Usar una variable para tratar de simplificar
$file = $_FILES['photo_user'];
// Si la propiedad "error" es cero, el archivo se subió correctamente
if($file['error'] == 0) {
    // "name" contiene el nombre real del archivo
    $foto = $file['name'];
    // Mover el archivo a su ubicación final
    // Revisa que exista la carpeta y tiene permisos de escritura
    if(move_uploaded_file($file['tmp_name'], "ruta/$foto")) {
        // Ahora sí puedes insertar en base de datos
    } else {
        echo 'El archivo se subió, pero no se pudo mover a ubicación final';
    }
} else {
    echo 'No se pudo subir el archivo';
}

Todavía hay cosas importantes por hacer en PHP y que debes investigar:

  • Nunca confíes en los usuarios, siempre valida que el archivo es realmente una imagen
  • No uses addSlashes() para escapar variables que vas a incluir en una consulta, dependiendo de la librería que estés usando, hay opciones real_escape_string
  • Para evitar errores e inyecciones SQL mejor usa consultas preparadas y así te evitas "inventar" cosas como la del punto anterior
6
  • Usar move_uploaded_file() es totalmente opcional; ni "primero" ni "debe", depende del caso de uso.
    – Sal
    Commented el 9 abr. 2021 a las 22:45
  • @Triby Si me sirvió, muchas gracias por tu ayuda y tus consejos Commented el 9 abr. 2021 a las 23:03
  • @Sal, en mi pobre entender, en este caso, se quiere subir un archivo al servidor, guardando la ruta (o solo el nombre de archivo) y sí, después de validar que hay un archivo y se trata de una imagen, "primero debe" mover a la ubicación final, porque en el código de la pregunta intenta guardar la ubicación temporal ($foto = addslashes(file_get_contents($_FILES['photo_user']['tmp_name']));), de donde será eliminado tarde o temprano. Acerca de que move_uploaded_file() es "totalmente opcional", podrá haber otras funciones para realizar la misma tarea, pero esta es la más adecuada.
    – Triby
    Commented el 10 abr. 2021 a las 23:00
  • @Triby ¿Para qué hacer file_get_contents() junto con move_uploaded_file()?
    – Sal
    Commented el 10 abr. 2021 a las 23:57
  • @Sal, aunque se puede hacer, no es recomendable guardar el contenido del archivo en base de datos.
    – Triby
    Commented el 11 abr. 2021 a las 0:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.