Get file name when css is applied to input[type=file]

Question

I'm trying to get the file through input. I hide the input through CSS and gave the label a style. There is a problem here.

If input is hidden, the default input button cannot support the supported get file name. I guess Vanila JS can solve this, but I don't know what to do. I tried to get the value value of the file and put it in the box specified as inner HTML, but it didn't work.

.submit{
   width:140px;
   height:40px;
   background-color:red;
   color:#fff;
   text-align:center;
   padding:10px;
   line-height:40px;
   cursor:pointer;
}

<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

Does this answer your question? How do I get the value of text input field using JavaScript? — Jesse Reza Khorasanee
– Jesse Reza Khorasanee, Commented May 6, 2021 at 6:04
Get the value value. I tried to put it through innerHTML but it didn't work. — eujin
– eujin, Commented May 6, 2021 at 6:14

TechySharnav · Accepted Answer · 2021-05-06 06:38:27Z

1

Following this Answer, you can get the file name, and use innerHTML to show it to user.

document.getElementById('test').addEventListener("change", function() {
  var fullPath = document.getElementById('test').value;
  if (fullPath) {
    var startIndex = (fullPath.indexOf('\\') >= 0 ? fullPath.lastIndexOf('\\') : fullPath.lastIndexOf('/'));
    var filename = fullPath.substring(startIndex);
    if (filename.indexOf('\\') === 0 || filename.indexOf('/') === 0) {
      filename = filename.substring(1);
    }
    document.getElementById("test2").innerHTML = filename;;
  }
});

.submit {
  width: 140px;
  height: 40px;
  background-color: red;
  color: #fff;
  text-align: center;
  padding: 10px;
  line-height: 40px;
  cursor: pointer;
}

<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

edited May 6, 2021 at 6:38

answered May 6, 2021 at 6:21

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

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

Comments

jozsefk · Accepted Answer · 2021-05-06 06:58:46Z

0

Your HTML

<input type="file" id="test" style="display:none;">
<label for="test">
    <span class="submit">submit</span>
    <span id="test2">filename</span>
</label>

Your CSS

.submit{
   width:140px;
   height:40px;
   background-color:red;
   color:#fff;
   text-align:center;
   padding:10px;
   line-height:40px;
   cursor:pointer;
 }

And Javascript

let file = document.querySelector('#test');
let test2 = document.querySelector('#test2');

file.addEventListener('change', function(e){
  test2.innerHTML = e.target.files[0].name;
});

Demo here https://jsfiddle.net/jozsefk/4gwzrj38/

answered May 6, 2021 at 6:58

jozsefk

592 bronze badges

Collectives™ on Stack Overflow

Get file name when css is applied to input[type=file]

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related