[javascript] input type=file show only button

Is there a way to style (or script) <input type=file /> element to have visible only "Browse" button without text field?

Thanks

Edit: Just to clarify why to I need this. I'm using multi file upload code from http://www.morningz.com/?p=5 and it doesn't need input text field because it never has value. Script just adds newly selected file to collection on page. It would look much better without text field, if it's possible.

You could label an image so when you click on it the click event of the button will be triggered. You can simply make the normal button invisible:

<form>
    <label for="fileButton"><img src="YourSource"></label>    <!--You don't have to put an image here, it can be anything you like-->
    <input type="file" id="fileButton" style="display:none;"/>
</form>

It worked for me on all browsers, and is very easy to use.

I used some of the code recommended above and after many hours of waisting my time, I eventually came to a css bag free solution.

You can run it over here - http://jsfiddle.net/WqGph/

but then found a better solution - http://jsfiddle.net/XMMc4/5/

 <input type = "button" value = "Choose image #2" 
   onclick ="javascript:document.getElementById('imagefile').click();">
       <input id = "imagefile" type="file" style='display:none;' name="img" value="none"/>see jsfiddle code for examples<br/>

I just styled an input file with width: 85px, and the text field disappeared at all

I Don't Know what your talking about, if you trying to style a input type file into a button that is easy for me all you will need is just html and css.

<div id="File-Body">
  <label id="File-Lable" for="File-For">
    <div id="Filebutton">Edit</div>
  </label>
  <input id="File-For" type="file">
</div>

css:

#File-Body > #File-For {
  display: none;
}

#Filebutton {
  width: 50px;
  height: 20px;
  border: 1px solid;
  border-radius: 2px;
  text-align: center;
}
#File-Body {
  width: 300px;
  height: 30px;
}

If you want to test it Here it is http://jsfiddle.net/qm8j45c3/

You can hide the input file tag using normal CSS.
First, add a label with for attribute and assign it to input button.
Now by default when you click the label, the button click event will be triggered that will open up the browse files dialogue.

<input type="file" name="imageUpload" id="imageUpload" class="hide"/> 
<label for="imageUpload" class="button-style">Select file</label>

Add the style to the label as a button.
Live Demo

So here's the best way to do this FOR ALL BROWSERS:

Forget CSS!

<p>Append Image:</p> 
<input type="button" id="clickImage" value="Add Image" />
<input type="file" name="images[]" id="images" multiple />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" charset="utf-8"></script>

<script>
$('#images').hide();        
$('#clickImage').click( function() {    
    $('#images').trigger('click');  
});
</script>

my solution is just to set it within a div like "druveen" said, however i ad my own button style to the div (make it look like a button with a:hover) and i just set the style "opacity:0;" to the input. Works a charm for me, hope it does the same for you.

<a href="#" id="select_logo">Select Logo</a> <input type="file" id="logo"> 

$("#logo").css('opacity','0');

$("#select_logo").click(function(){
   $().trigger('click');
   return false;
});

This works for me:

input[type="file"]  {
    color: white!important;
}

Hide the input-file element and create a visible button that will trigger the click event of that input-file.

Try this:

CSS

#file { width:0; height:0; } 

HTML:

<input type='file' id='file' name='file' />
<button id='btn-upload'>Upload</button>

JAVASCRIPT(jQuery):

$(function(){
    $('#btn-upload').click(function(e){
        e.preventDefault();
        $('#file').click();}
    );
});

This HTML code show up only Upload File button

<form action="/action_page.php">
    <input type="button" id="id" value="Upload File"  onclick="document.getElementById('file').click();" />
    <input type="file" style="display:none;" id="file" name="file" onchange="this.form.submit()"/>  
</form>

I wasted my day today getting this to work. I found none of the solutions here working each of my scenarios.

Then I remembered I saw an example for the JQuery File Upload without text box. So what I did is that I took their example and stripped it down to the relevant part.

This solution at least works for IE and FF and can be fully styled. In the below example the file input is hidden under the fancy "Add Files" button.

<html>

<head>
    <title>jQuery File Upload Example</title>
    <style type="text/css">
        .myfileupload-buttonbar input
        {
            position: absolute;
            top: 0;
            right: 0;
            margin: 0;
            border: solid transparent;
            border-width: 0 0 100px 200px;
            opacity: 0.0;
            filter: alpha(opacity=0);
            -o-transform: translate(250px, -50px) scale(1);
            -moz-transform: translate(-300px, 0) scale(4);
            direction: ltr;
            cursor: pointer;
        }
        .myui-button
        {
            position: relative;
            cursor: pointer;
            text-align: center;
            overflow: visible;
            background-color: red;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="fileupload" >
        <div class="myfileupload-buttonbar ">
            <label class="myui-button">
                <span >Add Files</span>
                <input id="file" type="file" name="files[]" />
            </label>
        </div>
    </div>
</body>
</html>

<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />

This will surely work i have used it in my projects.I hope this helps :)

