Thank you. But I would like to stick closely to the code that I am using.
Maybe I need to rephrase the question, getting the most pertinant answered first.
1. Based on the code below: where in my code snippet do I write the file destination to save first the main image, then the thumb?
The folder for the main images: "images/staffimages/mainim
2. I need to update an existing employee record with the paths of both the thumb and the main image. the database is crownford, the table is employees, the fields that I would like to update are bioimage, and biothumb Where in the code do I right the paths to the database record
So nothing is missed, I am giving all the code relating to this question. Please let me know anyone needs anything else.
Thank you in advance
<!--- This is the index page where the app starts and ends.
How it works:
1. User starts on this page, then clicks on the "upload" link to upload an image for the employee.
2. User is taken to the upload.cfm page, which shows the specific employee name in variables.pageTitle. browses for the image, then clicks upload.
3. User is rediredted to action.cfm where the upload is verified that it exists, then resized. A thumbnail image is then created.
4. Main image is saved to the "images/staffimages/mainimages/uploadedimage.jpg the thumbnail image is saved to the "images/staffimages/thumbs/uploadedimage_thumb.jpg
5. File paths are then updated to the specific employee record in the database named crownford, table named employees, tablerows bioimage and biothumb, respectively.
6. User is then redirected back to the staffindex.cfm where the newly uploaded image should now be showing. (the thumbnail image) --->
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getAllBios"
returnvariable="qBios">
</cfinvoke>
<!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>
<cfmodule template="../tags/headtag.cfm" pagetitle="Staff Index">
<link href="../staffBioStyles.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<cfset variables.pageTitle="Main Template Page">
<cfinclude template="includes/header.cfm">
<div id="mainContent">
<div class="mainContentContentWrapper">
<cfif qBios.RecordCount IS 0>
<h4>No data was returned by this query.</h4>
<cfelse>
<table border="1">
<tr>
<th width="73" nowrap="nowrap" bgcolor="#FF99FF">Employee #</th>
<th width="146" nowrap="nowrap" bgcolor="#FF99FF">First Name</th>
<th width="145" nowrap="nowrap" bgcolor="#FF99FF">Last Name</th>
<th>Image</th>
<th>Upload</th>
<th>Edit</th>
<th>Delete</th>
<th>View Bio</th>
</tr>
<cfoutput query="qBios">
<cfif qBios.CurrentRow mod 2 IS 1>
<cfset bgcolor="white">
<cfelse>
<cfset bgcolor="silver">
</cfif>
<tr bgcolor="#variables.bgcolor#">
<td><span class="style1">#qBios.CurrentRow#</span></td>
<td><span class="style1">#qBios.FirstName#</span></td>
<td><span class="style1">#qBios.LastName#</span></td>
<td><img src="#qBios.biothumb#" alt="" name="bioimage" id="bioimage" /></td>
<td><a href="uploadimage.cfm?idemployees=#qBios.idemployees#">Upload</a></td>
<td><a href="updatebio.cfm?idemployees=#qBios.idemployees#" class="style2">Edit</a></td>
<td><a href="deletebio.cfm?idemployees=#qBios.idemployees#" class="style2">Delete</a></td>
<td><a href="biodetail.cfm?idemployees=#qBios.idemployees#">View Bio</a></td>
</tr>
</cfoutput>
</table>
</cfif>
<h4><a href="insertstaff.cfm">Insert New Staff Bio</a></h4>
</div>
<!-- end #mainContent -->
<!--- <cfdump var="#application#" label="Application Scope"> --->
</div>
<cfinclude template="../includes/footer.cfm">
<!-- end #container -->
</div>
</body>
</html>
<!---//---------------------------------------------------------------------
This is the page for uploading the image --->
<cfif IsDefined("form.firstname")>
<cfinvoke
component="crownfordcf9.Components.BioDetail"
method="updateBio">
<cfinvokeargument name="formData" value="#form#"/>
</cfinvoke>
<cflocation url="staffindex.cfm" addtoken="no">
<cfelse>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getBioByQueryID"
returnvariable="qBio">
<cfinvokeargument name="idemployees" value="#url.idemployees#"/>
</cfinvoke>
</cfif>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getBioByID"
returnvariable="employeeName"
idemployees="#url.idemployees#">
</cfinvoke>
<cfinvoke
component="crownfordcf9.Components.BioDetail"
method="getQBioDetail"
returnvariable="qBioDetail">
<!--- CFC Query --->
<cfinvokeargument name="idemployees" value="#url.idemployees#">
</cfinvoke>
<!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>
<cfmodule template="../tags/headtag.cfm" pagetitle="Staff Index">
<cfparam name="attributes.pagetitle" default="Default Page Title">
<link href="../mockup3Styles.css" rel="stylesheet" type="text/css" />
<link href="../formStyles.css" rel="stylesheet" type="text/css" />
<cfmodule template="../tags/headtag.cfm" pagetitle="Staff Index">
<style type="text/css">
<!--
-->
</style>
<link href="../uploadstylessecondary.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr"
"onload="MM_preloadImages('../images/home_btn_f3.png','../images/home_btn_f2.png','../images/home_btn_f4.png','../images/inventory_btn_f3.png','../images/inventory_btn_f2.png','../images/inventory_btn_f4.png','../images/video_btn_f3.png','../images/video_btn_f2.png','../images/finince_btn_f3.png','../images/finince_btn_f2.png','../images/finince_btn_f4.png','../images/serviceparts_btn_f3.png','../images/serviceparts_btn_f2.png','../images/serviceparts_btn_f4.png','../images/specials_btn_f3.png','../images/specials_btn_f2.png','../images/specials_btn_f4.png','../images/departments_btn_f3.png','../images/departments_btn_f2.png','../images/departments_btn_f4.png','../images/logout_f3.png','../images/logout_f2.png','../images/logout_f4.png')">
<div id="container">
<cfset variables.pageTitle="Upload Image for" & variables.employeeName & "?">
<cfinclude template="includes/header.cfm">
<div id="mainContentContentWrapper">
<!--- This code creates a form with one field where the user enters the image file to upload. --->
<fieldset id="imageuploadfieldset">
<legend class="imageupload">Image Upload</legend>
<cfform action="action.cfm" method="post" enctype="multipart/form-data">
<div id="uploadwrapper">
<h4>Please upload an image:</h4>
<p><cfinput type="file" name="uploadedimage"></p>
<p> <cfinput type="submit" value="Send Image" name="Submit"></p>
<cfinput type="hidden" name="idemployees" value="#qBio.idemployees#">
</div>
</cfform>
</fieldset>
</div>
<cfinclude template="includes/footer.cfm">
</div>
</body>
<!--- This is the action of the upload image page --->
<cfparam name="url.idemployees" default="1">
<cfif IsDefined("form.firstname")>
<cfinvoke
component="crownfordcf9.Components.BioDetail"
method="updateBio">
<cfinvokeargument name="formData" value="#form#"/>
</cfinvoke>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getAllBios"
returnvariable="qBios">
</cfinvoke>
<cfelse>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getBioByQueryID"
returnvariable="qBio">
<cfinvokeargument name="idemployees" value="#url.idemployees#"/>
</cfinvoke>
</cfif>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getBioByID"
returnvariable="employeeName"
idemployees="#url.idemployees#"></cfinvoke>
<cfinvoke
component="crownfordcf9.Components.BioDetail"
method="getQBioDetail"
returnvariable="qBioDetail">
<!--- CFC Query --->
<cfinvokeargument name="idemployees" value="#url.idemployees#">
</cfinvoke>
<cfset thisDir = expandPath(".")>
<!--- Determine whether the form is uploaded with the image. --->
<cfif structKeyExists(form,"uploadedimage") and len(trim(form.uploadedimage))>
<!--- Use the cffile tag to upload the image file. --->
<cffile action="upload"
fileField="uploadedimage"
destination="#thisDir#"
result="fileUpload"
nameconflict="overwrite">
<!--- Determine whether the image file is saved. --->
<cfif fileUpload.fileWasSaved>
<!--- Determine whether the saved file is a valid image file. --->
<cfif IsImageFile("#fileUpload.serverfile#")>
<!--- Read the image file into a variable called myImage. --->
<cfimage action="read" source="#fileUpload.serverfile#" name="myuploadedimage">
<!--- Determine whether the image file exceeds the size limits. --->
<cfif ImageGetHeight(myuploadedimage) gt 1600 or ImageGetWidth(myuploadedimage) gt 1600>
<!--- If the file is too large, delete it from the server. --->
<cffile action="delete"
file="#fileUpload.serverDirectory#/#fileUpload.serverFile#">
<cfoutput>
<p>The image you uploaded was too large. It must be less than 800 pixels wide
and 800 pixels high. Your image was#imageGetWidth(myuploadedimage)#pixels wide
and#imageGetHeight(myuploadedimage)#pixels high.</p>
</cfoutput>
<!--- If the image is valid and does not exceed the size limits,
create a thumbnail image from the source file that is 75-pixels
square, while maintaining the aspect ratio of the source image.
Use the bilinear interpolation method to improve performance.
--->
<cfelse>
<cfset ImageScaleToFit(myuploadedimage,75,75,"bilinear")>
<!--- Specify the new filename as the source filename with
"_thumbnail" appended to it. --->
<cfset newImageName = fileUpload.serverDirectory & "/" &
fileUpload.serverFilename & "_thumbnail." &
fileUpload.serverFileExt>
<!--- Save the thumbnail image to a file with the new filename. --->
<cfimage source="#myuploadedImage#" action="write"
destination="#newImageName#" overwrite="yes">
<!--- section added from staffindex.cfm --->
<div class="mainContentContentWrapper">
<!--- end new section from staffindex.cfm --->
<cfoutput>
<cflocation url="staffindex.cfm" addtoken="no">
<p>Thank you for uploading the image. We have created a thumbnail for
your picture.</p>
<p>
<!--- Display the thumbnail image. --->
<img src="#getFileFromPath(newImageName)#" /></p>
</cfoutput>
</cfif>
<!--- If it is not a valid image file, delete it from the server. --->
<cfelse>
<cffile action="delete"
file="#fileUpload.serverDirectory#/#fileUpload.serverFile#">
<cfoutput>
<p>The file you uploaded,#fileUpload.clientFile#, was not a valid image.</p>
</cfoutput>
</cfif>
</cfif>
</cfif>
<body>
<cfset variables.pageTitle="Main Template Page">
<cfparam name="attributes.pagetitle" default="Default Page Title">
<cfinput type="hidden" name="idemployees" value="#qBio.idemployees#">
</body>
<!--- This is the page I have been trying to work from. This page updates the employee, then redirects back to staffindex.cfm --->
<cfif IsDefined("form.firstname")>
<cfinvoke
component="crownfordcf9.Components.BioDetail"
method="updateBio">
<cfinvokeargument name="formData" value="#form#"/>
</cfinvoke>
<cflocation url="staffindex.cfm" addtoken="no">
<cfelse>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getBioByQueryID"
returnvariable="qBio">
<cfinvokeargument name="idemployees" value="#url.idemployees#"/>
</cfinvoke>
</cfif>
<cfinvoke
component="crownfordcf9.Components.Bios"
method="getBioByID"
returnvariable="employeeName"
idemployees="#url.idemployees#"></cfinvoke>
<cfinvoke
component="crownfordcf9.Components.BioDetail"
method="getQBioDetail"
returnvariable="qBioDetail">
<!--- CFC Query --->
<cfinvokeargument name="idemployees" value="#url.idemployees#">
</cfinvoke>
<!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>
<cfparam name="attributes.pagetitle" default="Default Page Title">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<cfoutput>
<title>#attributes.pagetitle#</title>
</cfoutput>
<link href="../mockup3Styles.css" rel="stylesheet" type="text/css" />
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../images/finalNavBar/navbar.css" rel="stylesheet" type="text/css" />
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
/* Functions that swaps down images. */
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])?args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) { img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr) for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
/* Functions that handle preload. */
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<script language="JavaScript1.2" type="text/javascript" src="../mm_css_menu.js"></script>
<style type="text/css" media="screen">
@import url("../navbar.css");
#updateStaffBtn {
float: left;
}
</style>
<!--- <cfmodule template="../tags/headtag.cfm" pagetitle="Update Bio"> --->
<link href="staffbiostyleupdates.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtrHdr">
<div id="container">
<cfset variables.pageTitle="Update Staff">
<cfinclude template="includes/header.cfm">
<div id="mainContent">
<cfform>
<fieldset id="nameAndTitle">
<legend class="perlegend">Personal Information</legend>
<div class="group1input">
<p>First Name:
<cfinput type="text" name="firstname" value="#qBio.firstname#" maxlength="32">
</p>
<p>Last Name:
<cfinput type="text" name="lastname" value="#qBio.lastname#" maxlength="32">
</p>
</div>
<div class="group2Input">
<p>Department:
<cfinput type="text" name="department" value="#qBio.department#" maxlength="45">
</p>
<p>Title:
<cfinput type="text" name="title" value="#qBio.title#" maxlength="45">
</p>
</div>
</fieldset>
<fieldset id="loginInfo">
<legend id="logininformation">Login Information</legend>
<div class="group1input">
<p>User Name:
<cfinput type="text" name="username" value="#qBio.username#" maxlength="45">
</p>
<p>Password:
<cfinput type="text" name="password" value="#qBio.password#" maxlength="45">
</p>
<p>Permission Level:
<cfinput type="text" name="permissionlevel" value="#qBio.permissionlevel#" maxlength="45">
</p>
</div>
</fieldset>
<fieldset id="phoneAndEmail">
<legend id="phoneemailinfo">Phone & Email</legend>
<div class="group1input">
<p>Home Phone:
<cfinput type="text" name="homephone" value="#qBio.homephone#" maxlength="45">
</p>
<p>Mobile Phone :
<cfinput type="text" name="mobilephone" value="#qBio.mobilephone#" maxlength="45">
</p>
<p>Best Contact Number:
<cfinput type="text" name="contactnumber" value="#qBio.contactnumber#" maxlength="45">
</p>
</div>
<div class="group2Input">
<p>Email Main:
<cfinput type="text" name="email_main" value="#qBio.email_main#" maxlength="45">
</p>
<p>Email Secondary :
<cfinput type="text" name="email_secondary" value="#qBio.email_secondary#" maxlength="45">
</p>
</div>
</fieldset>
<fieldset id="imageEdit">
<legend id="imageedit">Image Upload and Edit</legend>
<div id="bioImgwrapper"> <cfoutput query="qBioDetail">
<p> <img src="#qBioDetail.biothumb#" alt="" /> </p>
</cfoutput> <a href=uploadimage.cfm>Upload</a> </div>
<p> </p>
</fieldset>
<cfinput type="submit" name="updateStaffBtn" id="updateStaffBtn" value="Update Staff">
<cfinput type="hidden" name="idemployees" value="#qBio.idemployees#">
</cfform>
<!-- end #mainContent -->
</div>
<cfinclude template="../includes/footer.cfm">
<!-- end #container -->
</div>
</body>
</html>
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147: 148: 149: 150: 151: 152: 153: 154: 155: 156: 157: 158: 159: 160: 161: 162: 163: 164: 165: 166: 167: 168: 169: 170: 171: 172: 173: 174: 175: 176: 177: 178: 179: 180: 181: 182: 183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205: 206: 207: 208: 209: 210: 211: 212: 213: 214: 215: 216: 217: 218: 219: 220: 221: 222: 223: 224: 225: 226: 227: 228: 229: 230: 231: 232: 233: 234: 235: 236: 237: 238: 239: 240: 241: 242: 243: 244: 245: 246: 247: 248: 249: 250: 251: 252: 253: 254: 255: 256: 257: 258: 259: 260: 261: 262: 263: 264: 265: 266: 267: 268: 269: 270: 271: 272: 273: 274: 275: 276: 277: 278: 279: 280: 281: 282: 283: 284: 285: 286: 287: 288: 289: 290: 291: 292: 293: 294: 295: 296: 297: 298: 299: 300: 301: 302: 303: 304: 305: 306: 307: 308: 309: 310: 311: 312: 313: 314: 315: 316: 317: 318: 319: 320: 321: 322: 323: 324: 325: 326: 327: 328: 329: 330: 331: 332: 333: 334: 335: 336: 337: 338: 339: 340: 341: 342: 343: 344: 345: 346: 347: 348: 349: 350: 351: 352: 353: 354: 355: 356: 357: 358: 359: 360: 361: 362: 363: 364: 365: 366: 367: 368: 369: 370: 371: 372: 373: 374: 375: 376: 377: 378: 379: 380: 381: 382: 383: 384: 385: 386: 387: 388: 389: 390: 391: 392: 393: 394: 395: 396: 397: 398: 399: 400: 401: 402: 403: 404: 405: 406: 407: 408: 409: 410: 411: 412: 413: 414: 415: 416: 417: 418: 419: 420: 421: 422: 423: 424: 425: 426: 427: 428: 429: 430: 431: 432: 433: 434: 435: 436: 437: 438: 439: 440: 441: 442: 443: 444: 445: 446: 447: 448: 449: 450:
by: myselfrandhawaPosted on 2009-08-09 at 19:42:12ID: 25056865
Here you go
I have splitted the parts how you can do,
Ok first click on Upload and you will have this code to upload:
Select allOpen in new window