CSS and <input type = 'file'> - Discussion

Question

I want to change the style of my enter and browse buttons for uploading files on my website and read how it is practically impossible to do this. There are apparently a few hacks that may work (not tested), but before I spend time on them, I have questions about why professional sites have no problems with this.

When I say “professional,” I mean job search sites where you can upload your resume, programming sites where you can upload your scripts, my college site where I can upload test documents, government, doctors and etc. etc.

I do not see them using a hack with some random programmer who may or may not work, so what do they do, since their websites seem to work and look good?

Any input on this would be appreciated.

thanks

Beauford

---

Following actions:

Thanks for the contribution, but only a note to Yi Jiang - the ones you posted definitely looked in some style. I have one on my site and looked at it in 5 browsers, and all I get is the main square button with a gray overview and a square input field with no space between them, and the browse button is just a little higher than the input field, so he looks very shabby. If I could make it look like your examples, I would be thrilled.

thanks

Answer 1

The file upload field cannot be styled (very) in CSS and cannot be scripted from JS (enough to make surrogate control actually work). There are several reasonable security reasons why this is so, although you can argue that they were too overpriced.

More generally, it is difficult to create a file upload field, since you do not know what the file upload field looks like. All this in the browser. Perhaps you will get a text box on the left and a Browse button / popup on the right (in this case, to which part does the border apply? Or around both?); you may only get a popup on the left and a status icon / label on the right (for example, in Safari); maybe you just get the drag field. Or something different. This is completely uncontrollable.

Most “professional sites” do one of two things:

• Do not worry about this, just use an unallocated field to upload files. Perhaps in a pop-up div when you request a download (so at least it's not always contradictory on the screen).

• Use progressive enhancement technology to replace the loading of the HTML file with an alternative Flash-based uploader (or, less commonly, Java or Silverlight, and in the future we will have more browsers with support for HTML5 drag and drop, crash).

There is a hack in detail here , which works by making the actual file upload control invisible and positioning it on top of the stylized display control. But this is really quite unreliable, depending on what size the browser boot file controls and what bits will respond to the click. This is bad for accessibility (doesn't respond to the keyboard correctly), bad for usability (it doesn't even fit my completely normal Firefox), and I would not recommend using it at all .

Answer 2

Well, first of all, these hacks do not belong to any arbitrary programmer. This is one of quirksmode , for example, from a well-respected source and, as far as I can tell, is widely used (it is used here for the image loading dialog). Another example is the one created for ajax upload script . Ignoring Javascript completely, you can see that a button is just an input type="file" stuck inside a div .

It is worth noting, however, that there is nothing that you cannot live with. Even large sites use simple, unidentified input files. This is from Hotmail.

And this is from GMail

Answer 3

The posting in this thread is because it is deprecated, deprecated and because others (like me) can find it on Google and wonder what they can do to create more convenient [type = file] input fields!

The short answer is still: you cannot.

However, you CAN make a very good punch to do something that you can create, and then manage the file input accordingly if you are ready to use a little JavaScript.

First up, HTML on these lines:

 <a href="#" class="btn btn-upload">Choose your photo</a> <div class="fileupload"> <label for="picture">Your Image:</label> <input type='file' name="picture" id="picture" enctype = "multipart/form-data" runat="server" required /> </div> 

This allows you to use the fileupload div to hide the real control. However, you SHOULD NOT use display:none . Many browsers will see this as a security risk. Instead, try position:relative with left:-99999px or height:0px with overflow:hidden . If you need to disable this for any reason (for example, to support a really old IE), you can use the IE or Modernizr stylesheet and cancel css to show normal loading and hide your "fake" one.

Now tune your btn-upload accordingly. However, you want it.

Use JavaScript to click the input file for you when someone clicks on your "fake" (the following assumes you are using jQuery):

  $(".btn-upload").click(function () { $(".fileupload input").trigger('click'); return false; }); 

What more, if you want to change the appearance of the fake input file you entered or change your page in any way when the user selects the file, you can do this using the change event. The following example will display the image that the user is about to download in the img tag with the image-preview identifier (this will not work in IE below 10):

  $('input[type=file]').change(function () { var input = $(this); if (input[0].files && input[0].files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#image-preview') .attr('src', e.target.result); }; reader.readAsDataURL(input[0].files[0]); } }); 

You can also access the file name if you want to use javascript to display it somewhere:

 $('input[type=file]').change(function () { var input = $(this); if (input[0].files && input[0].files[0]) { var file = input[0].files[0] if (file) { //Put the file name into a div with the id of 'filename' $('#filename').html(file.name); } } }); 

Using all this, you can make a pretty good download button that looks very nice and still works. I also recommend using the discovery function and hiding all this in browsers where file downloading is not supported (WATCH YOU, OLD IOS!)

Example of detecting file upload function:

 function checkForInputFile() { var elem = document.createElement("input"); elem.type = "file"; if (elem.disabled) return false; try { elem.value = "Test"; // Throws error if type=file is implemented return elem.value != "Test"; } catch(e) { return elem.type == "file"; } } if(checkForInputFile()){ console.log('i support file input type!'); } else { console.log('i dont :('); } 

(The above result is based on the correct answer here: Detection if type <input type = "file" /> is supported)

Finally, what if we want the CLEAR button to enter a file type? Well, again, for security reasons this is not easy. But it is possible! This solution is my favorite: Cleanup <input type = 'file' /> using jQuery

And if you're too lazy to open a link, here is an example of this approach using my html example, assuming we add a link with id remove-file somewhere on the page:

 function resetFormInputElement(e){ e.wrap('<form>').closest('form').get(0).reset(); e.unwrap(); } $('a#remove-file').click(function () { //Clear input file resetFormInputElement($('.fileupload input')); return false; });