Ruby on Rails: file_field, how do I remove the upload button?

Question

Cause I have a custom styled / positioned button.

Currently, our set up is: Special upload button (Fancy) Hide the file_field in a div, cause the button can't be moved to be separate from the text.

But we still want the text saying what file you've selected

Answer 1

I believe that the file input tag is displayed by the browser, and cannot be removed by javascript/css. Although, you could try placing a div or something over it with css...

There are alternatives to using the file upload input though:

• http://www.uploadify.com/
• http://www.flash-db.com/Tutorials/upload/
• http://www.appelsiini.net/2009/10/html5-drag-and-drop-multiple-file-upload

Answer 2

Use CSS opacity to make the file field invisible, but still clickable.

Also make the file field absolute positioned, and use a z-index to display it above a target button for the user the click.

You can reference the file name via javascript and populate your DOM element with that value.

You will want to do some text parsing since some versions of IE show the full file path.

This article will be useful: Styling a field field

I have done this many times and it works quite well.

Also check out plupload. It is a file upload library which supports HTML4, HTML5, Flash, and more. It works very well in many scenarios.