I wrote this:

<form action='' method='POST' name='form-upload-image' id='form-upload-image' enctype='multipart/form-data'>_x000D_
_x000D_
    <div style="width: 0; height: 0; overflow: hidden;">_x000D_
        <input type="file" name="input-file" id="input-file" onchange="this.files.length > 0 ? document.getElementById('form-upload-image').submit():null;" />_x000D_
    </div>_x000D_
    _x000D_
</form>_x000D_
_x000D_
<img src="image.jpg" style="cursor: pointer;" onclick="document.getElementById('input-file').click();" />

Work fine in all browsers, no jQuery, no CSS.

You can dispatch the click event on a hidden file input like this:

<form action="#type your action here" method="POST" enctype="multipart/form-data">_x000D_
     <div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" >Click to upload!</div>_x000D_
     <!-- hide input[type=file]!-->_x000D_
     <div style='height: 0px;width:0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>_x000D_
     <input type="submit" value='submit' >_x000D_
    </form>_x000D_
_x000D_
    <script type="text/javascript">_x000D_
     var btn = document.getElementById("yourBtn");_x000D_
     var upfile = document.getElementById("upfile"); _x000D_
     btn.addEventListener('click',function(){_x000D_
      if(document.createEvent){_x000D_
       var ev = document.createEvent('MouseEvents');_x000D_
       ev.initEvent('click',true,false);_x000D_
       upfile.dispatchEvent(ev);_x000D_
      }else{_x000D_
          upfile.click();_x000D_
      }_x000D_
     });_x000D_
    _x000D_
    </script>

Ive a really hacky solution with this...

<style type="text/css"> 
    input[type="file"]
    { 
        width: 80px;        
    } 
</style>

<input id="File1" type="file" />

The problem is the width attribute that is hiding the text field will obvously vary between browsers, vary between Windows XP themes and so on. Maybe its something you can work with though?...

The answer of tmanthey is quite good, except that you can't play with border-width in Firefox v20. If you see the link (demo, can't really show here) they solved the problem using font-size=23px, transform:translate(-300px, 0px) scale(4) for Firefox to get the button bigger.

Other solutions using .click() on a different div is useless if you want to make it a drag'n'drop input box.

I tried to implement the top two solutions, and it ended up being a HUGE waste of time for me. In the end, applying this .css class solved the problem...

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

Done! super clean and super simple...

You can give the input element a font opacity of 0. This will hide the text field without hiding the 'Choose Files' button.

No javascript required, clear cross browser as far back as IE 9

E.g.,

input {color: rgba(0, 0, 0, 0);}

All these answers are cute, but CSS won't work since it isn't the same across all browsers and devices, the first answer I wrote will work in everything but Safari. To get it to work accross all browsers all the time it must be created dynamically and recreated every time you want to clear the input text:

    var imageDiv = document.createElement("div");   
    imageDiv.setAttribute("id", "imagediv");
    imageDiv.style.cssText = 'position:relative; vertical-align: bottom;';  
    var imageText = document.createTextNode("Append Image:");
    var newLine = document.createElement("br"); 
    var image = document.createElement("input");    
    image.setAttribute("type", "file");
    image.setAttribute("id", "images");
    image.setAttribute("name", "images[]");     
    image.setAttribute("multiple", "multiple");
    imageDiv.appendChild(imageText); 
    imageDiv.appendChild(newLine); 
    imageDiv.appendChild(image); 
    questionParagraph.appendChild(imageDiv);

Here is a simplified version of @ampersandre's popular solution that works in all major browsers. Asp.NET markup

<asp:TextBox runat="server" ID="FilePath" CssClass="form-control"
    style="float:left; display:inline; margin-right:5px; width:300px"
    ReadOnly="True" ClientIDMode="Static" />
<div class="inputWrapper">
    <div id="UploadFile" style="height:38px; font-size:16px; 
      text-align:center">Upload File</div>
    <div>
      <input name="FileUpload" id="FileInput" runat="server" 
             type="File" />
    </div>
  </div>
  <asp:Button ID="UploadButton" runat="server" 
    style="display:none" OnClick="UploadButton_Click" />
</div>
<asp:HiddenField ID="hdnFileName" runat="server" ClientIDMode="Static" />

JQuery Code

$(document).ready(function () {

   $('#UploadFile').click(function () {
       alert('UploadFile clicked');
       $('[id$="FileInput"]').trigger('click');
   });

   $('[id$="FileInput"]').change(function (event) {
       var target = event.target;
       var tmpFile = target.files[0].name;
       alert('FileInput changed:' + tmpFile);
       if (tmpFile.length > 0) {
          $('#hdnFileName').val(tmpFile);
       }
       $('[id$="UploadButton"]').trigger('click');
   });
});

