imageview - Picture Preview page in coldfusion -

i know how upload image file server , show image file page.

but if want preview on confirmation page?

i can generate temp file isn't saved in database file in physical location, if decided hit "no" button. how temp file deleted?

the code below shrinks image , shows on page. creates image within directory, stay there after hit ok or no. no button, while ok naturally submit.

    <!--- make temp image preview --->     <cfset mediapath = expandpath('../images/about')>     <cfif structkeyexists(form,"image") , len(form.image)>        <cffile action="upload"        filefield="image"        destination="#mediapath#"        nameconflict="makeunique">         <cfimage name="uploadedimage"        source="#mediapath#/#file.serverfile#" >        <cfset imagesize = 320>          <cfif uploadedimage.width gt uploadedimage.height>              <cfset percentage = (imagesize / uploadedimage.width)>           <cfelse>              <cfset percentage = (imagesize / uploadedimage.height)>        </cfif>         <cfset newwidth = round(uploadedimage.width * percentage)>        <cfset newheight = round(uploadedimage.height * percentage)>       <!--- show image --->     <cfoutput>        <img src="../images/about/#file.serverfile#" style="height:#newheight#; width:#newwidth#;"> 

i assume may have url passing or sort of cfscript. on return buttons onclick event.

here approach take will.

ok more need should somewhere on image delete problem thing.

here code. broke 2 pages. of course cannot see else going on page , form handling stuff start giving us.

<cfset mediapath = expandpath('../images/about')> 

nice use of structkeyexists() :)

<cfif structkeyexists(form,"image") , len(form.image)> 

here pause , suggest limit uploads .gif, .jpeg, .jpg, .png (your main image types) prevent uploading , everyfile type. added accept parameter below.

<cffile action="upload"     filefield="image"     destination="#mediapath#"     nameconflict="makeunique"     accept="image/*">  <cfimage name="uploadedimage"      source="#mediapath#/#file.serverfile#" > 

ok file uploaded lets seperate concerns

at point ask them if want preview file. if click 'preview' take them preview.cfm page.

then have file name need pass if have nothing else (like id or primary key).

so pulled handy-dandy script out of adobe coldfusion docs on website , going use turn filename 'something else' ;)

<cfscript>  thekey="123abc";  thekey=generatesecretkey("aes")  superdupersecretsodonttell=encrypt(file.serverfile, thekey, "aes", "hex");  </cfscript>   <a href="preview.cfm?filename=#superdupersecretsodonttell#&thekey=#thekey#">let's send piggy!</a> 

and off go preview page...

<cfoutput>    

(pointing up) pagea.cfm (pointing down) pageb.cfm

now have rest of code below , lets pull file based on pass through querystring variable/value pairs.

<cfscript>  iwannaknowthesecret=decrypt(url.filename, url.thekey, "aes", "hex");  </cfscript>  

here pause , suggest limit uploads .gif, .jpeg, .jpg, .png (your main image types) prevent uploading , everyfile type. added accept parameter below.

<cffile action="read" file="#mediapath##iwannaknowthesecret#" variable="uploadedimage">  <cfset imagesize = 320> 

interesting handle here. taking larger of 2 values , using percentage down size. neat.

<cfif uploadedimage.width gt uploadedimage.height>     <cfset percentage = (imagesize / uploadedimage.width)> <cfelse>     <cfset percentage = (imagesize / uploadedimage.height)> </cfif>  <cfset newwidth = round(uploadedimage.width * percentage)> <cfset newheight = round(uploadedimage.height * percentage)> 

then form this:

<form action="" method="post" enctype="multipart/form-data"> current image:  <cfoutput> name: #uploadedimage#<br> <img src="../images/about/#uploadedimage#" style="height:#newheight#; width:#newwidth#;"> </cfoutput>  want remove this?<br> <input type="checkbox"        name="removeimage"         value="1" />: remove logo image</cfif><br />  wnat replace image?<br> <input type="file" name="replacementimage">  (  <input type="hidden"         name="uploadedimage"         value="<cfoutput>#uploadedimage#</cfoutput>">  <input type="submit" value="submit" name="submit"        </form>  <a href="#" onclick="javascript:window.history.back(-1);return false;">cancel , go back</a> 

if continue , want fix image or replace it. submit can use this. delete...

and if replacementimage file filed populated add file.

and there have it...

you seperating concerns. giving improved options. allowing change or no change. giving them out go ever want.

edit: here proof encoding , decoding stuff (if wanted play it:

<cfscript>  thekey="123abc";  thekey=generatesecretkey("aes");  superdupersecretsodonttell=encrypt("monkeytoots", thekey, "aes", "hex");   </cfscript>  <cfoutput><a href="?filename=#superdupersecretsodonttell#&thekey=#thekey#">let's send piggy!</a></cfoutput> <cfif isdefined("url.filename") , isdefined("url.thekey")> <cfscript>  iwannaknowthesecret=decrypt(url.filename, url.thekey, "aes", "hex");  </cfscript>  <cfoutput> #iwannaknowthesecret# </cfoutput> </cfif>