Как сделать многофайловую загрузку в Django, позволяющую пользователю удалить загруженный файл до отправки формы?

Я пытаюсь выполнить довольно распространенное требование пользователя - позволить пользователю загружать несколько файлов в Django, и дать ему возможность удалить файлы, которые он мог случайно загрузить.

Насколько я могу судить, даже если пользователь удаляет загруженные файлы из DOM до отправки формы с помощью кода Javascript, как показано здесь... Загрузка нескольких файлов - со ссылкой 'remove file', загруженные файлы остаются в request.FILES.getlist(''). Я потратил большую часть сегодняшнего дня на исследование этого вопроса. Я определил, что когда загруженные файлы удаляются с помощью Javascript из DOM, они все еще присутствуют в request.FILES.getlist('').

Я проверил это, распечатав содержимое файла getlist в моем CreateView, как показано ниже...

 list=[] #myfile is the key of a multi value dictionary, values are the uploaded files
 for f in request.FILES.getlist('files1'): #myfile is the name of your html file button
      filename = f.name
      print(filename)  

Мой вопрос в том, как я могу получить содержимое DOM и сравнить его с тем, что находится в request.FILES.getlist? Я предполагаю, что так я смогу сказать Django, что реально, а что нет. Заранее спасибо за любые мысли.

Вот код Javascript, который я использую...

  $(document).ready(function (){

  $.fn.fileUploader = function (filesToUpload) {
      this.closest(".files").change(function (evt) {

      for (var i = 0; i < evt.target.files.length; i++) {
          filesToUpload.push(evt.target.files[i]);
      };
      var output = [];

      for (var i = 0, f; f = evt.target.files[i]; i++) {
        var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";

                output.push("<li><strong>", escape(f.name), "</strong> - ",
                    f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
            }

            $(this).children(".fileList")
                .append(output.join(""));
            });
      };

      var filesToUpload = [];

      $(document).on("click",".removeFile", function(e){
          e.preventDefault();
          console.log("Htell");
          var fileName = $(this).parent().children("strong").text();

          for(i = 0; i < filesToUpload.length; ++ i){
              if(filesToUpload[i].name == fileName){
                  filesToUpload.splice(i, 1);
              }
        }
          $(this).parent().remove();
      });

      $("#files1").fileUploader(filesToUpload);
      $("#files2").fileUploader(filesToUpload);

      $("#uploadBtn").click(function (e) {
          e.preventDefault();
      });

    });

Я задокументировал это по ссылке выше, но вот еще раз для удобства чтения.

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