Set Filelist Of Fileinput In Firefox

Both examples work in Chrome and Opera, but fail in Firefox 56.0. I want to set the files FileList of a form's file input.[Codepen] HTML

It seems it has now landed in Edge too.

The main use case for this feature is to allow DataTransfer.files from e.g a drag&drop event or a paste one to be added to an <input> field. As such, only a FileList is allowed (and null to clear the input).

So in the case exposed in the body of your question, I don't really see the point of using this feature between two <input> fields.

If you want to keep in memory selected FileList, you can always convert it as an Array of files.

If you want to be able to move your filled input in a <form> later on, you can do it directly with the inputElement and DOM methods.

And if you need to workaround the limitations this new feature leverages, you can always fill an FormData with the DataTransfer's files and send this FormData through xhr instead of using the default HTML form method.

---

And Since I first missed the real use-case, in the codepen, here is an possible implementation to workaround the drag&drop issue you are facing, even on older browsers that didn't support this new feature.

This uses an hidden input in the dropZone, which will catch the dropped files directly.

// called when the input hidden in the dropZone changesfunctionhandleDroppedChange(evt) {
  this.removeEventListener('drop', handleDroppedChange); // only once// create a new hidden inputvar clone = this.cloneNode();
  clone.addEventListener('change', handleDroppedChange);
  clone.addEventListener('change', handleBasicChange);
  this.parentNode.insertBefore(clone, this);
  // replace the visible one with the current hidden onevar form = document.querySelector('form');
  var previous = form.querySelector('input[type=file]');
  form.insertBefore(this, previous);
  form.removeChild(previous);
  this.id = previous.id; // for the <label>
}
// add first listenersvar hiddenTarget = dropzone.querySelector('input[type="file"]');
hiddenTarget.addEventListener('change', handleDroppedChange);
hiddenTarget.addEventListener('change', handleBasicChange);
file_input.addEventListener('change', handleBasicChange);
// handle drop over enter leave as usual on the parent
dropzone.ondragover = dropzone.ondragenter = function(evt) {
  evt.preventDefault();
  dropzone.className = "drag";
};

dropzone.ondragleave = function(evt) {
  evt.preventDefault();
  dropzone.className = "";
};

dropzone.ondrop = function(evt) {
  dropzone.className = "";
  console.log("drop");
};

// will trigger for any kind of changes (dropped or manual)functionhandleBasicChange(evt) {
  var file_names = Array.prototype.map.call(this.files, function(f){return f.name;});
  label.innerHTML = "Changed " + file_names.join('<br>');
  // start upload process
};

#dropzone {
  display: inline-block;
  padding: 25px;
  border: 8px dashed #b11;
  position: relative;
}

#dropzone.drag {
  border-color: #f74;
}
#dropzone>input{
  opacity: 0;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;

/* below rules avoid clicks on hidden input */pointer-events: none; 
  }
#dropzone.drag>input{
  pointer-events: all;
  }

<form><inputtype="file"id="file_input"multiple></form><br><br><divid="dropzone"><labelid="label"for="file_input">Drop here.</label><!-- we use an hidden file input to catch the dropped files --><inputtype="file"multiple></div>