Django.fun

How can I do a multi file upload in Django, allowing user to remove file upload before form submission?

I am trying to do a fairly common user requirement, allowing the user to upload multiple files in Django, and giving them the option to remove files that they may have accidentally uploaded.

As far as I can tell, even if the user remove the uploaded files from the DOM prior to the user submitting the form via Javascript code as shown here...Multiple file upload - with 'remove file' link, the uploaded files remain in the request.FILES.getlist(''). I have spent most of today researching this. I have in fact determined that when the uploaded files are deleted via Javascript from the DOM they are in fact still present in the request.FILES.getlist('').

I verified this by printing out the contents of the getlist file in my CreateView as shown below...

 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)  

My question is how can I get the contents of the DOM and compare it to what's in request.FILES.getlist? I surmise that's how I'll be able to tell Django what's real and what's not. Thanks in advance for any thoughts.

Here's the Javascript code that I'm using...

  $(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();
      });

    });

I documented it via a link above but here it is again for ease of reading.

Answers: 0