How do I remove a file from the FileList

Question

I m building a drag-and-drop-to-upload web application using HTML5  and I m dropping the files onto a div and of course fetching the dataTransfer object  which gives me the FileList   Now I want to remove some of the files  but I don t know how  or if it s even possible    Preferably I d like to just delete them from the FileList  I ve got no use for them  But if that s not possible  should I instead write in checks in code that interacts with the FileList  That seems cumbersome

User · Answer

I know this is an old question but it s ranking high on search engines in regards to this issue   properties in the FileList object cannot be deleted but at least on Firefox they can be changed  My workaround this issue was to add a property IsValid true to those files that passed check and IsValid false to those that didn t   then I just loop through the list to make sure that only the properties with IsValid true are added to FormData

User · Answer

Since we are in the HTML5 realm  this is my solution  The gist is that you push the files to an Array instead of leaving them in a FileList  then using XHR2  you push the files to a FormData object  Example below   Node prototype replaceWith   function node        this parentNode replaceChild node  this      if window File  amp  amp  window FileList        var topicForm   document getElementById  yourForm        topicForm fileZone   document getElementById  fileDropZoneElement        topicForm fileZone files   new Array        topicForm fileZone inputWindow   document createElement  input        topicForm fileZone inputWindow setAttribute  type    file        topicForm fileZone inputWindow setAttribute  multiple    multiple        topicForm onsubmit   function event                var request   new XMLHttpRequest            if request upload                        event preventDefault                topicForm ajax value    true               request upload onprogress   function event                                var progress   event loaded toString       bytes transfered                    if event lengthComputable                  progress   Math round event loaded   event total   100  toString                          topicForm fileZone innerHTML   progress toString                               request onload   function event                                response   JSON parse request responseText                      Handle the response here                             request open topicForm method  topicForm getAttribute  action    true               var data   new FormData topicForm               for var i   0  file  file   topicForm fileZone files i   i                    data append  file    i toString    file               request send data                        topicForm fileZone firstChild replaceWith document createTextNode  Drop files or click here          var handleFiles   function files                for var i   0  file  file   files i   i                topicForm fileZone files push file              topicForm fileZone ondrop   function event                event stopPropagation            event preventDefault            handleFiles event dataTransfer files              topicForm fileZone inputWindow onchange   function event                handleFiles topicForm fileZone inputWindow files              topicForm fileZone ondragover   function event                event stopPropagation            event preventDefault               topicForm fileZone onclick   function                 topicForm fileZone inputWindow focus            topicForm fileZone inputWindow click             else     topicForm fileZone firstChild replaceWith document createTextNode  It s time to update your browser

User · Answer

There might be a more elegant way to do this but here is my solution  With Jquery  fileEle value       var parEle     fileEle  parent    var newEle     fileEle  clone     fileEle  remove    parEle append newEle     Basically you cleat the value of the input  Clone it and put the clone in place of the old one

User · Answer

I just change the type of input to the text and back to the file  D

User · Answer

If you want to delete only several of the selected files  you can t  The File API Working Draft you linked to contains a note      The HTMLInputElement interface    HTML5  has a readonly FileList   attribute           emphasis mine    Reading a bit of the HTML 5 Working Draft  I came across the Common input element APIs  It appears you can delete the entire file list by setting the value property of the input object to an empty string  like   document getElementById  multifile   value         BTW  the article Using files from web applications might also be of interest

User · Answer

This question has already been marked answered  but I d like to share some information that might help others with using FileList   It would be convenient to treat a FileList as an array  but methods like sort  shift  pop  and slice don t work  As others have suggested  you can copy the FileList to an array  However  rather than using a loop  there s a simple one line solution to handle this conversion       fileDialog files is a FileList    var fileBuffer          append the file list to an array  Array prototype push apply  fileBuffer  fileDialog files        lt -- here      And now you may manipulated the result as required      shift an item off the array  var file   fileBuffer shift 0 1        lt -- works as expected  console info  file name          file size          file type         sort files by size  fileBuffer sort function a b        return a size  gt  b size   1   a size  lt  b size   -1   0         Tested OK in FF  Chrome  and IE10

User · Answer

In vue js    x000D   x000D  self  refs inputFile value      x000D   x000D   x000D

User · Answer

Thanks  Nicholas Anderson simple and straight   here is your code applied and working at my code using jquery   HTML     lt input class  rangelog btn border-aero  id  file fr  name  file fr    multiple type  file  placeholder    labels helpfiles placeholder file   gt   lt span style  cursor  pointer  cursor  hand   onclick  cleanInputs     file fr     gt  lt i class  fa fa-trash  gt  lt  i gt  Empty chosen files lt  span gt    JS CODE     function cleanInputs fileEle         fileEle  val          var parEle     fileEle  parent        var newEle     fileEle  clone         fileEle  remove          parEle  prepend newEle

User · Answer

I have found very quick  amp  short workaround for this  Tested in many popular browsers  Chrome  Firefox  Safari    First  you have to convert FileList to an Array  var newFileList   Array from event target files     to delete the particular element use this  newFileList splice index 1

