Image Gallery: Manipulate and Update

modifying multiple images at one time

Page 1 of 1

9 Replies - 2481 Views - Last Post: 03 March 2009 - 01:25 PM Rate Topic: -----

#1 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Image Gallery: Manipulate and Update

Post icon  Posted 24 February 2009 - 09:57 AM

Man, I hate to get back into this one, but the client has requested an addition. I decided to create a whole new post/topic because this has taken a slightly different direction from the original post.

A brief update. The pages that follow (gallery.cfm, and action.cfm) build a dynamic image gallery with a handful of form fields that perform various tasks, such as rotation, deletion, and adding a caption. Works very well, but the client wants more, which is cool because it helps me to learn.

What I want to add to the form of each image is a drop down menu with four categories which will update the database for each image. Basically the user selects one of the categories for each image and upon submit the database updates the category for each image. I have the code in place as I suspect it should work but I am not having any result. I get a 500 error which tells me nothing. Please check out the code, and I greatly appreciate any tips, tricks, or ideas. Thanks!

gallery.cfm
<CFPARAM name="tc" default="0">
<CFPARAM name="StartRecord" default="1">

<html>
<head>

   <script language="Javascript"> 
   function PopupPic(sPicURL) { 
	 window.open( "lg_img.cfm?"+sPicURL, "",  
	 "resizable=0,HEIGHT=100,WIDTH=100"); 
   } 
   </script>
<LINK href="style.css" rel="stylesheet">
</head>

<body>
<p> </p>
<cfquery name="getdetails" datasource="#datasource#">
SELECT thumb,imgID,caption
FROM gallery
</cfquery>

<cfinclude template="prev_next.cfm">
<table width="650" align="center">

<cfoutput> 
				
				<form method="post" name="modifySelected" action="action.cfm" enctype="multipart/form-data">
				<cfset counter=0>
				
				<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
				
				<cfif tc eq 0>
					  <tr bordercolor="000">
				</cfif>
					
					<td <cfif #columndisplay# is 3> width="33%"<cfelse>width="25%"</cfif>>
				
				<cfset counter = counter + 1>
				
				<div id="style">
							 
					<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" height="56" width="75"					 alt="Click for Large Image"></a><p><div id="caption">#caption#</div><p>Select your modifications...
					
									  
				<fieldset class="radio">
				<label for="nochange">
						<input type="radio" name="imageAction_#counter#" value="No Change" checked> No Change				
						</label>
					<label for="ninety">
						<input type="radio" name="imageAction_#counter#" value="90"> 90					
						</label>
					<label for="oneeighty">
						<input type="radio" name="imageAction_#counter#" value="180"> 180					
						</label>
					<label for="delete">
						<input type="radio" name="imageAction_#counter#" value="Delete"> Delete					
						</label>
					<label for="captionradio">
						<input type="radio" name="imageAction_#counter#" value="Add Caption"> Add caption					
						</label>
					<label for="addcaption">
						<input type="text" name="imageCaption_#counter#"> 
						</label>
