Verification of an uploaded file BEFORE upload - The Answer
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
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
