Styling file input

[phpnewbie08]

Hi, I am trying to style the upload file input field to match all other fields. I found a js plus css script that will make this happen but in safari it is showing "fakepath". How do I make it just show the file name without the path in safari? Also, I am having trouble making the field box to be longer to match other field. Is that possible? below is the scripts. Thx.

JS.

var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='pix/button_select.gif';
	fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file hidden';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
	}
}

css

div.fileinputs {
	position: relative;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 1;
}

input.file {
	position: relative;
	text-align: right;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

html

<div class="fileinputs">
	<input type="file" class="file">
</div>

[ReFreezed]

You can use a regular expression to grab the filename from a path.

this.relatedElement.value = this.value.match(/[^\/\\]*$/i)[0];

To change the width just use the CSS width parameter.

.fakefile input { width: 100px; }

[phpnewbie08]

Thanks. It works great. Another question. Right now the script will not allow the user to delete the file after uploaded it. Is there a work around that will allow user to delete uploaded file?

[rnd me]

Thanks. It works great. Another question. Right now the script will not allow the user to delete the file after uploaded it. Is there a work around that will allow user to delete uploaded file?

after upload, your server needs to delete the file, it's out of JS's hands at that point...

[phpnewbie08]

I meant to say after the user selects a file, then decides not to upload it. How do I allow user to delete the file from the input field. In a normal <input type="file"> the user can simply remove the path.

[phpnewbie08]

any help?

[ReFreezed]

You'll have to either replace the file input with a new one or reset the whole form. Another solution would be to move the file input to a temporary form, reset that form, and then move the input back.