Form element <input type="file"> and CSS
Form element input type="file" is used for uploading file on server. With help of screenshots 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.
Following screenshots of form element input type="file" reflect appearance in browsers at using selected CSS properties.
<input type="file" name="upFile" />
Above is default display of element file. 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. Elements in IE browsers, as usually, occupy larger space than is required. IE screenshots come from English system, therefore they have English description. IE and FireFox use localized button description, Opera and Safari use English only text. In screenshot of FireFox is Czech description on button. It is not possible to change button text by any attribute.
input {
font: normal
13px Arial;
}
.sizeXY {
width: 320px;
height: 20px;
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 sets font type in both parts of element correctly. Desired proportions keep all tested browsers, but FireFox fails to utilize whole assesment width. That is perhaps biggest defect at "stylish" of element file, which is not eliminated nor in beta version FF3. Property float: left; removes needless 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 displays only what is important: selected file. It is not possible to roll path text by any property.
.bgr {
width: 320px;
height: 20px;
float: left;
background: #ffa;
text-align: right;
border: 0;
}
Now add some properties: background color, which switch some elements to the appearance classic, try to remove border and set text align to the right. IE as only one type of browser switch appearance to classic and remove border not only in text part of element, but also in button. FireFox and Safari change color of background. Opera is inactive on that properties. None of browsers changed background color of button. Setting property text-align: right; does not move text of file path to the right, but shifts complete element in FireFox.
Each attempt to apply some of the CSS properties only worsen original appearance of element. Therefore allow me to declare, that element file is in essence not able to be stylish. The fact is that file is composite element and CSS are ready for single elements only. 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.
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 13.01.2008