[color=#FF0000]<!--This is the new drop down menu-->
<br>Assign Category:
					<SELECT NAME="category">						
			<OPTION name="imageCategory_#counter#" VALUE="1">Khakis</OPTION>
						<OPTION name="imageCategory_#counter#" VALUE="2">Blue Shirts</OPTION>
						<OPTION name="imageCategory_#counter#" VALUE="3">Reserves</OPTION>
						<OPTION name="imageCategory_#counter#" VALUE="4">Civilians</OPTION>						
		 </SELECT>[/color]						
						<!--- store the image id in a hidden field --->
						 <input type="hidden" name="imgID_#counter#" value="#imgID#">						 
					
				</fieldset>
							   
				</div>
					 </td>
					<cfset tc=#tc#+1>
				
					<cfif tc eq #columndisplay#>
						<!--- if tc equals columndisplay (set at 3) then close the table row and reset tc to 0--->				
						</tr>
						<cfset tc=0> 
					</cfif>
				
				</cfloop>				 
				
				<!--- store the total number of fields to use in action page--->
				<input type="hidden" name="totalFields" value="#counter#">
				
				<input name="Submit" type="submit" value="Modify Selected Data" class="submit"></br>
				
				</form>
				
						 
				<a href="../FlexFileUpload.html" target="_self">Return to Upload Module</a></br>
				<a href="../flash_gallery/ncdoc_photo.html" target="_self">View Image Gallery</a></p>
				
</cfoutput>
								
</table>
							
</body>
</html>



action.cfm
<cfif structKeyExists(Form, "totalFields")>

	<!--- loop through each set of fields --->
	
   <cfloop from="1" to="#form.totalFields#" index="counter">
   
   <cfif structKeyExists(form, "imageAction_"& counter)>

			 <!--- get the selected action, caption and image ID --->
			 
			<cfset selectedAction = form["imageAction_"& counter]>		
			<cfset newCaption = form["imageCaption_"& counter]>				   
			<cfset imgID = form["imgID_"& counter]>	   
			<cfset newCategory = form["imageCategory_"& counter]>
			<!--- then perform the selected action ....--->
			
			<cfquery name="modify" datasource="#datasource#">
				   SELECT image FROM gallery
				WHERE imgID = #imgID#
			   </cfquery>
			<!---in my situation #dir# is a variable defined in my application.cfm as a relative path to the folder where i store images--->
			<cfswitch expression="#selectedAction#">
				 <cfcase value="90">
					   <cfimage action="rotate"
						angle="90"
						source="#dir##modify.image#"
						destination="#dir##modify.image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="180">
					   <cfimage action="rotate"
						angle="180"
						source="#dir##modify.image#"
						destination="#dir##modify.image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="Delete">
				 
					   <cfquery name="qDelete" datasource="#datasource#">
						DELETE FROM gallery
						WHERE imgid = #imgid#
						</cfquery>
					   
					   <cffile action="delete"
						   file="#uploads##modify.image#"/>
   
						   <cffile action="delete"
						   file="#uploads_thumb##modify.image#"/>
						
				 </cfcase>
				 <cfcase value="Add Caption">
					   <cfquery name="InsertCaption" datasource="#datasource#">
						  UPDATE gallery 
						  SET caption = '#newCaption#'
						  WHERE imgID = #imgID#
						   </cfquery>
				 </cfcase>
[color=#FF0000]<!---This is the new code to evaluate the drop down menu selection--->
<cfcase value="1">
					   <cfquery name="changeCategory" datasource="#datasource#">
						  UPDATE gallery 
						  SET albumID = '#newCategory#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				 </cfcase>
				 <cfcase value="2">
					   <cfquery name="changeCategory" datasource="#datasource#">
						  UPDATE gallery 
						  SET albumID = '#newCategory#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				 </cfcase>
				 <cfcase value="3">
					   <cfquery name="changeCategory" datasource="#datasource#">
						  UPDATE gallery 
						  SET albumID = '#newCategory#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				 </cfcase>
				 <cfcase value="4">
					   <cfquery name="changeCategory" datasource="#datasource#">
						  UPDATE gallery 
						  SET albumID = '#newCategory#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				 </cfcase>[/color]
			</cfswitch>

		</cfif>
   </cfloop>
</cfif>

<cfinclude template="gallery.cfm">



Is This A Good Question/Topic? 0
  • +

Replies To: Image Gallery: Manipulate and Update

#2 sansclue  Icon User is offline

  • D.I.C Regular

Reputation: 29
  • View blog
  • Posts: 316
  • Joined: 21-November 07

Re: Image Gallery: Manipulate and Update

Posted 24 February 2009 - 10:27 AM

View Postmidasxl, on 24 Feb, 2009 - 08:57 AM, said:

I get a 500 error which tells me nothing.


Stupid question, but did you disable Internet Explorer's "Friendly" messages so it does not mask the underlying errors?
http://support.microsoft.com/kb/294807

(I ask because am not sure if you mean an IE HTTP 500 error or a 500 error from ColdFusion's JRUN server)
Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: Image Gallery: Manipulate and Update

Posted 25 February 2009 - 06:25 AM

View Postsansclue, on 24 Feb, 2009 - 09:27 AM, said:

Stupid question, but did you disable Internet Explorer's "Friendly" messages so it does not mask the underlying errors?
http://support.microsoft.com/kb/294807


Hello Sansclue, thanks again for your assistance. Sorry to drag you back into this mess. I disabled the "friendly" messages as you suggested, thanks for the tip. In the half dozen or so changes I have attempted since then, I am now no longer receiving the 500 internal server error.

After adding the new form field (<select name="newCategory">) I performed a cfdump on the form fields and I am seeing all the form fields except "newCategory". It shows up in the list of fieldnames in the top row, but does not appear on the left vertical column of fieldnames/values.

Here is the form. I guess first I need to verify that something is actually being passed to the action.cfm from this form field. Must be something to do with how I am naming the tags???

<label for="newCategory">
<SELECT NAME="newCategory">						
						<OPTION name="imageCategory_#counter#" VALUE="1">Khakis</OPTION>
						<OPTION name="imageCategory_#counter#" VALUE="2">Blue Shirts</OPTION>
						<OPTION name="imageCategory_#counter#" VALUE="3">Reserves</OPTION>
						<OPTION name="imageCategory_#counter#" VALUE="4">Civilians</OPTION>						
		 </SELECT>
</label>



Thanks again!
Was This Post Helpful? 0
  • +
  • -

#4 sansclue  Icon User is offline

  • D.I.C Regular

Reputation: 29
  • View blog
  • Posts: 316
  • Joined: 21-November 07

Re: Image Gallery: Manipulate and Update

Posted 25 February 2009 - 08:05 AM

View Postmidasxl, on 25 Feb, 2009 - 05:25 AM, said:

<SELECT NAME="newCategory">
<OPTION name="imageCategory_#counter#" VALUE="1">Khakis</OPTION>
<OPTION name="imageCategory_#counter#" VALUE="2">Blue Shirts</OPTION>
<OPTION name="imageCategory_#counter#" VALUE="3">Reserves</OPTION>
<OPTION name="imageCategory_#counter#" VALUE="4">Civilians</OPTION>
</SELECT>


I suspect you are thinking it is more complex than it really is ;-) It sounds like the new option would be handled almost exactly like "Add Caption". So use that code as a guide:

1) Add another radio button to each group and set the button value to: "Set Category" (instead of "Add Category")
2) Make the _select list_ name dynamic (not the options).

