Document Handling - Hands On 25

gistfile1.md

In this hands on, you are going to create an image file upload. Once the image is uploaded, you are going to resize it to fit specific measurements.

Tags Used: <cffile>, <cfif>, <cfset>

Functions Used: listFindNoCase, getReadableImageFormats, imageScaleToFit, imageWrite, getTempDirectory

1. Open up the /www/admin/content/portfolio/editportfolio.cfm file in your code editor.
2. The first thing that needs to be done is to check that an image has been provided in the form to upload. To do this create a <cfif> tag that checks if the form.image variable has a length. Locate the Image Upload Process comment and add it after.
3. Upload the image onto the server. Once on the server, you can manipulate it however desired. Create a <cffile> tag with the following properties inside the <cfif> tag:
   • action: upload
   • filefield: image
   • destination: #getTempDirectory()#
   • nameconflict: makeunique
4. This tag will upload the file that is in the form field called image and will place it into a temporary directory on the server, making the file name unique if the file already exists on the server. Your code should look similar to this:

   <cfif len(form.image)>
   	<cffile action="upload" filefield="image" destination="#getTempDirectory()#" nameconflict="makeunique" />	
   </cfif>
   

5. Next, confirm that the file that was uploaded is of a file type that can be processed. To do this, create a <cfif> statement that uses the ListFindNoCase function. The first argument of the function will be a call to the getReadableImageFormats function, and the second argument will be the serverFileExt variable in the cffile structure. Your code should look similar to this:

   <cfif listFindNoCase(getReadableImageFormats(),cffile.serverFileExt)>
   </cfif>
   

6. Inside the <cfif> tag you will add the image resize logic. If the checks in the <cfif> have passed, then we know that the image is safe to resize. Inside the <cfif> create a <cfset> tag. In this set tag you are going to read in the image using the imageRead function and set it to the variable name imageObject. Your code should look similar to this:

   <cfset imageObject = imageRead(cffile.serverDirectory & '/' & cffile.serverfile) />	
   

   	</li>
   	<li>
   		Next, call the <span class="code">imageScaleToFit</span> function and pass it the <span class="code">imageObject</span> with the dimensions to resize the image. As the <span class="code">imageScaletoFit</span> function does not return anything, you do not need to assign it to a variable. Add the following line of code below the <span class="code">&lt;cfset></span> tag:
   

   <cfset imageScaleToFit(imageObject,'202','131') />	
   

   	</li>
   	<li>
   		Once the image has been resized, save the image object back to the file system. When writing the file, write it to a location in the web root, rather than a temporary directory, so that it can be displayed to the user. Use the <span class="code">imageWrite</span> function and pass it the <span class="code">imageObject</span> variable and the desired path to where the file should be written. Your code will look similar to this:
   

   <cfset imageWrite(imageObject,expandpath('../../../assets/images/portfolio/#cffile.serverfile#')) />
   

   	</li>
   	<li>
   		Once the file has been written, overwrite the <span class="code">form.image</span> value with the image file value so it can be stored in the database. The name of the image is stored in the <span class="code">cffile</span> structure under the key of <span class="code">serverfile</span>. Your <span class="code">&lt;cfset></span> tag will look similar to this:
   

   <cfset form.image = cffile.serverfile />	
   

   	</li>
   	<li>
   		It is possible that the user has tried to upload a file that is not accepted on the server.  If this occurs we will simply remove the value from the <span class="code">form.image</span> variable.  Before the closing <span class="code">&lt;/cfif></span> on or around line 32, create a <span class="code">&lt;cfelse></span> tag and place the following code inside:
   

   <set form.image='' />
   

   	</li>
   	<li>
   		Your final <span class="code">&lt;cfif></span> block should look similar to this:
   

   <cfif listFindNoCase(getReadableImageFormats(),cffile.serverFileExt)>
   	<cfset imageObject = imageRead(cffile.serverDirectory & '/' & cffile.serverfile) />
   	<cfset imageScaleToFit(imageObject,'202','131') />
   	<cfset imageWrite(imageObject,expandpath('../../../assets/images/portfolio/#cffile.serverfile#')) />
   	<cfset form.image = cffile.serverfile />
   <cfelse>
   	<cfset form.image='' />
   </cfif>	
   

   	</li>
   	<li>
   		Open up the <span class="code">/www/admin/</span> page in a browser and navigate to the portfolio section.
   	</li>
   	<li>
   		Once in the portfolio section click on 'New Portfolio'.
   	</li>
   	<li>
   		Fill in the form and provide an image to be uploaded.
   	</li>
   	<li>
   		Click on 'Submit' to create the new portfolio item.
   	</li>
   	<li>
   		Open up the <span class="code">/www/portfolio.cfm</span> page in your browser and confirm that the new portfolio item is being displayed along with the resized image.
   	</li>
   </ol>