Dreamweaver MX 2004 Extensions - Massimocorner CF Upload
(Page 5 of 8 )
Massimo Foti is surely one of the most prolific and recognized extension developers today. He won the title of “Best Extension Developer” during the Macromedia Best Extension Developer Awards in 2000. CF Upload is only one of the many Dreamweaver extensions committed to speeding up ColdFusion development in Dreamweaver (it was originally designed for Dreamweaver 4). You can download it for free from his personal web site at http://www.massimocorner.com. (On the main page, click on the Ultradev menu option, then the ColdFusion submenu option, and you should find it there.)
We have already seen how, when the action attribute of <cfform> is set to upload, it can be used to provide a mechanism for uploading files to the server. Massimo’s CF Upload server behavior further simplifies the process of creating a file upload form by completing the CFML code for you, and implementing arock-solid validation routine that checks for bad file types.
After you install it, CF Upload is available from the Server Behaviors panel when working with a ColdFusion site in Dreamweaver. To use the CF Upload server behavior, we first require a simple HTML postback form. A postback form (also known as a self-posting form) is nothing more than a form that submits information entered into it to itself. In other words, the same page is responsible for processing the data input and displaying the results.
The form must contain an input field with the type attribute set to file. If CF Upload doesn’t find this, it will promptly warn you to insert it. In addition, if you forget to include or set the enctype attribute of the form tag to multipart/ form-data, or the method attribute to post, a warning dialog will appear and ask if you want CF Upload to fix these for you before inserting the CFML code into the page, as shown in Figure 9-9.
CF Upload warns you if everything is not in place prior to its use and offers to fix any problems it detects.
CF Upload has many options available that mainly replicate the properties of <cffile> when its action attribute is set to upload. In addition to these, you can specify redirection to another page once the uploading process has successfully completed, which comes in handy to give positive feedback to users. The following is a list of settings available in CF Upload:
- Max Size Allowed (KB): Use this to specify the maximum allowed size (in kilobytes) of the file that has been uploaded. The validation process for this feature of CF Upload is the result of a pretty effective combination of CGI variables and HTTP header controls.
- Form Field: You select the form and the file field to apply CF Upload to.
- Destination Directory: Here you specify the pathname of the directory where the uploaded files will be stored on the server.
- Handle Name Conflicts: Taking advantage of the nameConflict attribute of the <cffile> tag, this option lets you decide which action ColdFusion should take when the name of a newly uploaded file conflicts with the name of a file already stored on the server. Allowed options are: Make Unique Name, Report an Error, and Overwrite.
- After Uploading, Go To: Use this to redirect users to another page after a successful file upload.
- Allowed Type: This series of checkboxes lets you choose which file MIME types are allowed for upload to the server.
If something goes wrong during the upload process, CF Upload will display an error message to the users. This message varies depending on the main cause of the problem.
In Chapter 6 we described how to use Dreamweaver to create a CFML-driven dynamic image gallery. In the following example, we show how you can efficiently apply CF Upload to that example to create an upload form more quickly.
The following example assumes you have gone through “Creating aDynamic Image Gallery in ColdFusion” section in Chapter 6, or at least have downloaded the code for it. We assume here that you have the cfbook.mdb database and that it is successfully registered as a data source. In addition to that, make sure your cfbook site root folder contains the gallery directory and its images subfolder.
- In the Ch9 folder, create a new file and call it success.cfm. Enter Image has been successfully uploaded to the server., then save the file and close it.
- Now create another file in the same location and call it cfupload.cfm. Insert a blank form into the page in Design View, as in the last example.
- Next, insert a file field into the form by choosing Form Objects -> File Field from the Insert menu.
- Finally, insert a Submit button into the form, as before. Your upload form is ready, and should look like Figure 9-10.
Figure 9-10. Your form, ready to have CF Upload applied to it
We will now proceed to apply the CF Upload server behavior to the form. From the Server Behaviors panel, choose + -> Massimocorner -> File -> File Upload. You should be presented with the dialog box in Figure 9-11.
Figure 9-11. The CF Upload File Upload dialog box
In the dialog box, increase the Max Size Allowed (KB) value from 30 to 100, leave the Form Field drop-down menu as it is, and set the Destination Directory as gallery/images. Leave Make Unique Name as the rule for the Handle Name Conflicts option, and make sure the only allowed type for upload is Images.
The allowed values for the Handle Name Conflicts option originate from the nameConflict attribute of the ColdFusion <cffile> tag. For a complete description of the available actions, please consult the ColdFusion CFML Reference documentation or refer to Chapters 3 and 5 of this book.
Because CF Upload works smoothly in combination with standard server behaviors, we won’t redirect users to another page now, but will first use the Insert Record server behavior to add the value returned from CF Upload as an entry to our database. Providing a URL in the After Uploading, Go To field at this point will result in no data being entered into the database, so leave it empty and click OK to exit this dialog box and apply the behavior.
Now let’s finish off our page. Choose Server Behaviors -> + -> Insert Record. The Insert Record dialog box will pop up, as shown in Figure 9-12.
Figure 9-12. The Insert Record dialog box
In this dialog box, select cfbook as the Data Source. From the Columns box, select “‘ImageFullSrc’ Gets Value...”, and select FORM.file in the Value pop-up menu. Finally, click on the Browse button, browse to the success.cfm file, then click the OK button to close the dialog box and apply the behavior.
Now test the page in a browser, and try to upload images. If the image upload process and database insertion is successful, you will be redirected to the success.cfm page; otherwise, an error message will be displayed.
If the upload process is successful, CF Upload will automatically set the value of the FORM variable passed by the file field to the value of the FILE.ServerFile variable, facilitating its use with other server behaviors.
 This chapter is from ColdFusion Web Development with Macromedia Dreamweaver MX 2004, by Jen and Peter deHaan et al. (Apress, 2004, ISBN: 1-59059-237-9). Check it out at your favorite bookstore today.
Buy this book now. |
Next: Dreamweaver’s Server Behavior Builder >>
More Web Authoring Articles
More By Apress Publishing
/ 42 
