Coldfusion forms and image upload with cffile

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

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.

Answer 2

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>