How to modify input type file aspect

The other day I found myself in the positions of accepting the challenge of modifying the aspect of an input type=file”. What could I do? I work with a crazy designer (just kidding, he’s actually very skilled at what he does). I thought it wouldn’t be a big deal but the solution took me a little over two hours to develop (I was thinking when I started that it would take maybe at most half hour).

What I had to create was this:

The website was developed using MooTools 1.2, so I wanted to develop a solution based on this framework. After surfing the net to see what others have done to solve this, I got a couple of ideas about what problems I’d have to solve.

My wish was to have the html for a common input type file, without any div’s around it or anything. Only this:

1
2
3
4
5

<form method="post" action="" id="file_upload">
	<input type="file" name="file_upload" />
	<input type="submit" value="upload" />
	<span id="explain" class="explain">File must be .jpg, .gif or .png</span>
</form>

When styled, the input type file would have to be transparent, the submit button disappear and the explain span would have to show a message like “Be patient, file is uploading…” while the upload page was loading.

Having those objectives, I added a container for the input type file having as background an image created for the input type file, I set the real input type file opacity to 0.0001, making it transparent but still clickable, I added an input type text from JavaScript to hold the path to the uploaded file (it has a default text and when a file is uploaded the real input type file has an onChange event that updates the input text value with the file path) and finally removed the input type submit button and added one more action on the real input type file OnChange event to submit the form after a file is chosen. The whole process can be found below:

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

changeInput: function(){
	var input = $('file_upload').getElement('input[type=file]');
	var upload_btn = $('file_upload').getElement('input[type=submit]').remove();
	var container = new Element('span',{
		'class':'input_file_wrapper'
	});
	var fake_text = new Element('input',{
		'type':'text',
		'class':'fake-text',
		'value':'Choose file from your hard drive (press BROWSE)'
	});
	input.set({
		styles:{
			'opacity':0.0001,
			'width':376,
			'height':30,
			'margin':0,
			'padding':0,
			'font-size':24,
			'border':'none',
			'z-index':10000
		}
	})
	container.injectBefore(input).adopt([input,fake_text]);
	input.addEvents({
		'change':function(){
			fake_text.set({
				'value':input.get('value')
			});
			$('explain').set({
				'text':'... file is uploading. Please be pacient.'
			});
			$('file_upload').submit();
		}
	})
}

And here is the CSS for all this:

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

#file_upload {
	display:block;
	position:relative;
	width:580px;
	margin:0px auto 0px;
}
#file_upload span.input_file_wrapper {
	background:url(images/browse.jpg) top center;
	border:none;
	line-height:30px;
	height:30px;
	display:block;
	position:relative;
	width:376px;
	overflow:hidden;
	float:left;
}
#file_upload input.fake-text {
	display:block;
	position:absolute;
	top:5px;
	left:0px;
	padding:2px;
	width:281px;
	height:16px;
	color:#333333;
	font-size:11px;
	border:none;
}
#file_upload span.explain {
	line-height:30px;
	padding-left:5px;
	font-style:italic;
	color:#d5d5d5;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
}

If you make tests you will notice that the actual input type file is not overlapping perfectly with the background image. This happened because on Firefox I couldn’t set the width to the with of the background. Maybe there is a possibility to do that, if you find it or make any improvements, please let me know to update my code.

I tested the code on IE 6.0, Firefox 2.0 and Opera 9.51. If you find any errors on other browsers I would appreciate it if you would let me know.

Related posts

• ZoomIt – JavaScript image zoom for MooTools and jQuery (1)
• YouTube player embed with attached playlist (129)
• Wordpress YouTube playlist plugin (47)
• Wordpress featured content plugin (638)
• Wordpress 2.7.1+ featured articles plugin (212)
• Styling select box – SelectoMoo (14)
• SlideItMoo Wordpress Plugin (12)
• SlideItMoo – image slider (636)
• MooTooltips – easy to make good looking tooltips (104)

Was this useful? Show your support.