User · Answer

Since JavaScript FileList is readonly and cannot be manipulated directly  BEST METHOD You will have to loop through the input files while comparing it with the index of the file you want to remove  At the same time  you will use new DataTransfer   to set a new list of files excluding the file you want to remove from the file list  With this approach  the value of the input files itself is changed  removeFileFromFileList index      const dt   new DataTransfer     const input   document getElementById  files     const   files     input   for  let i   0  i  lt  files length  i          const file   files i      if  index     i  dt items add file     here you exclude the file  thus removing it      input files   dt files        ALTERNATIVE METHOD Another simple method is to convert the FileList into an array and then splice it  But this approach will not change the input files const input   document getElementById  files      as an array  u have more freedom to transform the file list using array functions  const fileListArr   Array from input files  fileListArr splice index  1     here u remove the file console log fileListArr

User · Answer

I realize this is a pretty old question  however I am using an html multiple file selection upload to queue any number of files which can be selectively removed in a custom UI before submitting  Save files in a variable like this  let uploadedFiles          inside DOM file select  quot onChange quot  event let selected   e target files 0    e target files       uploadedFiles       uploadedFiles      selected    createElements     Create UI with  quot remove a file quot   function createElements      uploadedFiles forEach  f i    gt           remove DOM elements and re-create them here          you can show an image like this         let reader   new FileReader           reader onload   function  e             let url   e target result              create  lt img src url   gt                   reader readAsDataURL f               element addEventListener  quot click quot   function            uploadedFiles splice i  1         createElements                    Submit to server  let fd   new FormData    uploadedFiles forEach  f  i    gt      fd append  quot files   quot   f       fetch  quot yourEndpoint quot        method   quot POST quot      body  fd     headers           do not set Content-Type          then

User · Answer

If you have the luck to be sending a post request to the database with the files and you have the files you want to send in your DOM  you can simply check if the file in the file list is present in your DOM  and of course if it s not you just don t send that element to de DB

User · Answer

You may wish to create an array and use that instead of the read-only filelist   var myReadWriteList   new Array       user selects files later       then as soon as convenient     myReadWriteList   FileListReadOnly    After that point do your uploading against your list instead of the built in list  I am not sure of the context you are working in but I am working with a jquery plugin I found and what I had to do was take the plugin s source and put it in the page using  lt script gt  tags  Then above the source I added my array so that it can act as a global variable and the plugin could reference it   Then it was just a matter of swapping out the references   I think this would allow you to also add drag  amp  drop as again  if the built in list is read-only then how else could you get the dropped files into the list

User · Answer

If you are targeting evergreen browsers  Chrome  Firefox  Edge  but also works in Safari 9   or you can afford a polyfill  you can turn the FileList into an array by using Array from   like this   let fileArray   Array from fileList     Then it s easy to handle the array of Files like any other array

User · Answer

