Uploading images to my website server - error saving to server

Discussion in 'Programming' started by lespaul00, Nov 22, 2007.

0
Page 2 of 3
  1. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #21
    I tried added the debug code (in blue below). I also tried changing the form name (in red below). I still get the error...


    <body>

<h1>Submit a recipe </h1>
<cfset maxFileSize = (150 * 1024)>

<cfform action="cf_upload.cfm" method="post" name="[COLOR="Red"]upload_form[/COLOR]" enctype="multipart/form-data" id="upload_form">
	Your display name:
	<cfinput name="DISPLAY_NAME" 
			type="text" 
			value="" 
			size="25" 
			maxlength="200" 
			required="true" 
			message="Please enter a display name!"/>

	<p>Browse for your file you wish to upload:
	<p>
	<cfinput name="ul_path" 
			type="file" 
			id="ul_path" 
			size="30"
			required="true"
			message="Please select a file to upload!">
	<cfinput type="submit" name="upload_now" value="submit">
	</p>
</cfform>

<cfif isdefined("[COLOR="red"]form.upload_form[/COLOR]")>
[COLOR="Blue"]       <!--- show what was posted before any errors can occur --->
      FORM scope contains:
      <cfdump var="#FORM#">
      URL scope contains:
      <cfdump var="#URL#">[/COLOR]
	<!--- ie 150KB.  1024 bytes == 1KB --->
	<cfset maxFileSize = (150 * 1024)>

	<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">
	<cfif CFFILE.fileSize LTE maxFileSize>
		<p>Your file was successfully uploaded! It will be reviewed. Thank you! </p>
	<cfelse>
		<!--- Message if one of the criteria above was not met--->
		Sorry your file is too big! 
		<cffile action="delete" file="#CFFILE.serverDirectory#\#CFFILE.serverFile#">
	</cfif>
</cfif>
<CFQUERY DATASOURCE="mydatabase" NAME="UPLOAD">
		   INSERT INTO UPLOAD(DISPLAY_NAME, FILE_NAME)
		   VALUES
		   ( 
		   <cfqueryparam value="#form.DISPLAY_NAME#" 
				  cfsqltype="cf_sql_varchar">, 
		   <cfqueryparam value="#CFFILE.serverFile#" cfsqltype="cf_sql_varchar"> 
		   )
</CFQUERY>
</body>
    Code (markup):


    Error:
     
    lespaul00, Nov 23, 2007 IP
  2. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #22
    Yes, but what was the output of the <cfdump>'s?
     
    cfStarlight, Nov 23, 2007 IP
  3. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #23
    I apologize if I seem a bit slow... I only see the typical coldfusion error page. I do not see anything called the "dump" to check for more information. Where should this be appearing?

    The following information is meant for the website developer for debugging purposes.  

Error Occurred While Processing Request  
Element DISPLAY_NAME is undefined in FORM.  
 
  
ColdFusion cannot determine the line of the template that caused this error. This is often caused by an error in the exception handling subsystem.
    Code (markup):
     
    lespaul00, Nov 24, 2007 IP
  4. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #24
    No, you're not slow. The error is not appearing because the code doesn't even get that far.

    You need to move the query inside the <cfif> code. Otherwise, CF tries to evaluate the form field variables before the form is submitted (ie before the fields exist). That causes an error.

    

... other code ...

<cfif CFFILE.fileSize LTE maxFileSize>

[COLOR="Red"]   Put the cfquery code here 
[/COLOR]

   <p>
    Your file was successfully uploaded! It will be reviewed. Thank you!    
   </p>
<cfelse>
   <!--- Message if one of the criteria above was not met--->
   Sorry your file is too big! 
    <cffile action="delete" 
            file="#CFFILE.serverDirectory#\#CFFILE.serverFile#">
</cfif>

... other code ...
    Code (markup):
     
    cfStarlight, Nov 24, 2007 IP
  5. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #25
    Also, the "name" of the form isn't submitted as a field. So change this code 

    
[COLOR="Red"]<cfif isdefined("form.upload_form")>[/COLOR]
...
    Code (markup):
    Back to what you had before (ie using the name of the submit button)

    
