Javascript, Uploading multiple files

Question

$(document).ready(function () {
  $(document).on('click', "button", function (e) {
      $(this).closest('tr').remove();
  });
});
var filelist = new Array();

updateList = function () {
  var input = document.getElementById('fileUploader');
  var output = document.getElementById('divFiles');

  var HTML = "<table>";
  for (var i = 0; i < input.files.length; ++i) {
      filelist[i] = input.files.item(i).name;
      HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
  }

  HTML += "</table>";
  output.innerHTML = HTML;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group col-md-2 col-sm-2">
	<label class="label1">
		<img src="~/Images/upload.png" height="50px" width="50px" /> Upload Your File
		<input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" />
	</label>
</div>
<br />

In the code I am uploading multiple files. When I am trying to upload some more files the existing file list replaced with new list. Even after placing my array outside the function.

Please share your html & also show who is calling updateList function — brk
– brk, Commented Apr 23, 2018 at 7:28
You replace the array elements by adding them with your index key that starts from zero: filelist[i] = input.files.item(i).name; instead of using something like push. It means that if your first selection has more files than your newest, the last files from the first selection are still in the array, am i right? — Kaddath
– Kaddath, Commented Apr 23, 2018 at 7:29
<div class="form-group col-md-2 col-sm-2"> <label class="label1"> <img src="~/Images/upload.png" height="50px" width="50px" /> Upload Your File <input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" /> </label> <br /> — Kavitha Prabhu
– Kavitha Prabhu, Commented Apr 23, 2018 at 7:30

Thum Choon Tat · Accepted Answer · 2018-04-23 08:32:32Z

2

If you want to preserve the previously added file names, you should push the file names into filelist.

var filelist = new Array();

updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');

    var HTML = "<table>";
    for (var i = 0; i < input.files.length; ++i) {
        //filelist[i] = input.files.item(i).name;
        filelist.push(input.files.item(i).name);
        HTML += "<tr><td>" 
              + filelist[i] 
              + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
    }
    HTML += "</table>";
    output.innerHTML = HTML;
    console.log(filelist);
}

<input id="fileUploader" type="file" multiple="multiple" onchange="updateList()">
<div id="divFiles"></div>

edited Apr 23, 2018 at 8:32

answered Apr 23, 2018 at 7:36

Thum Choon Tat

3,0901 gold badge24 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Kavitha Prabhu Over a year ago

its not working as we expect when i am trying to upload a new set o file it showing old list file names it self.

Thum Choon Tat Over a year ago

So your expected output is to append new file names to filelist and show new file names list in output?

Kavitha Prabhu Over a year ago

yes the new file names need to get stored in the filelist and list in output

Kavitha Prabhu Over a year ago

displaying in console but not html output. also when i upload 2 files first time then i am trying to one more file means. from the existing list one file got removed.

Revathi Vijay · Accepted Answer · 2018-04-23 09:06:57Z

Please try this,

 <script>
    $(document).ready(function () {
        $(document).on('click', "button", function (e) {
            $(this).closest('tr').remove();
        });
    });
   </script>
   <script>
       var filelist = new Array();

       updateList = function () {
           var input = document.getElementById('fileUploader');
           var output = document.getElementById('divFiles');

           var HTML = "<table>";
           for (var i = 0; i < input.files.length; ++i) {
               filelist[i]=input.files.item(i).name;
               HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
           }
           HTML += "</table>";
           output.innerHTML += HTML;
       }
   </script>

Saeed · Accepted Answer · 2018-04-23 07:37:24Z

1

Use an array to save all files, Each time user select new files, push them into array.

var fileList = [];

in updateList function fill array

fileList.push(...);

answered Apr 23, 2018 at 7:37

Saeed

5,4983 gold badges30 silver badges43 bronze badges

Comments

keattisak badngulueam · Accepted Answer · 2021-03-03 06:36:50Z

var filelist = new Array();

updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');

    var HTML = "<table>";
    for (var i = 0; i < input.files.length; ++i) {
        //filelist[i] = input.files.item(i).name;
        filelist.push(input.files.item(i).name);
        HTML += "<tr><td>" 
              + filelist[i] 
              + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
    }
    HTML += "</table>";
    output.innerHTML = HTML;
    console.log(filelist);
}

<input id="fileUploader" type="file" multiple="multiple" onchange="updateList()">
<div id="divFiles"></div>

Collectives™ on Stack Overflow

Javascript, Uploading multiple files

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related