<SELECT NAME="newCategory_#counter#">
<OPTION VALUE="1">Khakis</OPTION>
<OPTION VALUE="2">Blue Shirts</OPTION>
..... etc....
</SELECT>

The action page should need only slight changes. Retrieve the list value. Add another CFCASE to check for the new action ("Set Category"). Then inside your update, use the #newCategory# column/value instead of caption.

<!---
	 This is the old code. Use this as a base for "Set Category"
--->
<cfcase value="Add Caption">
	  <cfquery name="InsertCaption" datasource="#datasource#">
		   UPDATE gallery
		   SET caption = '#newCaption#'
		   WHERE  imgID = #imgID#
	   </cfquery>
</cfcase>


Was This Post Helpful? 0
  • +
  • -

#5 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: Image Gallery: Manipulate and Update

Posted 25 February 2009 - 12:47 PM

Thanks Sansclue, your suggestions pointed me in the right direction and once again we have a working app.

the form element: (modified to show just the form element in question)
<label for="categoryradio">
						<input type="radio" name="imageAction_#counter#" value="Add Category"> Assign Category
						</label>
					<label for="category">
					<SELECT name="imageCategory_#counter#" style="width: 155px;">						
			<OPTION VALUE="1">Khakis</OPTION>
						<OPTION VALUE="2">Blue Shirts</OPTION>
						<OPTION VALUE="3">Reserves</OPTION>
						<OPTION VALUE="4">Civilians</OPTION>						
					</SELECT>
					</label>



