Ask a Jedi: Display value of file upload field

August 31, 2007 coldfusion

(This post is more than 2 years old.)

Jay (my second US gov emailer today) asks:

I have not done much with this so I am not sure of the best approach currently I am working on a cf7 server and I am uploading files with some code.
My users would like to be able to see the file name they chose below the upload field since the field is not long enough to display all of it at once.

My initial response was no - since I know the browser locks down those form file fields. But then I remembered that JavaScript should be able to read the setting. Sure enough, it can:


<cfform name="foo">
<cfinput type="file" name="fileone">
<cfdiv bind="{fileone}">
</cfform>

Of course, he asked for a CF7 version. Here is a slightly more verbose version that should work in CF7 (or anything really, even languages on their dead bed).


<script>
function setFilename() {
	var filefield = fileone.value;
	var output = document.getElementById('filename');
	output.innerHTML = filefield;
}
</script>

<cfform name="foo2"> <cfinput type="file" name="fileone" onChange="setFilename()"> <div id="filename"></div> </cfform>