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