HTML how to remove text in FileUpload field?

Question

When I have a file upload field,

<form action="" method="post" enctype="multipart/form-data">
    <input id="image" type="file" name="image">
</form>

http://jsfiddle.net/jakeaustin5574/6DzgU/

It automatically creates a text "No file chosen" and a "Browse" button.

I want to change or remove this "No file chosen" text.

Is there anyway to achieve this in css or Javascript?

Thanks

Depends on the browser. Your option here is to detect the browser and set the width on the form and then give it `overflow:hidden;` — Ohgodwhy, Aug 23 '13 at 08:25
No you can't change that, you have to create you own I'm afraid. — putvande, Aug 23 '13 at 08:25

Harsh · Answer 1 · 2015-01-27T10:45:37.073

32

You can apply css rules like...

    input[type=file]{ 
        color:transparent;
    }

edited Jan 27 '15 at 10:45

answered Aug 16 '14 at 09:40

Harsh

2,893
29
16

David · Answer 2 · 2015-01-19T11:44:31.653

First of all. You have to hide your input:

input#image{position:fixed;top:-100px;}

Secondly, you have to create alternative button with your skin:

<form action="" method="post" enctype="multipart/form-data">
   <input id="image" type="file" name="image">
   <button id="image_alt">Select image</button>
</form>

and the last step is to create a javascript script which link alternative button with original one:

document.getElementById('image_alt').addEventListener('click',function(){
    document.getElementById('image').click();
});

Example Fiddle

score 1 · Answer 3 · answered Aug 23 '13 at 08:26

1

You can set the value of the image input to "" using jQuery to remove the selected file:

$("#image").val("")

See this fiddle:

http://jsfiddle.net/nfvR9/1/

NOTE: This is dependent on browser used. It's works in FF 22 and Chrome 29.

answered Aug 23 '13 at 08:26

Castrohenge

8,525
5
39
66

As Rory McCrossan mentions I think it's browser dependant. Works in FF 22 and Chrome 28. – Castrohenge Aug 23 '13 at 08:28

score 1 · Answer 4 · answered Aug 23 '13 at 08:31

1

I am sure you cannot change the default labels on buttons, they are hard-coded in browsers (each browser rendering the buttons captions its own way). check this styling article

answered Aug 23 '13 at 08:31

Deep Sharma

3,374
3
29
49

score 1 · Answer 5 · edited May 23 '17 at 12:00

HTML:

<div class="inputWrapper">
    <input class="fileInput" type="file" name="file1"/>
</div>

CSS:

.inputWrapper {
    height: 32px;
    width: 64px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /*Using a background color, but you can use a background image to represent a button*/
    background-color: #DDF;
}
.fileInput {
    cursor: pointer;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    z-index: 99;
    /*This makes the button huge. If you want a bigger button, increase the font size*/
    font-size:50px;
    /*Opacity settings for all browsers*/
    opacity: 0;
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0)
}

take a look of this fiddle:

its working for your needs.

FIDDLE - DEMO

this demo its a reference of this: stackoverflow question LINK

From the autor:ampersandre

score 1 · Answer 6 · answered Aug 16 '14 at 09:54

<div style="position:relative;display:inline-block;left:-4px;bottom:-6px;width:16px;height: 24px;overflow:hidden;">
 <img src="http://maps.google.com/mapfiles/ms/micons/blue-dot.png" alt="" title="Add Attachment" style="height:24px;width:24px; position: relative;top: 1px; left: -3px;"/>
 <input type="file" id="fileupload" name="upload" style=" opacity: 0;font-size: 50px;width:16px; filter:alpha(opacity: 0);  position: relative; top: -25px; left: -1px" />
</div>
<a href="javascript:void(0)" id="filename" style="cursor:pointer;margin-top:15px;text-decoration:none;"></a>

JQuery:

function getFileName() {
    var varfile = $('#fileupload').val().replace(/.*(\/|\\)/, '');
    $("#filename").text(varfile);
}
$("#fileupload").on('change', function() {
       getFileName();
});

Demo:

http://jsfiddle.net/m44fp2yd/

score 1 · Answer 7 · answered Apr 30 '15 at 13:05

$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})

input[type="file"]{
    color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" name="app_cvupload" class="fullwidth input rqd">

score 0 · Answer 8 · answered Aug 23 '13 at 08:26

The No file chosen text is entirely dependent on the browsers rendering engine - I assume you use Chrome. If Firefox you'll see No file selected and in IE you'll get a greyed out textbox with no value at all. This cannot be changed.

The alternative is to use a plugin (such as this) which gives you complete control over the styling of the file control.

score 0 · Answer 9 · answered Aug 23 '13 at 08:27

It's up to the browser to render the file upload box. Each one does this in your own way. For example, in my chrome I can see the No file chosen text. Someone using Firefox might see something else entirely. There is no direct way to control this rendering process.

However, there are some hacks which can be used. For details, check out this link.

score -1 · Answer 10 · edited Aug 23 '13 at 08:32

-1

this text show by browser different browser show different message

chrome show=no file choosen

mozilla show=no file selected

and same as ie

edited Aug 23 '13 at 08:32

Liam

27,717
28
128
190

answered Aug 23 '13 at 08:27

Rituraj ratan

10,260
8
34
55

HTML how to remove text in FileUpload field?

10 Answers10