This is extemporary  but I had the same problem which I solved this way  In my case I was uploading the files via XMLHttp request  so I was able to post the FileList cloned data through formdata appending  Functionality is that you can drag and drop or select multiple files as many times as you want  selecting files again won t reset the cloned FileList   remove any file you want from the  cloned  file list  and submit via xmlhttprequest whatever was left there  This is what I did  It is my first post here so code is a little messy  Sorry  Ah  and I had to use jQuery instead of   as it was in Joomla script      some global variables var clon           will be my FileList clone var removedkeys   0     removed keys counter for later processing the request var NextId   0     counter to add entries to the clone and not replace existing ones  jQuery document  ready function        jQuery   form input   change function              making the clone     var curFiles   this files         temporary object clone before copying info to the clone     var temparr   jQuery extend true      curFiles          delete unnecessary FileList keys that were cloned     delete temparr  length        delete temparr  item         if  Object keys clon  length     0          jQuery extend true  clon  temparr        else         var keysArr   Object keys clon          NextId   Math max apply null  keysArr  1     FileList keys are numbers        if  NextId  lt  curFiles length      a bug I found and had to solve for not replacing my temparr keys              NextId   curFiles length                  for  var key in temparr       I have to rename new entries for not overwriting existing keys in clon           if  temparr hasOwnProperty key                  temparr NextId    temparr key                delete temparr key                      meter aca los cambios de id en los html tags con el nuevo NextId                 NextId                                 jQuery extend true  clon  temparr      copy new entries to clon           modifying the html file list display  if  NextId     0       jQuery   filelist   html          for var i 0  i lt curFiles length  i              var f   curFiles i           jQuery   filelist   append   lt p id   file  i     style   margin-bottom  3px important    gt     f name     lt a style   float right cursor pointer    onclick   BorrarFile   i      gt x lt  a gt  lt  p gt        the function BorrarFile will handle file deletion from the clone by file id        else      for var i 0  i lt curFiles length  i              var f   curFiles i           jQuery   filelist   append   lt p id   file   i NextId-curFiles length      style   margin-bottom  3px important    gt     f name     lt a style   float right cursor pointer    onclick   BorrarFile    i NextId-curFiles length       gt x lt  a gt  lt  p gt        yeap  i NextId-curFiles length actually gets it right                    update the total files count wherever you want jQuery   form p   text Object keys clon  length     file s  selected                 function BorrarFile id      handling file deletion from clone     jQuery   file  id  remove       remove the html filelist element     delete clon id      delete the entry     removedkeys       add to removed keys counter     if  Object keys clon  length     0           jQuery   form p   text Object keys clon  length     file s  selected            jQuery   fileToUpload   val         I had to reset the form file input for my form check function before submission  Else it would send even though my clone was empty      else          jQuery   form p   text Object keys clon  length     file s  selected               now my form check function  function check        if  document getElementById  fileToUpload   files length    0            alert  No file selected            return false       else          var  validFileExtensions      pdf     PDF       I wanted pdf files            retrieve input files         var arrInputs   clon             validating files        for  var i   0  i  lt  Object keys arrInputs  length removedkeys  i               if  typeof arrInputs i    undefined               var oInput   arrInputs i              if  oInput type     application pdf                    var sFileName   oInput name                 if  sFileName length  gt  0                       var blnValid   false                     for  var j   0  j  lt   validFileExtensions length  j                           var sCurExtension    validFileExtensions j                        if  sFileName substr sFileName length - sCurExtension length  sCurExtension length  toLowerCase      sCurExtension toLowerCase                             blnValid   true                         break                                                                if   blnValid                        alert  Sorry      sFileName     is invalid  allowed extensions are       validFileExtensions join                             return false                                                  else             alert  Sorry      arrInputs 0  name     is invalid  allowed extensions are       validFileExtensions join   or                 return false                                           proceed with the data appending and submission        here some hidden input values i had previously set  Now retrieving them for submission  My form wasn t actually even a form        var fecha   jQuery   fecha   val        var vendor   jQuery   vendor   val        var sku   jQuery   sku   val           create the formdata object     var formData   new FormData        formData append  fecha   fecha       formData append  vendor   encodeURI vendor        formData append  sku   sku          now appending the clone file data  finally       var fila   clon     i just did this because I had already written the following using the  fila  object  so I copy my clone again        the interesting part  As entries in my clone object aren t consecutive numbers I cannot iterate normally  so I came up with the following idea     for  i   0  i  lt  Object keys fila  length removedkeys  i               if typeof fila i    undefined                formData append  fileToUpload     fila i       VERY IMPORTANT the formdata key for the files HAS to be an array  It will be later retrieved as   FILES  fileToUpload    temp name   i                      jQuery   submitbtn   fadeOut  slow       remove the upload btn so it can t be used again     jQuery   drag   html         clearing the output message element        start the request     var xhttp   new XMLHttpRequest        xhttp addEventListener  progress   function e                var done   e position    e loaded  total   e totalSize    e total             false           if   xhttp upload                 xhttp upload onprogress   function e                    var done   e position    e loaded  total   e totalSize    e total                  var percent   done   total                  jQuery   drag   html Math round percent   100                                         xhttp onreadystatechange   function             if  this readyState    4  amp  amp  this status    200             var respuesta   this responseText           jQuery   drag   html respuesta                            xhttp open  POST    your upload handler php   true           xhttp send formData       return true             Now the html and styles for this  I m quite a newbie but all this actually worked for me and took me a while to figure it out    lt div id  form  class  formpos  gt   lt  --    Select the pdf to upload -- gt     lt input type  file  name  fileToUpload    id  fileToUpload  accept  application pdf  multiple gt     lt div gt  lt p id  drag  gt Drop your files here or click to select them lt  p gt     lt  div gt     lt button id  submitbtn  onclick  return check     gt Upload lt  button gt     these inputs are passed with different names on the formdata  Be aware of that    I was echoing this  so that s why I use the single quote for php variables    lt input type  hidden  id  fecha  name  fecha copy  value     fecha      gt     lt input type  hidden  id  vendor  name  vendorname  value     vendor      gt     lt input type  hidden  id  sku  name  sku  value     sku       gt   lt  div gt   lt h1 style  width  500px important margin 20px auto 0px important font-size 24px important   gt File list  lt  h1 gt   lt div id  filelist  style  width  500px important margin 10px auto 0px important   gt Nothing selected yet lt  div gt    The styles for that  I had to mark some of them  important to override Joomla behavior    formpos    width  500px    height  200px    border  4px dashed  999    margin  30px auto 100px      formpos  p    text-align  center important    padding  80px 30px 0px    color   000     formpos  div    width  100  important    height  100  important    text-align  center important    margin-bottom  30px important     formpos input    position  absolute important    margin  0 important    padding  0 important    width  500px important    height  200px important    outline  none important    opacity  0 important     formpos button    margin  0    color   fff    background   16a085    border  none    width  508px    height  35px    margin-left  -4px    border-radius  4px    transition  all  2s ease    outline  none     formpos button hover    background   149174    color   0C5645     formpos button active    border 0      I hope this helps

[javascript] How do I remove a file from the FileList

Examples related to javascript

Examples related to html

Examples related to drag-and-drop

Examples related to filelist