Solved

Upload ,Update and delete image in coldfusion

Posted on 2009-05-03
4
513 Views
Last Modified: 2013-12-24
Hello experts.
So far i was uploading images and store the values in one table like this:
art_ID   price  img_1 img_2 img_3.
But after the advice from expert duncancumming:
http://www.experts-exchange.com/Software/Server_Software/Web_Servers/ColdFusion/Q_24376009.html
i decided to change my db structur and so i must change my queries too .
So far i can post the code for uploading checking and resing three images and i need help for the Insert Update and Delete queries.
In my example i have three images but in my original page the number of images can be 8 or more.
Any help?

(the DB:
table artikel:
art_ID price user_ID

table images_all (where artimages_id = art_ID)
artimages_id    img_id   img     (relation one tomany)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-7" />

<title>Untitled Document</title>

<cfset errors = "">

 <!--- Upload helper --->

<cfparam name="SERVERFILE1" default="">

<cfparam name="SERVERFILE2" default="">

<cfparam name="SERVERFILE3" default="">

<cfset thumbWidth = 80>

   <cfset thumbHeight = 60>

 

   <cfset newWidth = 300>

   <cfset newHeight = 225>

   

   <cfset bigWidth = 640>

   <cfset bigHeight = 480>

   <!--- expandpath() gets the current

         drive and path of the file we are running --->

<CFSET thispath = expandpath("../images")>

<cfif isdefined ("uploadf1") AND CGI.REQUEST_METHOD IS "POST">

<cfif structKeyExists(form,"foto1") and len(form.foto1)>

  <!--- uploads a file to our website --->

  

  <CFFILE action="upload" filefield="foto1" destination="#thispath#" nameconflict="MAKEUNIQUE" >

    <cfif Lcase(file.ClientFileExt)NEQ "gif"

	      AND Lcase(file.ClientFileExt) NEQ "jpg"

          AND Lcase(file.ClientFileExt) NEQ "jpeg">

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset   errors = errors & "File 1  is not an image file!<br />">

     

     

     <cfelseif file.Filesize GT 500 * 1024>

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset errors = errors & "Image1 size is too big!<br />">

     <cfelse>

    <cfimage name="uploadedImage"

    source="#thispath#/#cffile.serverFile#" >

    <cfimage action="resize"

    height="#newHeight#"

    width="#newWidth#"

    source="#uploadedImage#"

    destination="#thispath#/#cffile.serverFile#"

    overwrite="true"/> 

     

    <cfimage action="resize"

    height="#thumbHeight#"

    width="#thumbWidth#"

    source="#uploadedImage#"

    destination="#thispath#/thumbs/#cffile.serverFile#"

    overwrite="true"/>

    

    <cfimage action="resize"

    height="#bigHeight#"

    width="#bigWidth#"

    source="#uploadedImage#"

    destination="#thispath#/bigsize/#cffile.serverFile#"

    overwrite="true"/>

   <CFSET ServerFile1 = FILE.SERVERFILE></cfif></cfif>

   <!--- Here the insert query --->

   <cfelseif isdefined ("uploadf2") AND CGI.REQUEST_METHOD IS "POST">

<cfif structKeyExists(form,"foto2") and len(form.foto2)>

  <!--- uploads a file to our website --->

  

  <CFFILE action="upload" filefield="foto2" destination="#thispath#" nameconflict="MAKEUNIQUE" >

    <cfif Lcase(file.ClientFileExt)NEQ "gif"

	      AND Lcase(file.ClientFileExt) NEQ "jpg"

          AND Lcase(file.ClientFileExt) NEQ "jpeg">

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset   errors = errors & "File 2  is not an image file!<br />">

     

     

     <cfelseif file.Filesize GT 500 * 1024>

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset errors = errors & "Image2 size is too big!<br />">

     <cfelse>

     <cfimage name="uploadedImage"

   source="#thispath#/#cffile.serverFile#" >

    <cfimage action="resize"

    height="#newHeight#"

    width="#newWidth#"

    source="#uploadedImage#"

    destination="#thispath#/#cffile.serverFile#"

    overwrite="true"/> 

     

    <cfimage action="resize"

    height="#thumbHeight#"

    width="#thumbWidth#"

    source="#uploadedImage#"

    destination="#thispath#/thumbs/#cffile.serverFile#"

    overwrite="true"/>

    

    <cfimage action="resize"

    height="#bigHeight#"

    width="#bigWidth#"

    source="#uploadedImage#"

    destination="#thispath#/bigsize/#cffile.serverFile#"

    overwrite="true"/>

   <CFSET ServerFile2 = FILE.SERVERFILE></cfif></cfif>

   <!--- Here the insert query for the second image--->

   <cfelseif isdefined ("uploadf3") AND CGI.REQUEST_METHOD IS "POST">

<cfif structKeyExists(form,"foto3") and len(form.foto3)>

  <!--- uploads a file to our website --->

  

  <CFFILE action="upload" filefield="foto3" destination="#thispath#" nameconflict="MAKEUNIQUE" >

    <cfif Lcase(file.ClientFileExt)NEQ "gif"

	      AND Lcase(file.ClientFileExt) NEQ "jpg"

          AND Lcase(file.ClientFileExt) NEQ "jpeg">

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset   errors = errors & "File 3  is not an image file!<br />">

     

     

     <cfelseif file.Filesize GT 500 * 1024>

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset errors = errors & "Image3 size is too big!">

     <cfelse>

    <cfimage name="uploadedImage"

    source="#thispath#/#cffile.serverFile#" >

    <cfimage action="resize"

    height="#newHeight#"

    width="#newWidth#"

    source="#uploadedImage#"

    destination="#thispath#/#cffile.serverFile#"

    overwrite="true"/> 

     

    <cfimage action="resize"

    height="#thumbHeight#"

    width="#thumbWidth#"

    source="#uploadedImage#"

    destination="#thispath#/thumbs/#cffile.serverFile#"

    overwrite="true"/>

    

    <cfimage action="resize"

    height="#bigHeight#"

    width="#bigWidth#"

    source="#uploadedImage#"

    destination="#thispath#/bigsize/#cffile.serverFile#"

    overwrite="true"/>

   <CFSET ServerFile3 = FILE.SERVERFILE></cfif></cfif>

   <!--- Here the insert query for the third image--->

   </cfif>

   <!--- here the query that gets the images --->

</head>
 

<body>

<!--- image1 , image2, and image3 are the uploaded images and i need a query to get them. On first page load where i don't have uploaded any image there is a default image on that places :no_image.jpg --->
 

<table width="500">

  <tr>

    <td><input name="imageField1" type="image" class="imageFieldinsert" id="imageField" src="../images/thumbs/<cfoutput>#query.image1#</cfoutput>" width="80" height="60" /><br />

    <input name="foto1" class="textfieldfoto"  id="foto1"type="file"  /><br />

    <input name="uploadf1" type="submit"  id="uploadf1"   value="upload" width="60"  height="30" />

    <input name="Deletimg_1"   type="submit"  id="Deletimg_1" lang="de"  value="Delete"  /></td>

    <td><input name="imageField2" type="image" class="imageFieldinsert" id="imageField" src="../images/thumbs/<cfoutput>#query.image2#</cfoutput>" width="80" height="60" /><br />

    <input name="foto2" class="textfieldfoto"  id="foto2"type="file"  /><br />

    <input name="uploadf2" type="submit"  id="uploadf2"   value="upload" width="60"  height="30" />

    <input name="Deletimg_2"   type="submit"  id="Deletimg_2" lang="de"  value="Delete"  /></td>

  </tr>

  <tr>

    <td><input name="imageField3" type="image" class="imageFieldinsert" id="imageField" src="../images/thumbs/<cfoutput>#query.image3#</cfoutput>" width="80" height="60" /><br />

    <input name="foto3" class="textfieldfoto"  id="foto3"type="file"  /><br />

    <input name="uploadf1" type="submit"  id="uploadf1"   value="upload" width="60"  height="30" />

    <input name="Deletimg_3"   type="submit"  id="Deletimg_3" lang="de"  value="Delete"  /></td>

    <td>&nbsp;</td>

  </tr>

</table>
 

</body>

</html>

Open in new window

0
Comment
Question by:Panos
  • 2
  • 2
4 Comments
 
LVL 16

Accepted Solution

by:
duncancumming earned 500 total points
ID: 24289920
Does the user just upload/resize one image at a time, or would they maybe want to do all 8 at the same time?  

If the latter, I'd say just do it as one form, with 8 file upload fields and one submit button.

Even if you don't do that, all you need to think about is how to do all this in loop.

e.g.


<cfset numImages = 8>
 

<cfif IsDefined("form.submit">

<!--- process form submission --->

	<cfloop index="i" from="1" to="#numImages#">

		<cfif StructKeyExists(form, "image#i#") AND Len(form["image#i#"])>

		<!--- process image upload --->

		

		</cfif>

	</cfloop>

</cfif>

Open in new window

0
 
LVL 16

Expert Comment

by:duncancumming
ID: 24289923
I missed a closing parentheses,
<cfif IsDefined("form.submit">

should be
<cfif IsDefined("form.submit")>

0
 
LVL 2

Author Comment

by:Panos
ID: 24290015
Hi duncancumming
It will have more functionallity to have the possibility to upload one by one and all togetther.
I will try to use the loop but i still need the queries to insert update and delete the images  
0
 
LVL 2

Author Comment

by:Panos
ID: 24293247
Hi again duncancumming:
Finally i wrote a code that is working (upload - update -delete img) for one file.
Please can you check it if i could make it more simplier and because i have problems using the index [i] to handle wich file or image it is  please make the changes to use the cfloop function.

<cfset errors = "">

 <!--- Upload helper --->

 <cfparam name="Url.Art_ID" default="1">

<cfparam name="getimage1.img_Text" default="images_1.jpg">

<cfparam name="getimage2.img_Text" default="images_1.jpg">

<cfparam name="getimage3.img_Text" default="images_1.jpg">
 
 

<cfparam name="SERVERFILE1" default="">

<cfparam name="SERVERFILE2" default="">

<cfparam name="SERVERFILE3" default="">

<cfset thumbWidth = 80>

   <cfset thumbHeight = 60>

 

   <cfset newWidth = 300>

   <cfset newHeight = 225>

   

   <cfset bigWidth = 640>

   <cfset bigHeight = 480>

   <!--- expandpath() gets the current

         drive and path of the file we are running --->

<CFSET thispath = expandpath("./images")>

<cfif isdefined ("uploadf1") AND CGI.REQUEST_METHOD IS "POST">

<cfif structKeyExists(form,"foto1") and len(form.foto1)>

                

  <!--- uploads a file to our website --->

  

  <CFFILE action="upload" filefield="foto1" destination="#thispath#" nameconflict="MAKEUNIQUE" >

  <!--- check if is an image --->

    <cfif Lcase(file.ClientFileExt)NEQ "gif"

	      AND Lcase(file.ClientFileExt) NEQ "jpg"

          AND Lcase(file.ClientFileExt) NEQ "jpeg">

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset   errors = errors & "Image 1 is not an image file!<br />">

     

     <!--- check the image size --->

     <cfelseif file.Filesize GT 500 * 1024>

     <cffile  action="delete" file="#thispath#/#cffile.serverfile#">

     <cfset errors = errors & "Image 1 is bigger than alowed!<br />">

     <cfelse>

     <!--- check if img1 exist --->

            <cfquery name="getDBimage1" datasource="#request.dsn#">

            SELECT img_Text

            FROM dbo.All_Images

            WHERE img_ID = 1

            AND Artimages_ID = #Url.Art_ID#

            </cfquery>

               <!--- end --->

     <!--- check if there is allready img_1 then delete the file to replace --->

     <cfif getDBimage1.Recordcount NEQ 0>

      <cffile action="delete" file="#thispath#/#getDBimage1.img_Text#">

      <cffile action="delete" file="#thispath#/thumbs/#getDBimage1.img_Text#">

      <cffile action="delete" file="#thispath#/bigsize/#getDBimage1.img_Text#">

     </cfif>

     <!--- end --->

     <!--- resize the file --->

     <cfimage name="uploadedImage"

   source="#thispath#/#cffile.serverFile#" >

    <cfimage action="resize"

    height="#newHeight#"

    width="#newWidth#"

    source="#uploadedImage#"

    destination="#thispath#/#cffile.serverFile#"

    overwrite="true"/> 

     

    <cfimage action="resize"

    height="#thumbHeight#"

    width="#thumbWidth#"

    source="#uploadedImage#"

    destination="#thispath#/thumbs/#cffile.serverFile#"

    overwrite="true"/>

    

    <cfimage action="resize"

    height="#bigHeight#"

    width="#bigWidth#"

    source="#uploadedImage#"

    destination="#thispath#/bigsize/#cffile.serverFile#"

    overwrite="true"/>

    <!--- end --->

   <CFSET ServerFile1 = FILE.SERVERFILE></cfif></cfif>

   <!--- If there is allready img1 in DB then replace it --->

   <cfif getDBimage1.Recordcount NEQ 0>

   <cfquery name="updateimg_1" datasource="#request.dsn#">

   Update dbo.All_images

   SET img_text = '#ServerFile1#'

   WHERE Artimages_ID = <cfqueryparam value="#URL.Art_ID#" cfsqltype="cf_sql_numeric"> 

   AND  img_ID = <cfqueryparam value="1" cfsqltype="cf_sql_numeric">

   </cfquery>

   <!--- end --->

   <cfelse>

   <!--- If there is isn't img1 in Db then insert ---> 

   <cfquery name="imageupload" datasource="#request.dsn#">

    Insert into All_images (Artimages_ID,img_ID,img_text)

    values (#Url.art_id#, 1,'#ServerFile1#')

</cfquery>

<!--- end --->

</cfif>

</cfif>

<cfif isdefined ("Deletimg_1")>

           <cfquery name="getDBimage1" datasource="#request.dsn#">

            SELECT img_Text

            FROM dbo.All_Images

            WHERE img_ID = 1

            AND Artimages_ID = #Url.Art_ID#

            </cfquery>

<!--- Delete the img1 --->

    <cffile action="delete" file="#thispath#/#getDBimage1.img_Text#">

    <cffile action="delete" file="#thispath#/thumbs/#getDBimage1.img_Text#">

    <cffile action="delete" file="#thispath#/bigsize/#getDBimage1.img_Text#">

   <!--- end --->

   <!--- Delete img1 in DB ---> 

    <cfquery name="DeleteImg1"  datasource="#request.dsn#">

    DELETE From All_images

    WHERE Artimages_ID = <cfqueryparam value="#URL.Art_ID#" cfsqltype="cf_sql_numeric"> 

    AND  img_ID = <cfqueryparam value="1" cfsqltype="cf_sql_numeric"> 

    </cfquery>

  </cfif>

  

  <!--- After all get the img_1 if it exists --->

<cfquery name="getimage1" datasource="#request.dsn#">

SELECT img_Text

FROM dbo.All_Images

WHERE img_ID = <cfqueryparam value="1" cfsqltype="cf_sql_numeric"> 

AND Artimages_ID = <cfqueryparam value="#URL.Art_ID#" cfsqltype="cf_sql_numeric"> 

</cfquery>
 

<cfif getimage1.img_Text EQ "">

 <cfset image1 = 'images_1.jpg'>

 <cfelse>

 <cfset image1 = getimage1.img_Text>

 </cfif>

<!--- end --->
 

<CFIF errors NEQ "">

<CFOUTPUT>

      

            <CFLOOP list="#errors#" index="the_error"  delimiters="|">

                  <li>#the_error#</li><br />

            </CFLOOP>

     

</CFOUTPUT>

</CFIF>

<br />

<form action="#CGI.SCRIPT_NAME#" method="post" enctype="multipart/form-data" name="Form1" id="Form1">

<table width="500">

  <tr>

    <td><input name="imageField1" type="image" class="imageFieldinsert" id="imageField" src="images/thumbs/<cfoutput>#image1#</cfoutput>" width="80" height="60" /><br />

    <input name="foto1" class="textfieldfoto"  id="foto1"type="file"  /><br />

    <input name="uploadf1" type="submit"  id="uploadf1"   value="upload" width="60"  height="30" />

    <input name="Deletimg_1" type="submit"  id="Deletimg_1" value="Delete"  <cfif getimage1.img_Text EQ "">disabled="disabled" </cfif> /></td>

  </tr>

</table>

<input name="submit" type="submit" />

</form>

Open in new window

0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now