Coldfusion forms and image upload with cffile - image

Question

I'm learning some Coldfusion, and I'm having trouble with this small form based application I'm building for a coworker.
Here is the first page: http://pastebin.com/aLPYHPsF
As you can see, what I want to do is get the user input and take that input and output it to html. The text stuff works fine, but I can't get the image to upload! What I want to do is have the user click upload, get a confirmation, then click submit and they are sent to the generated html (cfm) page. On the page is a resized version of the image they uploaded.
Please tell me what I'm doing wrong! Right now when "upload" is clicked, the form just dumps.

Answer 1

It's because of you forgot to assign enctype="multipart/form-data" to your first cfform. I've edited some of your coding. Check it out.
<cfset strPath = ExpandPath( "./" ) />
<cfset strPath = GetDirectoryFromPath(GetCurrentTemplatePath()) />
<table width="100%">
<tr>
<td align="center">
<cfform name="ecaform" action="ecagenerator.cfm" enctype="multipart/form-data">
<table style="font-family: arial; font-size: 9pt">
<tr><td height="30px" align="center" colspan="2" style="background-color: #020058; color: #FFFFFF; font-family: arial;">
<b>ECA Newsletter Creation Form</b>
</td>
</tr>
<tr><td height="20"></td></tr>
<tr>
<td>Earned from:</td>
<td>
<cfinput
type="radio"
name="earnedfrom"
value="UC">
UC
<cfinput
type="radio"
name="earnedfrom"
value="ECA">
ECA
</td>
</tr>
<tr>
<td>First Name:</td>
<td>
<cfinput
name="firstname">
</td>
</tr>
<tr>
<td>Last Name:</td>
<td>
<cfinput
name="lastname">
</td>
</tr>
<tr>
<td>Instructor's Name:</td>
<td>
<cfinput
name="instructorname">
</td>
</tr>
<tr>
<td>Date (MM/DD/YYYY):</td>
<td>
<cfinput
name="date">
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<cfinput
type="radio"
name="sex"
value="male">
Male
<cfinput
type="radio"
name="sex"
value="female">
Female
</td>
</tr>
<tr>
<td>Certificate Type:</td>
<td>
<cfinput
type="radio"
name="certtype"
value="Private">
Private
<cfinput
type="radio"
name="certtype"
value="Recreational">
Recreational
<cfinput
type="radio"
name="certtype"
value="Commercial">
Commercial
</td>
</tr>
</table>
<table style="font-family: arial; font-size: 9pt; margin-top: 20 px;">
<tr>
<td>
Upload the photo:
</td>
</tr>
<tr>
<td>
<cfif isDefined("form.fileUpload")>
<cffile action="upload"
fileField="fileUpload"
destination="#strPath#"
accept="image/*">
<cfimage action="resize"
width="200"
height="200"
source="#strPath##file.serverfile#"
destination="#strPath##file.serverfile#"
overwrite="yes">
<img src="<cfoutput>#file.serverfile#</cfoutput>">
</cfif>
</td>
</tr>
<tr>
<td>
<form enctype="multipart/form-data"
method="post">
<input type="file"
name="fileUpload" /><br /><br />
<input type="submit"
value="Submit"
action="ecagenerator.cfm" />
</form>
</td>
</tr>
</table>
<table style="margin-top: 20px;">
<tr>
<td>
<cfinput
type="submit"
name="Submit"
value="Submit">
</td>
</tr>
</table>
</cfform>
</td>
</tr>
</table>

Answer 2

You might want to look into using <cfdiv> for the image upload section. Basically you want the form for image uploading be inside the <cfdiv>, so that the form is submitted through ajax. Have the image form action post to a previewImage.cfm that uses <cffileupload>, validate with isImageFile() if it is an image file, then use <cfimage> to resize it and display a thumbnail (may use action="writetobrowser"). The easiest way to associate the uploaded image with the parent form would be storing the file path in Session I guess, if you don't want to code up extra Javascript.