asked on

Upload ,Update and delete image in coldfusion

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:
https://www.experts-exchange.com/questions/24376009/store-uploaded-file-names-in-database-table.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

ASKER CERTIFIED SOLUTION

duncancumming

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

duncancumming

I missed a closing parentheses,
<cfif IsDefined("form.submit">

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

Panos

ASKER

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

Panos

ASKER

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