Функция перетаскивания не работает в 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

Вернуться на верх