5

What I am trying to do is to add a button for uploding a file, which i can style and which shows me the name of the chosen file.

I have searched a lot, and the more I search the more different sollutions I find. I found out, that you can't style the input directly, because you just cant... :(.

Finally I picked a little from every solution and came to the following:

I set up a span in a lable for the input[type file] and hid the input by display:none;.

Now I can style the span to my needs, and on click it calls the input. With the little JS at the end, take the value of the input (what is the name of the picked file) and show it insted of the span-text on the styled button.

but see yourself:

#input-file {
    display: none;
    }

.upload-btn {

    display: block;
    text-align: center;
    margin: 20px auto 20px;
    width: 50%;
    height: 30px;
    background-color: #fcff7f;
    line-height: 30px;

    }

.upload-btn:hover {
    background-color: #c39d5a;
    color: white;
    cursor: pointer;
    }
<label class="upload-btn">
  <input type="file" id="input-file" onchange="changeText()" />
  <span id="selectedFileName">Browse</span>
</label>


<script type="text/javascript">
  function changeText() {
    var y = document.getElementById("input-file").value;
    document.getElementById("selectedFileName").innerHTML = y;
  }
</script>

What I would like to know is, what is wrong with this? For my understanding it is very simple, so simple that i dont understand "yet" why all the solutions I found on the internet, are way more difficult. They allways try to use fake inputs, with opacity and so on.

So please can someone very experienced, tell me if I can use it like this, or do I have to change it? To what?

Thanks ;) and a lot of excuses for the bad english.

henk
  • 2,677
  • 2
  • 18
  • 49

1 Answers1

3

This functionality is not available in the browsers due to security reasons.

Checkout this explanation: https://stackoverflow.com/a/15201258/586051

Only Firefox browser allows it. Refer the following example in Firefox.

EDIT: You can get the file name of the selected file this way:

EDIT2: The following code snippet demonstrates the styling of file upload button. Here we are actually faking it but the end user wouldnt know about it. ;)

EDIT3: Added value of fullPath in the comment.

EDIT4: Added <div> wrapper in HTML

document.getElementById("customButton").addEventListener("click", function(){
  document.getElementById("fileUpload").click();  // trigger the click of actual file upload button
});

document.getElementById("fileUpload").addEventListener("change", function(){
  var fullPath = this.value; // fetched value = C:\fakepath\fileName.extension
  var fileName = fullPath.split(/(\\|\/)/g).pop();  // fetch the file name
  document.getElementById("fileName").innerHTML = fileName;  // display the file name
}, false);
#fileUpload{
  display: none; /* do not display the actual file upload button */
}

#customButton{  /* style the fake upload button */
  background: yellow;
  border: 1px solid red;
}
<div>
  <input type="file" id="fileUpload"> <!-- actual file upload button -->
  <button id="customButton">My Custom Button</button>  <!-- fake file upload button which can be used for styling ;) -->
  <span id="fileName"></span>
</div>
Community
  • 1
  • 1
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
  • Which functionality is not availible? The getting the Path, or getting the File name? Or labeling the span? Or create a lable for input? Your link to the "explanation" is telling only that you cant get the full path, but i dont want to get the full path... only the files name! I do not handle Jquery yet, so plz dont use it it this topic. i do not understand how your answer used to be usefull, so why should i accept it? – henk Dec 02 '14 at 19:38
  • @rave Sorry, you didnt state earlier that you need the file name. Please edit the question. I have updated the answer above. – Rahul Desai Dec 03 '14 at 04:13
  • thank you for you anser and effort, but i can not get rid of the assumption that you have not really read my post! which says: "What im trying to do is to add a button for uploding a file, which i can style and which shows me the name of the chosen file." and "So please can someone very experienced tell me if i can use it like this, or do i have to change it? to what?" So the question is, if I can use my code for my purpose. Or if i have to change it to make it perfect also i want to know what it makes poor, and how your suggestion can improve it. – henk Dec 03 '14 at 21:31
  • @rave My apologies. My multitasking didnt go very well it seems. I have updated the code that would style the input file element. Hope it helps :) – Rahul Desai Dec 04 '14 at 04:10
  • Thanks, would you please tell me one more Question: what do you think about my code? As i can see, the result is the same, but your method is different in two ways. First you fetch the files name only, while i get the "fakepath" Here i admit your method is way more professional. The second difference is, that you are using eventlistener, while i use the "onchange" directly on the input html. What is here the difference, why is your method better in that case? And what about the – henk Dec 04 '14 at 11:28
  • @rave Please checkout `EDIT3` in my answer above. (1) In your code, you fetched the value but not the actual file name. I also get the same path as you got (something like: `C:\fakepath\fileName.extension`). In my code, I am fetching the file name from the path and showing it next to the button. (2) See [this answer](http://stackoverflow.com/a/6348597/586051) for the details on `onclick` vs. `addEventListener`. None of them is the best. – Rahul Desai Dec 04 '14 at 12:06
  • @rave (3) ` – Rahul Desai Dec 04 '14 at 12:12