|
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.
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.
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.
|
ColdFusion structures and case sensitivity examples |
Having been using Flex a little more recently I stumbled upon an old issue that I had previously addressed, but it had become second nature, and so I had forgotten about having to learn a workaround in the past. Passing objects from ColdFusion to Flex can be tricky at times, especially as ColdFusion is generally not case sensitive, but Flex is, and this can lead to problems.
I had previously found that how you build your Structure will have an impact the case of the keys. Example one is a Structure built using the traditional dot notation, in a CF 7 and below method:
2 newStruct = structNew();
3 newStruct.starter = "Prawn Salad";
4 newStruct.maincourse = "Roast Chicken";
5 newStruct.desert = "Apple Pie";
6</cfscript>
7
8<cfdump var="#newStruct#" label="Dot notation">
This is the older way of building a Structure, notice how all the keys are uppercase.
The second example is very similar, except that it is using associative array notation, IE brackets to denote the key values, rather than dot notation.
2 newStruct = structNew();
3 newStruct["starter"] = "Prawn Salad";
4 newStruct["maincourse"] = "Roast Chicken";
5 newStruct["desert"] = "Apple Pie";
6</cfscript>
7
8<cfdump var="#newStruct#" label="Struct notation">
Since I originally looked at this ColdFusion 8 (and now 9!) have been released. ColdFusion 8 introduced a new way of creating structures, what casing does this use?
2 starter = "Prawn Salad",
3 maincourse = "Roast Chicken",
4 desert = "Apple Pie"
5} />
6
7<cfdump var="#newStruct#" label="CF 8 method">
It also creates an uppercase structure. I haven't really played around with this method enough to see if there is another way of creating a lowercase structure, so for now I'll be sticking to the older associative array method of creating my structures. That way they are easily transferred as a Flex object.
|
Quotes being changed to question marks using cfsavecontent and MySql |
One of the tables in an online application stores entire html templates in a blob field, this data is pulled out and used to build emails, replacing specific keywords.
I recently needed to update some of this data, but there is not an administration system for it, so a manual SQL script would have to do.
The problem I encountered was that creating a html template as a variable using cfsavecontent and inserting it into MySql was causing all the ' to appear as ?. I read a blog entry based on Coldfusion MX and setting the character encoding in your coldfusion administrator, for each datasource. Or you could do it in the template, like this:
2<cfcontent type="text/html; charset=iso-8859-1">
This didn't seem to work at all, in fact I found that it would error whilst trying to insert the cfsavecontent variable using cfqueryparam. There seemed to be some sort of encoding issue between the two tags.
2Html template code
3<body> etc </body>
4</cfsavecontent>
5<cfquery datasource="#application.dsn#">
6INSERT INTO table (fields)
7VALUES ('#htmlContent#');
8</cfquery>
This didn't work either with Cfqueryparam, or as a non param input. It turns out that you simply need to escape the characters (double them, or use character representations). IE don't use a single quote, use two . In this way the MySql encoding treats the character as a character, rather than a potential command. I still think that this is something that can be fixed by setting the encoding type, but in this case there was a far simpler solution.
|
Lynda.com launches ColdFusion 9 Essential Training |
The online education and training site 'Lynda.com' has just launched its new ColdFusion course.
The course 'ColdFusion 9 Essential Training', looks pretty comprehensive, and covers most topics you could think of, including installation, and using the IDE - ColdFusion Builder. It even has a section on using the new ORM frameworks for ColdFusion 9.