Shaun Mccran

My digital playground

11
M
A
Y
2011

Handling CFfile upload 'accept' file type errors

I was working on a system recently that allowed a user to upload images onto the server. It was restricted to files types of images, more specifically 'jpeg' and 'gif' files.

This is easily done with the 'accept' parameter, as documented in the ColdFusion documentation:

view plain print about
1Accept:
2
3Limits the MIME types to accept. Comma-delimited list. For example, the following code permits JPEG and Microsoft Word file uploads:
4accept = "image/jpg, application/msword"
5
6The browser uses the file extension to determine file type.

It is important to note here that it is the browser uses the file extension, so renaming an exe to jpg would fool it entirely.

Issues arise when you don't handle an invalid file upload in a friendly manner. In this case when a user tried to upload an incorrect file type they saw a nasty unformatted error message stating that the request could not be processed as the file was the wrong Mime type.

You cannot tell what the file type is until you attempt to upload it, so wrap your cffile tags in a simple try-catch and handle any errors in the same fashion as you normally would, I.E. by handling the system message and instead displaying a nice, user friendly message that doesn't sound like it was written by robots.

view plain print about
1<cftry>
2
3<cffile action="upload" destination="#request.uploadPath#" fileField="form.new_image" accept="image/jpeg, image/gif" nameConflict="overwrite">
4
5<cfcatch>
6
7    <cfset attributes.errors.type = 'error'>
8    <cfset attributes.errors.message = "The type of file you have tried to upload is not allowed, please select a jpg or gif.">
9    <cfset request.continue = false>
10
11</cfcatch>
12
13</cftry>

07
M
A
Y
2010

ImageCFC losing file permissions on image manipulation

This article deals with a work around for a problem I had been experiencing with the imageCFC ( http://www.opensourcecf.com/imagecfc/ ) open source project. When resizing an image the file permissions were being lost on the edited file. This meant that the server operating system could not read or serve up the file to the browser.

I've been using imageCFC as I have a variety of coldfusion server versions (7 and 8), and I like the fact that in the resize method you can specify the maximum size for the width and height, and it will resize down to that size, and keep the aspect ratio of width-to-height.

[ More ]

06
N
O
V
2009

Issues dealing with large text files? Use a file splitter App!

I've been dealing with bulk data recently, CSV files of around 500mb or more. These can seriously stress out your pc. In the process of trying to write data import scripts I found an application that has proven its worth a few times over. This application allows you to split text files at points of your choosing.

File Splitter Pro, from wonderwebware. It doesn't look amazing, and it has a relatively simple interface, but after going through three or four alternatives that for the most part couldn't even open a 500mb csv file this has come through every time. What I really like though is the function that allows you to select N number of lines and move them to another file.

There is a trial version available too:

http://wonderwebware.com/file-splitter-pro/

(P.S I don't get commission or anything.)

14
O
C
T
2009

Uploading an image and previewing the thumbnail in one hit

A recent piece of functionality required a user to be able to upload an image, and view a thumbnail of that image alongside all the other related details that they were entering (item specific data etc).

After having a look through several forums it seemed that people's opinions were split on whether this could be accomplished using Ajax at all. So I decided to go old school and use an iFrame. I'm not a big fan of frames in any incarnation, but in this case I was willing to make an exception.

So firstly there is an upload form. It is a pretty standard ColdFusion form. Just remember when uploading a file to set the enctype="multipart/form-data". Also the submit button does not submit the form, it fires a JavaScript function 'changeFrame()'. The JavaScript function sets the target of the form submission to the iFrame, and then submits it.

view plain print about
1<div>
2    <iframe id="uploadFrame" name="uploadFrame" src="action.cfm" height="110" width="90" scrolling="no" frameborder="0"></iframe>
3    
4<form name="uploader" action="action.cfm" method="post" enctype="multipart/form-data">
5        <input type="file" name="image" size="5">
6        <input type="button" name="action" value="Upload" onclick="changeFrame()"/>
7    </form>
8</div>
9
10<s/cript>
11function changeFrame()
12    {
13        document.getElementById('uploader').target = 'uploadFrame';
14        document.getElementById('uploader').submit();
15    }
16</s/cript>

The form submits to the 'action.cfm' template. This template displays a placeholder image thumbnail initially, but when the form is submitted it performs the file upload using cffile, then displays the newly uploaded file instead of the placeholder. Ideally at this point I would like to resize the image with cfimage, but my hosting company is still using ColdFusion 7, so I may have to use a third party tag to do the same.

view plain print about
1<body style="margin: 0;">
2<cfset dest = "webroot/root/tmp/">
3
4<cfif isdefined('form.image')>
5    <cffile action="upload" filefield="form.image" destination="#dest#" nameconflict="makeunique">
6    <cfset variables.img = cffile.clientFile>
7<cfelse>
8    <cfset variables.img = "holder.gif">
9    
10</cfif>
11
12<cfoutput><img src="tmp\#variables.img#" height="100" width="75" border="1"></cfoutput>
13</body>

It is a shame I had to use an iFrame, and it would be really interesting to see if this is possible in a more web 2.0 scripted way.