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?
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
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";
}
}