<cfif isdefined("form.upload_now")>
...
    Code (markup):
     
    cfStarlight, Nov 24, 2007 IP
  6. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #26
    Ok, gotcha. Yeah, that corrected the error.

    I do still have two issues:

    1. I am still able to upload a 2.4 mb file.
    2. The DISPLAY_NAME and FILE_NAME do not insert into my database.

    Here is the current code:

    <body>

<h1>Submit a recipe </h1>
<cfset maxFileSize = (150 * 1024)>
<h1>Submit a recipe </h1>
<cfform action="cf_upload.cfm" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form">
	Your display name:
	<cfinput name="DISPLAY_NAME" 
			type="text" 
			value="" 
			size="25" 
			maxlength="200" 
			required="true" 
			message="Please enter a display name!"/>

	<p>Browse for your file you wish to upload:
	<p>
	<cfinput name="ul_path" 
			type="file" 
			id="ul_path" 
			size="30"
			required="true"
			message="Please select a file to upload!">
	<cfinput type="submit" name="upload_now" value="submit">
	</p>
</cfform>

<cfif isdefined("form.upload_now")>
       <!--- show what was posted before any errors can occur --->
      FORM scope contains:
      <cfdump var="#FORM#">
      URL scope contains:
      <cfdump var="#URL#">
	<!--- ie 150KB.  1024 bytes == 1KB --->
	<cfset maxFileSize = (150 * 1024)>

	<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">
	<cfif CFFILE.fileSize LTE maxFileSize>
	
<CFQUERY DATASOURCE="mydatabase" NAME="UPLOAD">
		   INSERT INTO UPLOAD(DISPLAY_NAME, FILE_NAME)
		   VALUES
		   ( 
		   <cfqueryparam value="#form.DISPLAY_NAME#" 
				  cfsqltype="cf_sql_varchar">, 
		   <cfqueryparam value="#CFFILE.serverFile#" cfsqltype="cf_sql_varchar"> 
		   )
</CFQUERY>

   <p>
    Your file was successfully uploaded! It will be reviewed. Thank you!    
   </p>
<cfelse>
   <!--- Message if one of the criteria above was not met--->
   Sorry your file is too big! 
    <cffile action="delete" 
            file="#CFFILE.serverDirectory#\#CFFILE.serverFile#">
</cfif>
</cfif>

</body>
    Code (markup):
     
    lespaul00, Nov 24, 2007 IP
  7. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #27
    Ah ha!!

    I had an error with the name of my file.

    So, I tried uploading a file below 150kb, and got this (I assume this is the dump):

    FORM scope contains: struct 
DISPLAY_NAME Test1  
FIELDNAMES DISPLAY_NAME,UL_PATH,UPLOAD_NOW  
UL_PATH C:\CFusionMX7\runtime\servers\coldfusion\SERVER-INF\temp\wwwroot-tmp\neotmp47152.tmp  
UPLOAD_NOW submit  
URL scope contains: struct [empty] 

Your file was successfully uploaded! It will be reviewed. Thank you!
    Code (markup):
    I then checked my database, and got a record inserted with the following:

    DISPLAY_NAME = Test1 (which is correct)
    FILE_NAME = Upload17 (which is not correct - should have been "test1.jpg")


    Then, this is what I get with a file size of 2.4mb:

    FORM scope contains: struct 
