Verification of an uploaded file BEFORE upload - The Answer

[eTeli_com]

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

[eTeli_com]

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

[Mr_Black]

Leaving out of discussion remarks about the file name, as completely false, maniacs would like to notice that:

If you want to check the file extention (which, of course, guarantees nothing) BEFORE the upload, you ONLY can do this BEFORE ColdFusion puts its hands on this process: client side or protocol-level server-side. Any CF code is obviously and totally useless, because it runs AFTER the upload process complete.

[eTeli_com]

ah.. I see what you mean.

The files I was using to test this were rather small, so they were uploaded as a *TMP file so quickly that I didn't even see them go.

When I tried it with a much larger file, I saw the delay involved with the upload.

However, this does let you check the complete filename before you throw any CFFILE tags at it.

It's kind of a pain, in these days of having people uploading enormous video files, that the file has to be completely uploaded before the server can make sure it's not a.) the wrong file name, b.) a potential threat, c.) whatever other thing you'd want to know about the file before it lands on your server.

I'll keep messin with code though.. I never give up hehe.

Kudos!