Allow users to select multiple files and display their names.

by Imri Paloja

HTML

<div class="file-wrapper">
  <input type="file" id="files" multiple hidden />
  <label for="files" class="file-btn">Choose files</label>
  <span id="file-names"></span>
</div>

CSS

.file-btn {
  display: inline-block;
  padding: 10px 16px;
  background: #4f46e5;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}

.file-btn:hover {
  background: #4338ca;
}

.file-btn:active {
  transform: scale(0.98);
}

.file-wrapper {
  position: relative;
  width: fit-content;
}

.file-wrapper input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

JavaScript

const input = document.getElementById("files");
const names = document.getElementById("file-names");

input.addEventListener("change", () => {
  names.textContent = [...input.files].map(f => f.name).join(", ");
});