Display the Name of the File in File Upload Button

Question

Here is my Fiddle

This is my Css:

label input[type="file"] 
{
display: block;
margin-top: -20px;
opacity: 0;
}

Here i have only the text instead of File Upload Button (As i given opacity:0)

How can i display the File Name that is chosen

Note : I just want to display the File Name near the upload text

not sure if you can, I think the browser blocks acces to the file totally due to security. I may and frequently am wrong though — Billy, Nov 19 '14 at 12:28
possible duplicate of [Change default text in input type="file"?](http://stackoverflow.com/questions/5138719/change-default-text-in-input-type-file) — artm, Nov 19 '14 at 12:29

score 0 · Answer 1 · answered Nov 19 '14 at 12:50

File API depends on particular browser.

if (window.File && window.FileReader && window.FileList && window.Blob) {
  //  File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

Here is an working example - http://jsfiddle.net/g23ytpby/.

score 0 · Accepted Answer · answered Nov 19 '14 at 12:52

0

One way to do it is just to set the value of tag to the current value of the file input by adding this to your onchange event:

document.getElementById('spanFileName').innerHTML = this.value

As you can see in the full example:

Upload File: 
<input type="file" onchange=" document.getElementById('spanFileName').innerHTML = this.value; imagechangesupplier(this,57);" style="display:block;margin-top: -20px;opacity: 0;" >
<br />
<br />
File Selected: <span id='spanFileName'></span>

One thing you need to take note of is that using this method always produces the name of the file and adds 'c:/fakepath/' as a prefix. You can just replace the text to give you the file name.

answered Nov 19 '14 at 12:52

TheNov

26
2

I am already using onchange even for some other action, Is there any possiblity to have it too ?? – ABD Nov 19 '14 at 13:03
If you check the example, you'll see your code is included. onchange=" document.getElementById('spanFileName').innerHTML = this.value; imagechangesupplier(this,57); " – TheNov Nov 19 '14 at 13:51
Alternatively, you can just add: document.getElementById('spanFileName').innerHTML = this.value; in the imagechangesupplier function. – TheNov Nov 19 '14 at 13:52

score 0 · Answer 3 · answered Nov 19 '14 at 13:09

0

Here is JSFiddle Link, Check this out !!

It displays File Name that is chosen near the upload text.

answered Nov 19 '14 at 13:09

Varun Chakervarti

1,012
8
24

score 0 · Answer 4 · answered Nov 19 '14 at 13:35

With the help of files property in FileListObject you can display the name of the file, size of file which are ready to upload.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>FileName</title>
    <style>
        input {
            opacity: 0;
        }
    </style>
</head>

<body>
    <input type="file" multiple="multiple" id="file" onchange="showFileName()">
    <p id="filename"></p>
    <script>
        var x = document.getElementById('file');
        var filename = document.getElementById('filename');

        function showFileName() {
                for (var i = 0; i < x.files.length; i++) {
                    var file = x.files[i];
                    filename.innerHTML = file.name;
                }
    </script>
</body>

</html>

Display the Name of the File in File Upload Button

4 Answers4