DISPLAY_NAME Nick - 2.4mb  
FIELDNAMES DISPLAY_NAME,UL_PATH,UPLOAD_NOW  
UL_PATH C:\CFusionMX7\runtime\servers\coldfusion\SERVER-INF\temp\wwwroot-tmp\neotmp47151.tmp  
UPLOAD_NOW submit  
URL scope contains: struct [empty] 
Sorry your file is too big!
    Code (markup):
    Then, I checked my database, and it was not there (which is correct).



    Next steps:

    1. I assume I can take out the dump coding. This would prevent it from showing up for the user after they submit an image.
    2. Need to tweak the coding so it returns the actual file name the person submitted, rather than "Upload" followed by a number.
    3. Server validation (still need to understand this).

    Am I right with these goals?
     
    lespaul00, Nov 24, 2007 IP
  8. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #28
    Yes, exactly.

    You mean the value inserted into the database (ie #CFFILE.ServerFile#) is "Upload17.jpg" instead of "test1.jpg"?

    Since you're using <cffile action="upload" nameconflict="makeunique" ...>

    If I upload a file named "test1.jpg" and the "/upload/" directory already contains a file by that name, CF is going to give my image a unique name. So the final value of #CFFILE.ServerFile# may not be "test1.jpg". You can see all available variables either by doing <cfdump var="#CFFILE#"> after you upload or looking at the list here:

    http://livedocs.adobe.com/coldfusion/6.1/htmldocs/tags-p35.htm


    Yes
     
    cfStarlight, Nov 24, 2007 IP
  9. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #29
    I'm just going to take the nameconflict code out (the link you posted says it's optional).


    So what is server validation? How should I get started on this?
     
    lespaul00, Nov 25, 2007 IP
  10. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #30
    I don't think you want to do that. If you take it out, CF will throw an error. Meaning a visitor won't be able to upload their image if that file name already exists on the server.

    Did you take a look the CFFILE variables in the link I posted? It has a number of client variables (like original file name, etc). It sounds like you might want to save both? You could have two columns in your table

    SERVER_FILE_NAME (name of the file on the Server)
    CLIENT_FILE_NAME (name on file on client computer)

    It just means using server side code to validate the information submitted in the form fields. If the form field data passes, then do the upload+insert. Otherwise display an error message.

    For this page you're trying to validate:
    1. Display name is not empty
    2. That a valid "image" file was uploaded
    3. The image name is not empty

    You can use the string functions trim() and len() to check for empty strings. http://www.adobe.com/livedocs/coldfusion/7/htmldocs/00000369.htm

    You'll have use cftry/cfcatch to test for empty/no file uploaded or invalid file type uploaded. Check the recent topics. I just posted code for how to catch an "invalid file type" error for someone else.
     
    cfStarlight, Nov 25, 2007 IP
  11. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #31
    I always use both client and server side validation. The client side javascript gives the visitor some instant feedback. The server side validation does the "real" validation and can't be bypassed or disabled like javascript. Never trust user supplied information ;)

    Here's an article that talks about some of mx7's built in form field validation capabilities
    http://www.adobe.com/devnet/coldfusion/articles/intro_cf7_02.html
     
    cfStarlight, Nov 25, 2007 IP
  12. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #32

    I created these fields in my database. I then checked out the link you sent again. I found a "parameter" to get the name of the file that the client uploads:

    Where do I place this "parameter" in the code to get it to save in the CLIENT_FILE_NAME field of my database?
     
    lespaul00, Nov 25, 2007 IP
  13. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #33
    In your cfquery.
     
    cfStarlight, Nov 25, 2007 IP
  14. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #34
    I'm having a problem. If I make "uploading an image" optional, i get an error!

    <cfform action="submit2.cfm" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form">
		<table width="95%">		
		<tr>
		<td width="20%" valign="top">
	<p>Your display name:</td>
			<td width="25%" valign="top">
	  <cfinput name="DISPLAY_NAME" 
			type="text" 
			value="" 
			size="25" 
			maxlength="200" 
			required="true" 
			message="Please enter a display name!"/>
	  <br /></td><td width="20%" valign="top">
	    <p>Recipe name:</p></td><td width="25%" valign="top">
	  <cfinput name="RECIPE_NAME" 
			type="text" 
			value="" 
			size="25" 
			maxlength="200" 
			required="true" 
			message="Please enter a recipe name!"/></td>
	  <br />
		<tr>
		<td width="20%" valign="top"><p>Email address:</p></td><td width="25%">
    <cfinput name="EMAIL" 
			type="text" 
			value="" 
			size="25" 
			maxlength="200" 
			required="true" 
			message="Please enter your email address!"/></td>
