How to get multiple file selection into an array and then output to HTML

Question

I have a file upload application which once a file has been selected a status will appear saying the name of the file. What I am having an issue with is adjusting the case where there is more than one files being uploaded.

Originally, a count would be given - if you upload three files, '3' would appear. I am attempting to adjust this so that the three file names are displayed. I took the code getting the single file name to show fileName = e.target.value.split('\').pop(); and tried adding it to the condition is more than one:

if (this.files && this.files.length > 1) {
    //fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
    fileName = e.target.value.split('\\').pop();
    console.log('Here is it ' + fileName);
 }

What I get is a single file name outputted. I can't figure out how to get the file name list in an array to output.

Does anyone see what I need to adjust?

HTML

<input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
<label for="uploadedFileTest" id="uploadFileTest"><img class="total-center" src=""></label>
<p id="fileStatus"></p>
<p id="fileName"></p>

JS

var inputs = document.querySelectorAll('.inputfile');
Array.prototype.forEach.call(inputs, function (input) {
    var label = input.nextElementSibling,
        labelVal = label.innerHTML;


        if (this.files && this.files.length > 1) {
            //fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
            fileName = e.target.value.split('\\').pop();
            console.log('Here is it ' + fileName);
        } else {
            fileName = e.target.value.split('\\').pop();
            console.log("I am running");
        }
        if (fileName) {
            $('#fileName').html(fileName);
            $('#fileStatus').text('File attached!');
        } else {
            label.innerHTML = labelVal;
        }
    });
});

gaetanoM · Accepted Answer · 2019-07-31 17:16:36Z

3

this.files returns a FileList. In order to convert it to an array of file names you can simply:

Array.from(this.files).map(({name}) => name)

Array.from: creates a new, shallow-copied Array instance from an array-like or iterable object.

map(): creates a new array with the results of calling a provided function on every element in the calling array.

$('#uploadedFileTest').on('change', function(e) {
    if (this.files && this.files.length > 1) {
        fileName = Array.from(this.files).map(({name}) => name + '<br/>');
        $('#fileName').append(fileName);
        /*
          A different solution: 
        
        fileName = Array.from(this.files).map(({name}) => name);
        $('#fileName').append(fileName.join('<br/>'));
        
        */
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>
<label for="uploadedFileTest" id="uploadFileTest"><img class="total-center" src=""></label>
<p id="fileStatus"></p>
<p id="fileName"></p>

edited Jul 31, 2019 at 17:16

answered Jul 31, 2019 at 13:59

gaetanoM

42.1k6 gold badges45 silver badges63 bronze badges

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

2 Comments

Paul Over a year ago

Thank you. How would I get the array results to output as a list? I thought that the split and pop function did this? Here is what I just tried.

fileName = Array.from(this.files).map(({name}) => name); 				fileName = JSON.stringify(fileName); 				fileName = fileName.split('\\').pop();

gaetanoM Over a year ago

@Paul You can do it directly into the map callback. Snippet updated.

Phiter · Accepted Answer · 2019-07-31 13:56:03Z

You can loop through the file input files transforming the FileList to an Array using ES6 Array.from(), as follows:

let input = document.getElementById('uploadedFileTest');
input.addEventListener('change', function(e) {
  var filenames = document.getElementById('fileNames');
  if (e.target.files.length > 0){
    Array.from(e.target.files).forEach((file) => {
      filenames.innerHTML += '<br>' + file.name;
    })
  }
  
});

<input type="file" name="uploadedFile" class="inputfile" id="uploadedFileTest" data-multiple-caption="{count} files selected" multiple>

<label for="uploadedFileTest" id="uploadFileTest"><img class="total-center" src=""></label>
<p id="fileNames"></p>

One of the things your code was missing was an event listener. You were running this only once at page load.

Collectives™ on Stack Overflow

How to get multiple file selection into an array and then output to HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related