title: Javascript DataTransfer items not persisting through async calls
body: <p>I am using Vuejs along with DataTransfer to upload files asynchronously, and I want to allow multiple files to be dragged and dropped for upload at once.</p>
  
  <p>I can get the first upload to happen, but by the time that upload is done, Javascript has either garbage collected or changed the DataTransfer items object.  </p>
  
  <p>How can I rework this (or clone the event/DataTransfer object) so that the data is still available to me throughout the ajax calls?</p>
  
  <p>I've followed the MDN docs on how to use DataTransfer but I'm having a hard time applying it to my specific case.  I also have tried copying the event objects, as you can see in my code, but it obviously does not do a deep copy, just passes the reference, which doesn't help.</p>
  
  <pre><code>    methods: {
          dropHandler: function (event) {
              if (event.dataTransfer.items) {
                  let i = 0;
                  let self = this;
                  let ev = event;
  
                  function uploadHandler() {
                      let items = ev.dataTransfer.items;
                      let len = items.length;
  
                      // len NOW EQUALS 4
  
                      console.log("LEN: ", len);
                      if (items[i].kind === 'file') {
                          var file = items[i].getAsFile();
                          $('#id_file_name').val(file.name);
                          var file_form = $('#fileform2').get(0);
                          var form_data = new FormData(file_form); 
  
                          if (form_data) {
                              form_data.append('file', file);
                              form_data.append('type', self.type);
                          }
  
                          $('#file_progress_' + self.type).show();
                          var post_url = '/blah/blah/add/' + self.object_id + '/'; 
                          $.ajax({
                              url: post_url,
                              type: 'POST',
                              data: form_data,
                              contentType: false,
                              processData: false,
                              xhr: function () {
                                  var xhr = $.ajaxSettings.xhr();
                                  if (xhr.upload) {
                                      xhr.upload.addEventListener('progress', function (event) {
                                          var percent = 0;
                                          var position = event.loaded || event.position;
                                          var total = event.total;
                                          if (event.lengthComputable) {
                                              percent = Math.ceil(position / total * 100);
                                              $('#file_progress_' + self.type).val(percent);
                                          }
                                      }, true);
                                  }
                                  return xhr;
                              }
                          }).done((response) =&gt; {
                                  i++;
                                  if (i &lt; len) {
  
                                      // BY NOW, LEN = 0.  ????
  
                                      uploadHandler();
                                  } else {
                                      self.populate_file_lists();
                                  }
                              }
                          );
                      }
                  }
  
                  uploadHandler();
              }
          },
  </code></pre>