</p>

		</p></tr>
	</table>
	<p>
	<p>Browse for your file you wish to upload: <br />
	  <cfinput name="ul_path" 
			type="file" 
			id="ul_path" 
			size="30"
			[COLOR="Red"]required="true"[/COLOR]
			message="Please select a file to upload!">
	  <cfinput type="submit" name="upload_now" value="submit">
    </p>
</cfform>

<cfif isdefined("form.upload_now")>
	<!--- ie 150KB.  1024 bytes == 1KB --->
	<span class="style5">
	<cfset maxFileSize = (150 * 1024)>

	<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">
	<cfif CFFILE.fileSize LTE maxFileSize>
	  
	  <CFQUERY DATASOURCE="mydatabase" NAME="UPLOAD">
	    INSERT INTO UPLOAD(DISPLAY_NAME, SERVER_FILE_NAME, CLIENT_FILE_NAME, RECIPE_NAME)
	    VALUES
	    ( 
	    <cfqueryparam value="#form.DISPLAY_NAME#" cfsqltype="cf_sql_varchar">
	    , 
	    <cfqueryparam value="#CFFILE.serverFile#" cfsqltype="cf_sql_varchar">
	    , 
	    <cfqueryparam value="#CFFILE.clientFile#" cfsqltype="cf_sql_varchar">
	    ,
	    <cfqueryparam value="#form.RECIPE_NAME#" cfsqltype="cf_sql_varchar">
	    )
      </CFQUERY>
    </cfif>
	</span>
	<cfif CFFILE.fileSize LTE maxFileSize><p class="style5">
    Your file was successfully uploaded! It will be reviewed. Thank you!    
   </p>
<cfelse>
   
   <span class="style12">
   <!--- Message if one of the criteria above was not met--->
   Sorry your file is too big! 
    
    <cffile action="delete" 
            file="#CFFILE.serverDirectory#\#CFFILE.serverFile#">
	</span>
	</cfif>
</cfif>
    Code (markup):
    When I remove the portion in "red" above, I get the following error:

    The form field "ul_path" did not contain a file.  
 
  
The error occurred in C:\CFusionMX7\wwwroot\mywebsite\submit2.cfm: line 99
 
97 : 	<cfset maxFileSize = (150 * 1024)>
98 : 
99 : 	<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">
100 : 	<cfif CFFILE.fileSize LTE maxFileSize>
101 :
    Code (markup):
    How can I make uploading an image optional?
     
    lespaul00, Jan 9, 2008 IP
  15. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #35
    That make sense. If you want the file upload to be optional, you have to change your logic accordingly. Restructure the code to check if a file was supplied. If it was upload it. Otherwise, skip the upload.

    Sorry I don't have time to test this, so expect errors! ;) Also, if you want to insert a NULL when no file was uploaded, you'll need to adjust the cfqueryparam's. You can use something like null="#not len(serverFileName)#" ..

    
<cfif isdefined("form.upload_now")>
	<cfset maxFileSize = (150 * 1024)>
	<cfset serverFileName = "">
	<cfset clientFileName = "">
	<cfset wasFileDeleted = false>
	
	<!--- if a file was supplied, upload it --->
	<cfif len(trim(form.ul_path))>
		<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">
		<cfset serverFileName = CFFILE.serverFile>
		<cfset clientFileName = CFFILE.clientFile>

		<!--- file is too big, delete it --->
		<cfif CFFILE.fileSize GT maxFileSize>
		   <cffile action="delete" file="#CFFILE.serverDirectory#\#CFFILE.serverFile#">
		   <cfset wasFileDeleted = true>
		</cfif>
	</cfif>

	<cfif wasFileDeleted>
	   Sorry your file is too big! 
	<cfelse>		
	  <CFQUERY DATASOURCE="mydatabase" NAME="UPLOAD">
	    INSERT INTO UPLOAD(DISPLAY_NAME, SERVER_FILE_NAME, CLIENT_FILE_NAME, RECIPE_NAME)
	    VALUES
	    ( 
	    <cfqueryparam value="#form.DISPLAY_NAME#" cfsqltype="cf_sql_varchar">
	    , 
	    <cfqueryparam value="#CFFILE.serverFile#" cfsqltype="cf_sql_varchar">
	    , 
	    <cfqueryparam value="#CFFILE.clientFile#" cfsqltype="cf_sql_varchar">
	    ,
	    <cfqueryparam value="#form.RECIPE_NAME#" cfsqltype="cf_sql_varchar">
	    )
      </CFQUERY>
	    Your file was successfully uploaded! It will be reviewed. Thank you!    
	</cfif>	
