• Introduction
  • Introduction
  • Prerequisite Knowledge
  • Server Requirements
  • Components
  • Other Frameworks
  • Getting Started
• Getting Started
  • Installation
  • Hello World
  • Manage Data
  • Validation
  • Multi-Table Program
  • Using the Database
  • Images and Files
  • MVC and Controllers
  • Installation and Generation
• In the Real World
  • Custom Display
  • Tests
  • Custom Logic
  • Email Notices
  • Scheduled Tasks
  • Third Party Integration
  • Using Data in Layouts
• Configuration
  • Configure Site
  • Configure Components
  • Configure Admin Menu
  • Configure Framework Invocation
  • Skin Site
  • File Uploads
  • Custom Tags
• Programs
  • Guidelines
  • Installation
  • Program.cfc
    • config()
    • components()
    • links()
    • install()
• Components
  • Layout Components
  • Records Components
  • Page Controller
  • sebtags
  • com.sebtools Package
• How To / Troubleshooting
  • Reload Components
  • Random, Unsavable Data
  • Automatically Resize Uploaded Images
  • Code Formatting Conventions
  • cf_sebTable pkfield Error
• Change Log
  • Change Log

Images and Files

We completed the "So you want to..." series and created Contact-O-Matic to our client's satisfaction. What more could there be?

Image

As it turns out, after using Contact-O-Matic for a while, our client decides it would be nice to optionally have an image for a contact.

So, let's add an image field:

<table entity="Contact">
	<field fentity="Contact Type" />
	<field name="ContactImage" Label="Image" type="image" folder="images" />
</table>

Now we have defined a field to hold images which will go in the "images" subfolder of the "contacts" folder (which is the default derived from the "entity" attribute). Make sure to refresh ContactOMatic

Next up, let's add the field to the form if our form has fields in the code (otherwise, feel free to skip this step):

<cf_sebForm>
	<cf_sebField name="ContactName">
	<cf_sebField name="ContactTypeID">
	<cf_sebField name="ContactImage">
	<cf_sebField type="Submit/Cancel/Delete">
</cf_sebForm>

Here is our form now:

The form is smart enough to handle the upload and put the file in the appropriate folder (which it finds out from getFieldsStruct. Since we defined it as a type of "image" it will also only accept files that are images.

For every file field (including images), Manager.cfc adds a URL and Path column to the returned query with the URL to the image and file path to the image (respectively). So, code to show a list of all images could look like this:

<cfset qContacts = Application.ContactOMatic.Contacts.getContacts()>
<ul>
<cfoutput query="qContacts">
	<li><img src="#ContactImageURL#" alt="#ContactName#"></li>
</cfoutput>
</ul>

An example img tag HTML might would be:

<img src="/f/contacts/images/Blue_hills.jpg" alt="Blue Hills">

This works great for a while, but several users end up uploading images directly from their cameras - far too big. The client decides he wants images no bigger than 400X400 (of course, he didn't provide pixel measurements, but picked an example image and said "no bigger than that.").

So, we can have the framework (via Manager.cfc) resize any uploaded image to fit inside a 400X400 box. While we're at it, we can optimize JPEGs down to a quality of 90%.

<table entity="Contact">
	<field fentity="Contact Type" />
	<field name="ContactImage" Label="Image" type="image" folder="images" MaxWidth="400" MaxHeight="400" quality="0.9" />
</table>

Once we make this change and refresh ContactOMatic then any image that is uploaded from the form will be sized down to be no bigger than 400X400.

Editing the form with an image looks like this:

Thumbnail

Our client is happy with our image, but now he decides that he wants to display thumbnails for every record on the public page as well. As this could amount to dozens of records on an end-user facing page, we need real thumbnail images, not just images scaled down in HTML. Moreover, a large number of images have already been uploaded.

Fortunately, all we need to do is add a thumbnail field and connect it to our image field:

<table entity="Contact">
	<field fentity="Contact Type" />
	<field name="ContactImage" Label="Image" type="image" folder="images" MaxWidth="400" MaxHeight="400" quality="0.9" />
	<field name="ContactThumbnail" Label="Thumbnail Image" type="thumb" original="ContactImage" folder="thumbs" MaxWidth="60" MaxHeight="60" quality="0.7" />
</table>

Adding this thumbnail field will ensure that every time a new Contact Image is uploaded, a thumbnail is produced from it. Not only that, but it will create a thumbnail from any existing image that doesn't already have one.

While we are at it, we can have our edit form display the thumbnail in place of the full sized image, by adding a "thumbfield" attribute:

<field name="ContactImage" Label="Image" type="image" folder="images" MaxWidth="400" MaxHeight="400" quality="0.9" thumbfield="ContactThumbnail" />

Now the form page can show the thumbnail image in place of the full-sized one:

Other Files

Our client is thrilled, but now he thinks it would be nice to allow an optional vCard for each contact. This should be easy, we just want to make sure not to allow any other type of file. So, we add the following field to the XML:

<field name="VCard" Label="vCard File" type="file" folder="vcards" accept="text/x-vcard" extensions="vcf" />

The "accept" attribute is a comma-delimited list of acceptable mime-types for the file (performed on the server via CFFILE). The "extensions" attribute is a comma-delimited list of allowable file exensions. This is checked both in JavaScript and in server-side code.

Make sure to refresh ContactOMatic and add the field to the form (if you have the fields in your code) and it should provide a file upload field that will only accept vCards:

<cf_sebForm>
	<cf_sebField name="ContactName">
	<cf_sebField name="ContactTypeID">
	<cf_sebField name="ContactImage">
	<cf_sebField name="VCard">
	<cf_sebField type="Submit/Cancel/Delete">
</cf_sebForm>

That's it! We're done. Unless our client thinks of something later...

Next: MVC and Controllers