Функция перетаскивания не работает в Django
Я делаю сайт, используя django в качестве бэкенд фреймворка.
Я сделал фронтенд загрузки изображений для авторов контента таким образом, чтобы они могли загружать изображения либо нажатием кнопки "Обзор файлов", либо просто перетаскивая изображение. Функция простого нажатия кнопки (просмотр файлов) работает отлично. Однако, когда используется перетаскивание, файл не загружается ни в запрос django files, ни в запрос post. Мне нужна помощь, как сделать так, чтобы он появился в файловом или пост-запросе в моем бэкенде
Когда я загружаю файл с помощью кнопки, а не перетаскиваю его, я вижу, что файл появляется в запросе файлов следующим образом:-
Я хочу, чтобы файл появлялся здесь в области, отмеченной желтым цветом, когда я использую перетаскивание.
Вот код
.html
.js
//selecting all required elements
const dropArea = document.querySelector(".drag-area"),
dragText = dropArea.querySelector("#dragText"),
button = dropArea.querySelector("#browseBtn"),
changeImage = document.querySelector('#change-image');
input = document.querySelector("#id-event-banner-image");
let file; //this is a global variable and we'll use it inside multiple functions
function showFile() {
let fileType = file.type; //getting selected file type
let validExtensions = ["image/jpeg", "image/jpg", "image/png"]; //adding some valid image extensions in array
if (validExtensions.includes(fileType)) { //if user selected file is an image file
let fileReader = new FileReader(); //creating new FileReader object
fileReader.onload = () => {
let fileURL = fileReader.result; //passing user file source in fileURL variable
let imgTag = `<img src="${fileURL}" alt="">`; //creating an img tag and passing user selected file source inside src attribute
dropArea.innerHTML = imgTag; //adding that created img tag inside dropArea container
};
fileReader.readAsDataURL(file);
} else {
alert("This is not an Image File!");
dropArea.classList.remove("border-solid");
dropArea.classList.add("border-dashed");
if (dragText)
dragText.textContent = "Drag & Drop to Upload File";
}
}
if (changeImage) {
changeImage.onclick = () => {
input.click();
};
}
if (button) {
button.onclick = () => {
input.click(); //if user click on the button then the input also clicked
};
}
input.addEventListener("change", function () {
//getting user select file and [0] this means if user select multiple files then we'll select only the first one
file = this.files[0];
dropArea.classList.add("border-solid");
dropArea.classList.remove("border-dashed");
showFile(); //calling function
});
//If user Drag File Over DropArea
dropArea.addEventListener("dragover", (event) => {
event.preventDefault(); //preventing from default behaviour
dropArea.classList.add("border-solid");
dropArea.classList.remove("border-dashed");
if (dragText)
dragText.textContent = "Release to Upload File";
});
//If user leave dragged File from DropArea
dropArea.addEventListener("dragleave", () => {
dropArea.classList.remove("border-solid");
dropArea.classList.add("border-dashed");
if (dragText)
dragText.textContent = "Drag & Drop to Upload File";
});
//If user drop File on DropArea
dropArea.addEventListener("drop", (event) => {
event.preventDefault(); //preventing from default behaviour
//getting user select file and [0] this means if user select multiple files then we'll select only the first one
file = event.dataTransfer.files[0];
showFile(); //calling function
});
.css