</cfif>
    Code (markup):
     
    cfStarlight, Jan 10, 2008 IP
  16. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #36
    Thanks! It worked!
     
    lespaul00, Jan 13, 2008 IP
  17. cfStarlight

    cfStarlight Peon

    Messages:
    398
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #37
    Kewl!

    (I don't know why the forums don't allow messages under 10 characters ;)
     
    cfStarlight, Jan 14, 2008 IP
  18. cumupkid

    cumupkid Peon

    Messages:
    12
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #38
    I am trying to be able to upload pictures to an images folder in the site root, and add the information to the mysql database.

    this is probably a very simple thing to do, but I am new to this.

    J.S.
     
    cumupkid, Jan 22, 2008 IP
  19. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #39
    Cfstarlight helped me do it as follows:

    submit.cfm:

    <cfset maxFileSize = (150 * 1024)>
<cfform action="submit.cfm" method="post" name="upload_form" enctype="multipart/form-data" id="upload_form">
		<p>Browse for your file you wish to upload: <br />
	  <cfinput name="ul_path" 
			type="file" 
			id="ul_path" 
			size="30"
			required="true"
			message="Please select a file to upload!">
	  <cfinput type="submit" name="upload_now" value="submit">
    </p>
</cfform>

<cfif isdefined("form.upload_now")>
	<!--- ie 150KB.  1024 bytes == 1KB --->
	<span class="style5">
	<cfset maxFileSize = (150 * 1024)>

	<cffile action="upload" filefield="ul_path" destination="#ExpandPath("/upload")#" accept="image/jpeg, image/gif, image/jpg, image/svg, image/pjpeg, image/pjpg, image/png, image/x-png" nameconflict="makeunique">
	<cfif CFFILE.fileSize LTE maxFileSize>
	  
	  <CFQUERY DATASOURCE="mydatabase" NAME="UPLOAD">
	    INSERT INTO UPLOAD(SERVER_FILE_NAME, CLIENT_FILE_NAME)
	    VALUES
	    ( 

	    <cfqueryparam value="#CFFILE.serverFile#" cfsqltype="cf_sql_varchar">
	    , 
	    <cfqueryparam value="#CFFILE.clientFile#" cfsqltype="cf_sql_varchar">
	    )
      </CFQUERY>
    </cfif>
	</span>
	<cfif CFFILE.fileSize LTE maxFileSize><p class="style5">
    Your file was successfully uploaded! It will be reviewed. Thank you!    
   </p>
<cfelse>
   
   <span class="style12">
   <!--- Message if one of the criteria above was not met--->
   Sorry your file is too big! 
    
    <cffile action="delete" 
            file="#CFFILE.serverDirectory#\#CFFILE.serverFile#">
	</span>
	</cfif>
</cfif>
    Code (markup):

    There's a lot here, and I don't know how familiar you are with Coldfusion yet. So, if you don't understand any of it, i'll break it down for you.

    Essentially you will need a folder called "upload" in your root folder on your server. Also, put your database name in where appropriate. Feel free to ask for more clarification if you need it.

    - Nick
     
    lespaul00, Jan 23, 2008 IP
  20. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #40
    A question back to CfStarlight...

    I already have my image upload such that, a user is restricted to upload a file above a certain size.

    How can I ALSO have the image automatically scale to the size i'd like it displayed on my website? Say, I'd like any uploaded image to be scaled to 200 pixels by 250 pixels. How can I do this? I do not care if the image distorted (because I know it will).

    Thanks!
     
    lespaul00, Jan 23, 2008 IP
Page 2 of 3