Ask a Jedi: Display value of file upload field

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>

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA