Upload an image to my site

Hi,

I need a good example of how to upload an image to my website some kind of tutorial.
what type of filed I should store the image.

the image should get uploaded to a folder and displayed on the screen.

I need any ideas or samples
lulu50Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
_agx_Connect With a Mentor Commented:
So, I am not sure what to do here?

Hmm.. maybe older versions of CF didn't support the "result" attribute? But you could still use the #cffile# scope. If you're using an older version, try this:

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

      <!--- do the upload --->
      <cffile nameconflict="overwrite" action="upload"
              destination="#targetDirectory#"
             filefield="FORM.upload_file" />
   
     <!--- if it's not a valid image, delete the file and show an error --->
	<cfset pathToFile = targetDirectory &"/"& CFFILE.serverFile>
    <cfif Not IsImageFile(pathToFile)>
         <cffile action="delete" file="#pathToFile#">
         Error: The uploaded file is not a valid image! <cfoutput>#pathToFile#</cfoutput>
     <cfelse>
         Success
        <cfoutput>
			image #CFFILE.serverFile# <img src="#CFFILE.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>

Open in new window

0
 
_agx_Commented:
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>

Open in new window

0
 
lulu50Author Commented:
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.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
_agx_Commented:
Sure.  After a successful upload use imageResize(). But get the upload working first.
0
 
lulu50Author Commented:
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.
0
 
lulu50Author Commented:
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>
0
 
lulu50Author Commented:
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>
0
 
lulu50Author Commented:
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
0
 
_agx_Commented:
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>

Open in new window

0
 
lulu50Author Commented:
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?

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

0
 
lulu50Author Commented:
_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>  
0
 
lulu50Author Commented:
Thank you
0
 
_agx_Commented:
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
0
All Courses

From novice to tech pro — start learning today.