the action.cfm: (modified to show just the items in question)
<cfset newCategory = form["imageCategory_"& counter]>

<cfcase value="Add Category">
					   <cfquery name="assignCategory" datasource="#datasource#">
						  UPDATE gallery 
						  SET albumID = '#newCategory#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				 </cfcase>



I have noticed (and the client has as well) that since everything in the form is now governed by radio buttons, we cannot make multiple manipulations on the same image, i.e. rotate by 90 degrees, AND add a caption, AND assign a category all at once.

When this first started out radio buttons worked great for just the rotation or deletion options for obvious reasons. Now the form elements are laid out in such a manner as to invite the user to perform multiple changes per image at one time.

Don't tell me! I want to tackle this one and figure it out. I will share my findings asap. Thanks for your help on this most current issue, I greatly appreciate it.

Cheers!
Was This Post Helpful? 0
  • +
  • -

#6 sansclue  Icon User is offline

  • D.I.C Regular

Reputation: 29
  • View blog
  • Posts: 316
  • Joined: 21-November 07

Re: Image Gallery: Manipulate and Update

Posted 25 February 2009 - 01:15 PM

View Postmidasxl, on 25 Feb, 2009 - 11:47 AM, said:

Now the form elements are laid out in such a manner as to invite the user to perform multiple changes per image at one time.


Good job!

Yes, that is definitely "doable" :) Let us know how it works out.

Cheers
Was This Post Helpful? 0
  • +
  • -

#7 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: Image Gallery: Manipulate and Update

Posted 03 March 2009 - 09:36 AM

OK, my friends. I am at the end of my rope. I have tried a half dozen things or so and have not been able to figure this thing out. I have tried checkboxes, <CFIF ISDEFINED> statements, etc. No luck.

If someone could just point me in the right direction it may become clear. I do not like to just ask for a solution, so just give me a hint or two. I greatly appreciate your time.

As a recap I need to be able to make multiple manipulations on the same image, i.e. rotate by 90 degrees, AND add a caption, AND assign a category all at once. At this point with all radio buttons in the form I cannot choose more than one.

The form:
<form method="post" name="modifySelected" action="action.cfm" enctype="multipart/form-data">
				<cfset counter=0>
				
				<cfloop query="getdetails" startrow="#startrecord#" endrow="#Displaynext#">
				
				<cfif tc eq 0>
					  <tr bordercolor="000">
				</cfif>
					
					<td <cfif #columndisplay# is 3> width="33%"<cfelse>width="25%"</cfif>>
				
				<cfset counter = counter + 1>
				
				<div id="style">
							 
					<a href="java script:PopupPic('imgid=#getdetails.imgID#')"><img src="#dir##getdetails.thumb#" height="56" width="75" 					alt="Click for Large Image"></a><p><div id="caption">#caption#</div><p>Select your modifications...
					
									  
				<fieldset class="radio">
				<label for="nochange">
						<input type="radio" name="imageAction_#counter#" value="No Change" onclick="java script:document.modifySelected.imageCaption_#counter#.disabled=false" checked> No Change				
						</label>
					<label for="ninety">
						<input type="radio" name="imageAction_#counter#" value="90" onclick="java script:document.modifySelected.imageCaption_#counter#.disabled=false"> 90					
						</label>
					<label for="oneeighty">
						<input type="radio" name="imageAction_#counter#" value="180" onclick="java script:document.modifySelected.imageCaption_#counter#.disabled=false"> 180					
						</label>
					<label for="delete">
						<input type="radio" name="imageAction_#counter#" value="Delete" onclick="java script:document.modifySelected.imageCaption_#counter#.disabled=true"> Delete					
						</label>
					<!--<label for="captioncheckbox">
						<input type="checkbox" name="caption_#counter#" value="Add Caption" onclick="java script:document.modifySelected.imageCaption_#counter#.disabled=false"> Add caption					
						</label>-->
					<label for="addcaption">
						<input type="text" name="imageCaption_#counter#"> 
						</label>
					 <!--<label for="categorycheckbox">
						<input type="checkbox" name="category_#counter#" value="Add Category" onclick="java script:document.modifySelected.imageCaption_#counter#.disabled=false"> Assign Category
						</label>-->
					<label for="category">
					<SELECT name="imageCategory_#counter#" style="width: 155px;">						
						<OPTION VALUE="1">Khakis</OPTION>
						<OPTION VALUE="2">Blue Shirts</OPTION>
						<OPTION VALUE="3">Reserves</OPTION>
						<OPTION VALUE="4">Civilians</OPTION>						
					</SELECT>
					</label>
										
						<!--- store the image id in a hidden field --->
	 					<input type="hidden" name="imgID_#counter#" value="#imgID#">						 
					
				</fieldset>
							   
				</div>
	 				</td>
					<cfset tc=#tc#+1>
				
					<cfif tc eq #columndisplay#>
						<!--- if tc equals columndisplay (set at 3) then close the table row and reset tc to 0--->				
						</tr>
						<cfset tc=0> 
					</cfif>
				
				</cfloop> 				
				
				<!--- store the total number of fields to use in action page--->
				<input type="hidden" name="totalFields" value="#counter#">
				
				<input name="Submit" type="submit" value="Modify Selected Data" class="submit"></br>
				
				</form>



