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 =

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 <; i++) {
      var output = [];

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

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


      var filesToUpload = [];

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

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


      $("#uploadBtn").click(function (e) {


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

Answers: 0