Verification of an uploaded file BEFORE upload - The Answer

Question

Hello fellow CF Maniacs...
As many of us may have experienced, when someone uses a form
on a site to upload a file, it can be quite a pain to have to wait
for the file to be uploaded before it gets verified as the correct
file name or file format.
I set out on a quest to find a javascript solution to this
problem.
What I was looking for was a way for the actual filename
selected by the user, regardless of what directory structure
information was in the file field upon submission, to be verified
before the upload took place.
For instance, if the site were expecting a file called
'myfile.jpg', when the user clicked on the browse button to select
the file, the resulting string of text could be anything.
It might be 'C:\myfile.jpg' or
'D:\SomeDirectory\AnotherDirectory\YetanotherDirectory\myfile.jpg'
Worse yet, it might even be the wrong file entirely.
Up until now, I've always had to allow the file to be
uploaded and then verify the file was correct.
When you're getting large files from users, and even small
ones at times, this can be a 'patience issue' for the user. They
wait around for the file to be uploaded, just to be told 'Oops, you
sent the wrong file, please try again'.
After a few hours of trial and error, I came across an
unrelated javascript file that seemed like it would work for my
requirements. And it did. Yes, if the user has javascript disabled
there's the chance this wont work - but for those who have it
enabled, it could save a lot of bandwidth in uploads and reuploads,
and a lot of time for the user.
The following example can be used to create a page called
'testform.cfm'.
The only value in the following example form that you would
change is:
filename.ext = the filename and extension you require to be
selected (i.e. myfile.jpg or somefile.html)
This code will work 'out of the box' if you just want to put
a specific filename in the 'thefilename' field. However, this will
mean that everyone user uploading a file will be sending the same
filename as everyone else.
I wont go into how to get unique filenames for each user,
because that's not what this instruction page is for. If you need
unique filenames, there are a variety of ways to change the passed
value of 'thefilename' to accomodate them.
Enough yacking.. here's the code:
<!-- content of testform.cfm --->
<cfif parameterexists(field2) is 'no'>
<script language="Javascript">
<!--
function copyData(from,to) { to.value = from.value }
// -->
</script>
<form name="myForm" action="testform.cfm" method="post"
enctype="multipart/form-data">
<input type="file" name="field1"
onchange="copyData(this,document.myForm.field2)"
onKeyUp="copyData(this,document.myForm.field2)">
<input type="hidden" name="field2"
onchange="copyData(this.document.myForm.field1)"
onKeyUp="copyData(this,document.myForm.field1)"><input
type="submit" value="go">
<input type="hidden" name="thefilename"
value="filename.ext">
</form>
<Cfelse>
Field 2 is
<cfoutput>#field2#</cfoutput><Br><BR>
<cfset namelength = #LEN(thefilename)#>
<cfset actualfile = #RIGHT(field2, namelength)#>
Actual Filename picked on form was:
<cfoutput>#actualfile#</cfoutput><Br>
Looking for the filename:
<cfoutput>#thefilename#</cfoutput><Br>
<cfif #actualfile# is not '#thefilename#'>
File did not match - don't continue with upload
<cfelse>
File matched - continue with upload
</cfif>
</cfif>
Perhaps someone will come along and make this work even
better. But at least this works :)
Kudos,
eTeli.com

Answer 1

Oops.. perhaps I should explain what is happening when this
code is used.
First off, there is a file input field (field1).
Secondly there is a hidden field (field2).
What the code is doing, is taking whatever text appears in
field1 and automatically inserting it into the hidden field2 value.
When the form is submitted, the field1 value will be changed
by the server to some temporary value - which is of no use when
you're trying to find out the actual text that was in the field to
begin with.
But, since the hidden field has a 'copy' of that value, and
the hidden field doesn't get changed to a temporary one, you have
something to work with before the file gets delivered to the
server.
Pretty simple solution really.. too bad it took me hours to
find it.
I went through everything from using regex searches and finds
to trying to disable the submit button if the filename was
incorrect.
Everything else I tried failed.
Hope it works for you :)
eTeli.com