The action page:
<cfif structKeyExists(Form, "totalFields")>

	<!--- loop through each set of fields --->
	
   <cfloop from="1" to="#form.totalFields#" index="counter">
   
   <!---if totalFields is 6 this will loop through 6 times and assign 1-6 to counter successively--->

		<!--- then, if one of the buttons was selected, which no change is by default --->
		
		<cfif structKeyExists(form, "imageAction_"& counter)>
		
			 <!--- get the selected action, caption and image ID --->
			 <!--- in the example below, selectedAction = the value of the checked radio 
			 button with the name "imageAction_"& counter--->
			<cfset selectedAction = form["imageAction_"& counter]>		
			<cfset newCaption = form["imageCaption_"& counter]>
			<cfset imgID = form["imgID_"& counter]>
			<cfset newCategory = form["imageCategory_"& counter]>
						
			<!--- then perform the selected action ....--->
			
			<cfquery name="modify" datasource="#datasource#">
   				SELECT image FROM gallery
				WHERE imgID = #imgID#
   			</cfquery>
			<!---in my situation #dir# is a variable defined in my application.cfm as a relative path to where i store images--->
			<cfswitch expression="#selectedAction#">
				 <cfcase value="90">
					   <cfimage action="rotate"
						angle="90"
						source="#dir##modify.image#"
						destination="#dir##modify.image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="180">
					   <cfimage action="rotate"
						angle="180"
						source="#dir##modify.image#"
						destination="#dir##modify.image#"
						overwrite="yes"/>
				 </cfcase>
				 <cfcase value="Delete">
				 
					   <cfquery name="qDelete" datasource="#datasource#">
						DELETE FROM gallery
						WHERE imgid = #imgid#
						</cfquery>
					   
					   <cffile action="delete"
   						file="#uploads##modify.image#"/>
   
   						<cffile action="delete"
   						file="#uploads_thumb##modify.image#"/>
						
				 </cfcase>
				 </cfswitch>
				 <cfif isdefined("modifySelected.imageCaption_#counter#")>
				 
				 <!--- <cfcase value="Add Caption"> --->
				 
					   <cfquery name="InsertCaption" datasource="#datasource#">
						  UPDATE gallery 
						  SET caption = '#newCaption#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				  </cfif>
				  
				 <!--- </cfcase> --->
				 <!--- <cfcase value="Add Category"> --->
				 
				 <cfif isdefined("modifySelected.imageCategory_#counter#")>
					   <cfquery name="assignCategory" datasource="#datasource#">
						  UPDATE gallery 
						  SET albumID = '#newCategory#'
						  WHERE imgID = #imgID#
	   					</cfquery>
				   </cfif>
				   
				 <!--- </cfcase> --->
								  
			</cfif>
   </cfloop>
