File selection example

by doctor23

HTML

<div class="mb-1">
  <button type="button" id="button">Обзор...</button>
</div>

<input type="file" id="loader" multiple>

<div>
  Файлы:
  <div id="list">
  
  </div>
</div>

CSS

#loader {
  display: none;
}

#list > div {
  height: 30px;
  line-height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: #eee;
  padding-right: 5px;
  padding-left: 5px;
}

.mb-1 {
  margin-bottom: 10px;
}

JavaScript

let files = [],
		button = document.getElementById("button"),
		loader = document.getElementById("loader");

button.addEventListener('click', event => {
	loader.click()
})

loader.addEventListener('change', event => {
	for (let i = 0; i < loader.files.length; i++) {
  	let file = loader.files[i]
  	let item = document.createElement('div')

    files.push(file)
    list.appendChild(item)

    item.textContent = file.name
    item.addEventListener('click', event => {
    	files = files.filter(f => f.name !== file.name)

      item.remove()
    })
  }
  
  loader.value = ''
});