css code

.inputWrapper {
height: 38px;
width: 102px;
overflow: hidden;
position: relative;
padding: 6px 6px;
cursor: pointer;
white-space:nowrap;
/*Using a background color, but you can use a background image to represent
 a button*/
background-color: #DEDEDE;
border: 1px solid gray;
border-radius: 4px;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}

Uses a hidden "UploadButton" click trigger for server postback with standard . The with "Upload File" text pushes the input control out of view in the wrapper div when it overflows so there is no need to apply any styles for the "file input" control div. The $([id$="FileInput"]) selector allows section of ids with standard ASP.NET prefixes applied. The FilePath textbox value in set from server code behind from hdnFileName.Value once file is uploaded.

That's going to be very hard. The problem with the file input type is that it usually consists of two visual elements, while being treated as a single DOM-element. Add to that that several browsers have their own distinct look and feel for the file input, and you're set for nightmare. See this article on quirksmode.org about the quirks the file input has. I guarantee you it won't make you happy (I speak from experience).

[EDIT]

Actually, I think you might get away with putting your input in a container element (like a div), and adding a negative margin to the element. Effectively hiding the textbox part off screen. Another option would be to use the technique in the article I linked, to try to style it like a button.

HTML:

<input type="file" name="upload" id="upload" style="display:none"></input>
    <button  id="browse">Upload</button>

JQUERY

 $(document).ready(function(){
        $("#browse").click(function(){
        $("#upload").click();
        });
 });

Hope this works :)

There are several valid options here but thought I would give what I have come up with while trying to fix a similar issue. http://jsfiddle.net/5RyrG/1/

<span class="btn fileinput-button">
    <span>Import Field(s)</span>
    <input id="fileupload" type="file" name="files[]" onchange="handleFiles(this.files)" multiple>
</span>
<div id="txt"></div>

function handleFiles(files){
    $('#txt').text(files[0].name);  
}

Fix to work in all browsers RESOLVED:

      <input type = "button" value = "Choose image" 
       onclick ="javascript:document.getElementById('imagefile').click();">
      <input id = "imagefile" type="file" style='visibility: hidden;' name="img"/>

I have tested in FF, Chrome & IE - working fine, applied styles too :D

Another easy way of doing this. Make a "input type file" tag in html and hide it. Then click a button and format it according to need. After this use javascript/jquery to programmatically click the input tag when the button is clicked.

HTML :-

<input id="file" type="file" style="display: none;">
<button id="button">Add file</button>

JavaScript :-

document.getElementById('button').addEventListener("click", function() {
    document.getElementById('file').click();
});

jQuery :-

$('#button').click(function(){
    $('#file').click();
});

CSS :-

#button
{
    background-color: blue;
    color: white;
}

Here is a working JS fiddle for the same :- http://jsfiddle.net/32na3/

I know this is an old post but a simple way to make the text dissapear is just to set text color to that of your background.

eg if your text input background is white then:

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

This will not effect the Choose File text which will still be black due to the browser.

Here is my good ol' remedy:

<input type="file" id="myFile" style="display:none;" />
<button type="button" onclick="document.getElementById('myFile').click();">Browse</button>

At least it worked in Safari.

Plain and simple.

For me, the simplest way is using a font color like background color. Simple, not elegant, but usefull.

<div style="color:#FFFFFF">   <!-- if background page is white, of course -->
<input class="fileInput" type="file" name="file1"/></div>

I was having a heck of a time trying to accomplish this. I didn't want to use a Flash solution, and none of the jQuery libraries I looked at were reliable across all browsers.

I came up with my own solution, which is implemented completely in CSS (except for the onclick style change to make the button appear 'clicked').

You can try a working example here: http://jsfiddle.net/VQJ9V/307/ (Tested in FF 7, IE 9, Safari 5, Opera 11 and Chrome 14)

It works by creating a big file input (with font-size:50px), then wrapping it in a div that has a fixed size and overflow:hidden. The input is then only visible through this "window" div. The div can be given a background image or color, text can be added, and the input can be made transparent to reveal the div background:

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)
}

Let me know if there are any problems with it and I'll try to fix them.

Resolved with the following code:

<div style="overflow: hidden;width:83px;"> <input style='float:right;' name="userfile" id="userfile" type="file"/> </div>

I will answer this question by telling you why you should not remove the text. The reason for the text is userability. If a user has selected a file, he should know that he has selected the file and the file name be indicated. While you can remove the text as answered by many here, you are going against the principle of human user. Once you remove the text, the button appears the same, whether a user has selected a file or not. And this is bad design.