</cfif>



Thank you for your talents!
Was This Post Helpful? 0
  • +
  • -

#8 sansclue  Icon User is offline

  • D.I.C Regular

Reputation: 29
  • View blog
  • Posts: 316
  • Joined: 21-November 07

Re: Image Gallery: Manipulate and Update

Posted 03 March 2009 - 12:28 PM

View Postmidasxl, on 3 Mar, 2009 - 08:36 AM, said:

If someone could just point me in the right direction it may become clear. I do not like to just ask for a solution, so just give me a hint or two. I greatly appreciate your time.


I think you just have some of the variable references wrong. For example, using a query name "modifySelected" instead of FORM.

<cfif isdefined("modifySelected.imageCategory_#counter#")>


(EDIT: Sorry, that posted before I was finished)

Your form looks fine. Just use the right scope to extract the values. It might also help to put each set of actions in a different clause. Something like this:

   <cfloop from="1" to="#form.totalFields#" index="counter">
	<!--- you will need the id for all actions ... --->
		<cfset imgID = form["imgID_"& counter]>
	
	<!--- if they checked one of the rotate or delete radio buttons --->
		<cfif structKeyExists(form, "imageAction_"& counter)>
		... do rotate or delete code here ....	  
		</cfif>
	
	<!--- if they checked the box to update the CAPTION --->
	<cfif isdefined(form, "caption_#counter#")> 
		... get the text from the imageCaption text box. Then do the UPDATE query
			... Be sure to use the FORM scope to retrieve the text:  
			... something like:   FORM["imageCaption_#counter#"]
	</cfif>
	
	<!--- if they checked the box to update the CATEGORY--->
	<cfif isDefined(form, "category_#counter#")>
		... get the value from the imageCategory select list. Then do the UPDATE query 
			... Be sure to use the FORM scope to retrieve the selected ID
			... something like:   FORM["imageCategory_#counter#"]
	</cfif>
   </cfloop>




View Postsansclue, on 3 Mar, 2009 - 11:24 AM, said:

It might also help to put each set of actions in a different clause.


... or just use your current code, but correct the variables scopes. I think that is your main problem.

This post has been edited by sansclue: 03 March 2009 - 12:26 PM

Was This Post Helpful? 0
  • +
  • -

#9 midasxl  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 193
  • Joined: 03-December 08

Re: Image Gallery: Manipulate and Update

Posted 03 March 2009 - 12:56 PM

Quote

... or just use your current code, but correct the variables scopes. I think that is your main problem.


Well, I feel stupid.

in the following...


<cfif isdefined("modifySelected.imageCategory_#counter#")>




...I was using some example code that read ("FORM.name_of_form_field"), so I thought FORM meant the name of my form! Oh well, live and learn.

That did the trick once again. All those things I tried and I was simply overlooking a simple error. Works great. Thanks again Sansclue, you are very kind.

Cheers!
Was This Post Helpful? 0
  • +
  • -

#10 sansclue  Icon User is offline

  • D.I.C Regular

Reputation: 29
  • View blog
  • Posts: 316
  • Joined: 21-November 07

Re: Image Gallery: Manipulate and Update

Posted 03 March 2009 - 01:25 PM

View Postmidasxl, on 3 Mar, 2009 - 11:56 AM, said:

...I was using some example code that read ("FORM.name_of_form_field"), so I thought FORM meant the name of my form! Oh well, live and learn.

That did the trick once again. All those things I tried and I was simply overlooking a simple error. Works great. Thanks again Sansclue, you are very kind.


Yes, that one gets _everyone_ the first time they use it. It is usually a mildly harrowing experience. After which you never forget it ;-)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1