Skip to main content
se añadieron 1117 caracteres en el cuerpo
Origen Enlace

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

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

Y asi lo estoy recibiendoalmaceno en PHPla variable $foto y uso la funcion addslashes y file_get_contents

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

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", body: new FormData(form), }) .then((response) => response.text()) .then((response) => { console.log(response); }); });

Y asi lo estoy recibiendo en PHP

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

se añadieron 1117 caracteres en el cuerpo
Origen Enlace
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", body: new FormData(form), }) .then((response) => response.text()) .then((response) => { console.log(response); }); });

Y asi lo estoy recibiendo en PHP

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";
}
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 () {
    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];
});

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";
    }
}
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", body: new FormData(form), }) .then((response) => response.text()) .then((response) => { console.log(response); }); });

Y asi lo estoy recibiendo en PHP

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";
}
se eliminaron 32 caracteres en el cuerpo
Origen Enlace

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? Se podria hacer mediante fetch?

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? Se podria hacer mediante fetch?

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?

Origen Enlace
Loading