Form element <input type="file"> and CSS
Form element input type="file" is used for uploading file to server. With help of screenshots and live form elements we prove that this element is practically not possible to style. In the second part of article some work experience with this element are mentioned.
If you really need to set perfect shape of this element, then I recommend following references link 1, link 2, which describe how to replace original file element with other styled HTML elements, and which by help of JavaScript supply function of element file.
On the left side is applied CSS code, on the right side is visual appearance of that element. In the first row live element is displayed, next rows are screenshots of that styled element in various browsers. Such way allows comparing the look in your actual browser with the look in other browsers.
CSS: input { font: normal 13px Arial; } HTML: <input type="file">
Above is default look of file element. Setting the width of element by the help of attribute size changes the total width of element, but disproportion of the width in different browsers remain. The button title depends on locale of browser and is not possible to change that text. As an example I used FireFox screenshot from Czech version of browser.
CSS:
.sizeXY {
width: 320px;
float: left;
}
By font specification, IE adjust font setting in file path part, but font in button remains unchanged (probably Verdana). FireFox is fully irresponsive to font specification. Opera and Chrome sets font type in both parts of element correctly. Specified width is kept by all tested browsers, but FireFox fails to utilize entire width of element. Property float: left; removes needless 1px margin above and below element in IE, so as in case of other form elements in IE.
For display of entire file path would need file element width at least 600 pixels wide. To check validity of file selection by eye, requires using cursor keys to shift path to the right. Therefore better view would provide path rolled at the end. Besides Safari and Chrome displays only what is important: selected file.
CSS:
.backgr {
width: 320px;
height: 20px;
float: left;
background: #ffa;
text-align: right;
border: 0;
}
Now add some properties: background, which switches some form elements to classic look, try to remove border, set text align to the right and define the height of element. IE and Opera change look to classic and remove border not only in text part of element, but also in button. Property text-align: right; does not scroll text of file path to the right, but shifts complete element in FireFox. The height is adjusted in all browsers, but FireFox cut off bottom of text part of element and button in Chrome overflow the height size.
Form element input type="file" is composit element, consisting from two parts: text box and button. How to determine for which part of element is CSS code specified then. Each attempt to apply some CSS property only worsen original appearance of element. Therefore allow me to declare, that element file is in essence not able to be stylish. Not even following CSS code example helps:
input[type="file"] > input[type="button"] {...}
Atributes of form element file
When element file in form is used, opening tag form must contain attribute enctype. Form element file can contain optional attribute accept, indicating acceptable file type according to MIME specifications. Only specified file types ought to be possible to upload. I was not successfull to utilize attribute accept, sorry.
<form method="post" action="script.asp" enctype="multipart/form-data"> ... <input type="file" name="upFile" accept="image/*"> ... </form>
Practical using of element file
Basic problem at file uploading are file names. To name document in unique and pregnant way, so that to be plain understandable for all intranet users is almost impossible. Next problem, hidden in uploaded file names, is using national alphabets and accented characters in file name. Such a way named files in multi-national environment, sometimes causes, that it is not possible to download and open file to PC with another national system than original one.
Advantage of uploading file is in case of frequent updating one file with the same data type, and when real data are often changed. That file is given fixed name on server, and file content text description is attached. Uploaded file is renamed to that given fixed name and by that original file is overwritten. By this way menu in Canteen, or daily work specification in Tool Shop application is updated. Description of this applications you can find in section intranet applications Tour.
Another time it is preferable to assign web subdirectory as network drive for certain user and allow him to save, delete or overwrite files in this directory. It is important is to keep file names according to negotiated convention. By file name conventions, application can find, if finite file exists and offer this file for download. Other users of intranet can open this file from their browser. Such method is used in application Contracts, which inspect terms of contract expiration, progress of contract signing as well as contains .pdf copy each contract.
Other files or documents type of ISO, directions, templates, forms are saved on server by intranet manager and always are completed by accompanying text, which in a few words describes file content. At the same time it is possible to unify order of documents, to group them, replace old ones and alike. Commented list of documents is more cheerful than any search tool.
If you want to establish intranet, based on uploaded files, take into account problems described above. Remember, that ability to name well and concisely file is indirectly proportional to ones position in company.
updated 27.09.2008