Input type file - wrap long file name text

Question

Is it possible to wrap the file name text that appears beside the browse button?

I have a simple upload button

<input type="file" />

I'm uploading a file with a very long name, you can see that a horizontal scrollbar has appeared to enable reading the full text:

I've tried tinkering with the css but it adds an ellipsis and i can't figure out a way to show the full file name without horizontal scrollbars.

input[type="file"] {
    border: 1px solid red;
    white-space: normal;
    word-wrap: break-word;
    width: 200px;
    overflow: auto;
}

thanks

Answer 1

This is only possible with JavaScript. A solution might look like this:

function update(e) {
  fileName.textContent = file.files[0].name;
}

const file = document.querySelector('#file'),
      fileName = document.querySelector('.file-name');

file.addEventListener('change', update);

.file-button {
  background: #eee;
  border: 1px solid #aaa;
  border-radius: 3px;
  display: inline-block;
  padding: 2px 8px;
}

.file-name {
  width: 200px;
  border: 1px solid #aaa;
  overflow-wrap: break-word;
  padding: 2px;
}

input[type='file'] {
  display: none;
}

<label class="file-label" for="file">Profile picture:
  <div class="file-button">Browse&hellip;</div>
</label>
<p class="file-name">No file selected.</p>
<input id="file" type="file">