title: How to remove certain file from multiple input type="file"?
body: <p>I've got an issue with my uploads,
  I'm using <a href="https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL" rel="nofollow noreferrer">FileReader</a> with <code>readAsDataURL()</code> method, when user select its images then he can preview files.
  Also I have a button which has classname <code>&quot;del-first&quot;</code>, when user click on it first image should be deleted from preview and also from input value. That's my problem.</p>
  <p><strong>So I have an input:</strong></p>
  <pre><code>&lt;form method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
      &lt;input type=&quot;file&quot; id=&quot;myFiles&quot; name=&quot;myFiles[]&quot; accept=&quot;image/png, image/jpeg&quot; multiple /&gt;
      &lt;div class=&quot;preview-wrapper&quot;&gt;
          &lt;button class=&quot;del-first&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;input type=&quot;submit&quot; value=&quot;SUBMIT&quot; /&gt;
  &lt;/form&gt;
  </code></pre>
  <p><strong>My Javscript:</strong></p>
  <pre><code>const fileInput = document.getElementById(&quot;myFiles&quot;);
  
  function previewFiles() {
  
    var preview = document.querySelector('.preview-wrapper');
    var files   = fileInput.files;
  
    function readAndPreview(file) {
  
      // Make sure `file.name` matches our extensions criteria
      if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
        var reader = new FileReader();
  
        reader.addEventListener(&quot;load&quot;, function() {
          var conta = document.createElement('div');
          conta.className = &quot;preview-image&quot;;
  
          var image = new Image();
          image.height = 100;
          image.title = file.name;
          image.src = this.result;
  
          conta.appendChild( image );
          preview.appendChild( conta );
        }, false);
  
        reader.readAsDataURL(file);
      }
  
    }
  
    if (files) {
      [].forEach.call(files, readAndPreview);
    }
  
    var newFileList = Array.from(event.target.files);
    console.log(newFileList);
  
    var imgRemove = document.querySelector('.del-first');
  
    imgRemove.addEventListener(&quot;click&quot;, function(e) {
      e.preventDefault();
      newFileList.splice(0,1);
      console.log(newFileList);
    })
  
  }
  
  fileInput.addEventListener(&quot;change&quot;, previewFiles);
  </code></pre>
  <p>As you can see in the end of the script I used array.from for my files:</p>
  <pre><code>var newFileList = Array.from(event.target.files);
  </code></pre>
  <p>then I added listener, when user click button first object should be deleted:</p>
  <pre><code>var imgRemove = document.querySelector('.del-first');
          
  imgRemove.addEventListener(&quot;click&quot;, function(e) {
     e.preventDefault();
     newFileList.splice(0,1);
     console.log(newFileList);
  })
  </code></pre>
  <p>So in my console.log I'm getting that it has been deleted, but now I need somehow push my <code>newFileList</code> to my input, so when user click <code>submit</code> I get on my server valid files. But I don't know how to make it?</p>