Customizing HTML File Upload Field in Five Simple Steps!

Posted on July 12, 2010 by Navi

One day, my client asked me to create a custom file upload control for his form. I was not sure how to do that but searching on google helped me create a custom file control.

Custom File Upload Control

I liked it so thought of sharing with you.

Codes are as follow:

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Custom File Upload Control</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta name="author" content="Navi - naveedse@gmail.com" />
<meta name="website" content="http://webhowtoblog.com/" />
<!--[if IE]>  
<style type="text/css">
	#resume-fake{
		padding-top:10px;	
	}
</style>
<![endif]-->
</head>
<body>
<h2>Custom File Upload Control</h2>
<form name="frmUploadResume" action="" method="post" enctype="multipart/form-data">
	<input type="hidden" name="submitted" value="yes" />
	<div id="resume-wrap">
		<div id="resume-file-wrap">
			<input name="resume" type="file" class="file" size="58" onchange="copyFileName(this);" />
		</div>
		<div id="resume-fake-wrap">
			<div class="odd">
				<input type="text" name="resume-fake" id="resume-fake" readonly="readonly" />
			</div>
			<div class="even">
				<img src="browse-button.gif" alt="browse button">
			</div>
		</div>	
	</div>
	<div style="margin-top:10px;">
		<input class="button" type="submit" value=" Upload " />
	</div>
</form>
<script type="text/javascript">
	function copyFileName(obj){
		document.getElementById('resume-fake').value = obj.value;
	}
</script>
</body>
</html>

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

/* CSS Document */
body{
	font-family: Arial, Helvetica, sans-serif;
	font-size:80%;
}
input, select, textarea{
	font-size: 1.0em;
}
#resume-wrap{
	position:relative;
	height:34px;
}
input.file{
	opacity:0;
	filter: alpha(opacity = 0); /*IE HACK*/
	position:relative;
	z-index:2;
}
#resume-fake-wrap{
	left:0;
	position:absolute;
	top:0;
	z-index:1;
}
#resume-fake{
	width:318px;
	height:35px;
	overflow:hidden;
	padding: 0 10px;
	background: transparent url('input-bg.gif') left top scroll no-repeat;
	border:none;
}
div.even{
	float:left;
}
div.odd{
	float:left;
	margin-right:5px;
}
.button{
	background-color: #E7E7E7;
	color: #666666;
	font-size: 1.4em;
	border: none;
	padding: 5px 10px;
}
.clear{
	clear:both;
}

Now let me explain the main bits to you:

  • Main div “resume-wrap” holds file & text fields and is positioned relative so any layer under it cannot go beyond it if elements’ dimensions inside it increase. CSS codes for it are as follow:
    1
2
3
4

    #resume-wrap{
	position:relative;
	height:34px;
}
  • Then is a file control. It is main control which browser uses to capture file from user computer. It has a class named file and a javascript function named ‘copyFileName’. It is needed to copy file name to text box as explained below:

    CSS:

    1
2
3
4
5
6

    input.file{
	opacity:0;
	filter: alpha(opacity = 0); /*IE HACK*/
	position:relative;
	z-index:2;
}

    HTML:

    1

    <input class="file" name="resume" size="58" type="file" />
  • I then added an input box just becuase it can be styled (unlike file control) and shown in place of file control. So I added CSS codes to it as follow:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    #resume-fake-wrap{
	left:0;
	position:absolute;
	top:0;
	z-index:1;
}
/*Input box style*/
#resume-fake{
	width:318px;
	height:35px;
	overflow:hidden;
	padding: 0 10px;
	background: transparent url('input-bg.gif') left top scroll no-repeat;
	border:none;
}
  • I then added a Browse image which is used to encourage users to click on it and upload files. HTML codes for it as follow:
    1

    <input id="resume-fake" name="resume-fake" readonly="readonly" type="text" />
  • Finally, I added javascript codes so file name can appear on text box as soon as file is selected. Following codes copy file name from file field to text field.
    1
2
3

    	function copyFileName(obj){
		document.getElementById('resume-fake').value = obj.value;
	}

    • That’s all.

    Please download complete codes here.

    Please note that it wont work on Google Chrome or Safari as they do not allow file field to increase width using size attribute.

    Let me know if you have a question about it.

    Cheers!

Posted in Tips & Tricks | Tagged , , , , | Leave a comment