Upload an image to my site

what type of filed I should store the image.
Typically you store the file name in a string column.  The data type is db dependent, but for MS SQL it's VARCHAR.

<cfif IsDefined('FORM.upload_button')>
      <!--- upload to current directory by default --->
      <cfset targetDirectory = ExpandPath('./')>

      <!--- do the upload --->
      <cffile nameconflict="overwrite" action="upload" 
              destination="#targetDirectory#" 
              result="uploadResult"
              filefield="FORM.upload_file"/>
    
     <!--- if it's not a valid image, delete the file and show an error --->
     <cfif Not IsImageFile(targetDirectory & uploadResult.serverFile)>
         <cffile action="delete" file="#targetDirectory##uploadResult.serverFile#">
         Error: The uploaded file is not a valid image!
     <cfelse>
         <!--- Otherwise, save the filename to the database --->
         <cfquery name="insertFile" datasource="yourDatasourceName">
             INSERT INTO YourTable ( FileName )
	     VALUES 
             (
                 <cfqueryparam value="#uploadResult.serverFile#" cfsqltype="cf_sql_varchar">
             )
         </cfquery>

         <!--- display the uploaded image on screen--->
         Success:
         <img src="#uploadResult.serverFile#">

     </cfif>
 
<cfelse>
 
	<cfoutput>
        <form action="#CGI.SCRIPT_NAME#" method="post" enctype="multipart/form-data">
            <input type="file" name="upload_file"/>
            <input type="submit" name="upload_button" value="Upload"/>
        </form>
	</cfoutput>
    
</cfif>

Select allOpen in new window

I like your code but what if the user what to upload a very large image is there a way to resize the image to a certain size if the image is larger than the required size.

to resize the image on the fly if the image is larger than what it should be.

Sure.  After a successful upload use imageResize(). But get the upload working first.

I get this error:

Attribute validation error for tag file.  
The tag does not have an attribute called result. The valid attribute(s) are action, charset, accept, destination, filefield, nameconflict, mode, attributes, source, file, variable, output, addnewline.  
 
ColdFusion cannot determine the line of the template that caused this error. This is often caused by an error in the exception handling subsystem.

I just want to get this first step to work.
I am not should what I am doing wrong

I am getting an error  
Attribute validation error for tag file.

       <cfif IsDefined('FORM.upload_button')>
      <!--- upload to current directory by default --->
      <cfset targetDirectory = ExpandPath('LoadImages/')>

      <!--- do the upload --->
      <cffile nameconflict="overwrite" action="upload"
              destination="#targetDirectory#"
              result="uploadResult"
              filefield="FORM.upload_file"/>
   
     <!--- if it's not a valid image, delete the file and show an error --->
     <cfif Not IsImageFile(targetDirectory & uploadResult.serverFile)>
         <cffile action="delete" file="#targetDirectory##uploadResult.serverFile#">
         Error: The uploaded file is not a valid image!

         Success:
         <img src="#uploadResult.serverFile#">

     </cfif>
 
<cfelse>
 
      <cfoutput>
        <form action="#CGI.SCRIPT_NAME#" method="post" enctype="multipart/form-data">
            <input type="file" name="upload_file"/>
            <input type="submit" name="upload_button" value="Upload222222"/>
        </form>
      </cfoutput>
   
</cfif>

I was getting an error because of result="uploadResult"
but now I selected the image then clicked on the upload but it does not do anything.

I want to see the selected image on my screen!
where is it??? I am not sure where the image go???
It seem that something wrong with this code.

                          <cfif IsDefined('FORM.upload_button')>
      <!--- upload to current directory by default --->
      <cfset targetDirectory = ExpandPath('LoadImages/')>
   
        <cffile
    action = "upload"
    destination = "LoadImages/"
    fileField = "FORM.upload_file"
      accept = "gif/jpg"
      nameConflict = "MakeUnique">

     <!--- if it's not a valid image, delete the file and show an error --->
     <cfif Not IsImageFile(targetDirectory & uploadResult.serverFile)>
         <cffile action="delete" file="#targetDirectory##uploadResult.serverFile#">
         Error: The uploaded file is not a valid image!

         Success:
         <img src="#uploadResult.serverFile#">

     </cfif>
 
<cfelse>
 
      <cfoutput>
        <form action="#CGI.SCRIPT_NAME#" method="post" enctype="multipart/form-data">
            <input type="file" name="upload_file"/>
            <input type="submit" name="upload_button" value="Upload"/>
        </form>
      </cfoutput>
   
</cfif>

I need to get these two steps to work first.
1. I want to see my selected image on the screen
2. I want to upload the image to my folder called LoadImages

Try this. Just change the targetDirectory

 <cfif IsDefined('FORM.upload_button')>
      <!--- upload to current directory by default --->
      <cfset targetDirectory = ExpandPath('.')>

      <!--- do the upload --->
      <cffile nameconflict="overwrite" action="upload"
              destination="#targetDirectory#"
              result="uploadResult"
              filefield="FORM.upload_file" />
   
     <!--- if it's not a valid image, delete the file and show an error --->
	<cfset pathToFile = targetDirectory &"/"& uploadResult.serverFile>
    <cfif Not IsImageFile(pathToFile)>
         <cffile action="delete" file="#pathToFile#">
         Error: The uploaded file is not a valid image! <cfoutput>#pathToFile#</cfoutput>
     
     <cfelse> <!--- must have cfelse here ....--->
         Success
        <cfoutput>
			image #uploadResult.serverFile# <img src="#uploadResult.serverFile#">
		</cfoutput>
     </cfif>
 
<cfelse>
 
      <cfoutput>
        <form action="#CGI.SCRIPT_NAME#" method="post" enctype="multipart/form-data">
            <input type="file" name="upload_file"/>
            <input type="submit" name="upload_button" value="Upload222222"/>
        </form>
      </cfoutput>
   
</cfif>

Select allOpen in new window

I will get this error because of this:

result="uploadResult"

Attribute validation error for tag file.  
The tag does not have an attribute called result. The valid attribute(s) are action, charset, accept, destination, filefield, nameconflict, mode, attributes, source, file, variable, output, addnewline.  
 
ColdFusion cannot determine the line of the template that caused this error. This is often caused by an error in the exception handling subsystem
_________________________________________________

I will get this error if I remove result="uploadResult"

Element SERVERFILE is undefined in UPLOADRESULT.  
 
So, I am not sure what to do here?

 
 

The last snippet was tested w/CF9 and works fine.  What version of CF are you using?

_agx_:  Thank you
Now I am able to upload the image to my folder and display the image on the screen.

I will close this question and open new one on how to upload more than one image and rezise them.

I had to remove some of the code because it will not take this "IsImageFile"

so, here what I am able to have.


<cfif IsDefined('FORM.upload_button')>
      <!--- upload to current directory by default --->
      <cfset targetDirectory = ExpandPath('.')&"\LoadImages\">

      <cffile nameconflict="overwrite" action="upload"
              destination="#targetDirectory#"
             filefield="FORM.upload_file" />
   
      <cfset pathToFile = targetDirectory &"/"& CFFILE.serverFile>

        <cfoutput>
                  image #CFFILE.serverFile# <img src="LoadImages/#CFFILE.serverFile#">
            </cfoutput>

 
</cfif>  

Thank you

it will not take this "IsImageFile"

Yeah that was added for security. But unfortunately it requires CF8+.  You should check this list and see which ones you can apply to 7 (or whatever version you're using)
Tips for Secure File Uploads with ColdFusion
http://www.petefreitag.com/item/701.cfm