Coldfusion & Uploadify Script: Coldfusion, CF, Javascript, jQuery

Coldfusion & Uploadify Script

Ive download a script called Uploadify, which is a nice little jQuery file upload with progress bar script. it uses a file in the background to upload the file. What im stuck with, is getting the script to return the filename after upload.

The script itself is set to autoupload, and the upload.cfm it points to is:

<cfscript>
thisPath = ExpandPath("*.*");
thisDirectory = GetDirectoryFromPath(thisPath);
FileDir = thisDirectory & "uploads/";
</cfscript>

<cfif not DirectoryExists(FileDir)>
<cfdirectory action="create" directory="#FileDir#" >
</cfif>

<cffile action="upload"
filefield="fileData"
destination="#FileDir#"
nameconflict="makeunique">
1

The trouble is, it appears that any form of <cfset var=cffile.serverfile> is ignored. I tried setting session.fname but on my form page, i click upload, the file is uploaded, then i submit, and session.fname doesnt exist and for the life of me i cant fathom out how to get the filename :(

Any thoughts??

uploadify can be d/l from www.uploadify.com

My code uses exactly as per demo, just uses uploadify.cfm to process instead of uploadify.php

The actual file upload etc etc all works, i just cant get the filename for when i submit the form.

Many thanks in advance

J

Instant Access to this Solution

Plus...

30 Day FREE access, no risk, no obligation

Collaborate with the world's top tech experts

Unlimited access to our exclusive solution database

Never be left without tech help again

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

"The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.

"Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin

"Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

uploadify's built-in onComplete() function accepts, among other things, the return from your upload script (upload.cfm). you can call your own custom function in onComplete method to do whatever you want with data returned from upload.cfm, i.e. append the uploaded file name to a hidden form field.

see attached code for sample.

you can significantly expand my example code to include returning other data from upload.cfm script (e.g. an array of errors, if any) which you can then use in various ways in uploadify (e.g. display upload error messages, keep/delete files in/from the queue depending on upload success/failure, create a custom file extension checker instead of using uploadify's one, prevent uploadify from automatically removing uploaded files from queue and allow user to remove uploaded files if necessary, etc etc etc).

Azadi

<!--- main page code --->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test-cf-uploadify</title>
<script type="text/javascript" src="uploadify/jquery-1.3.2.min.js"></script> 
<script type="text/javascript" src="uploadify/swfobject.js"></script>
<script type="text/javascript" src="uploadify/jquery.uploadify.v2.1.0.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
  $('#uploadify').uploadify({ 
    'uploader':  'uploadify/uploadify.swf', 
    'script':    'upload.cfm', 
    'folder':    'uploads', 
    'cancelImg': 'uploadify/cancel.png',
    'scriptAccess': 'always', // this is required for testing locally
    'multi': true,
    'auto': true,
    'onComplete': function(e, qid, objFile, r, data) {return updateFilelist(r);} //call our updateFilelist() function on successful completion of upload
  }); 
});
updateFilelist = function(name) {
  if (name != "") { // if filename returned from upload.cfm is not "" (empty string)
    var fl = $("#uploadedfiles");
    if (fl.val().length > 0) {// add uploaded filename to our hidden form field
      fl.val(fl.val() + "," + name);
    } else {
      fl.val(name);
    }
  }
  return true;
}
</script>
</head>
<body>
<cfdump var="#form#">
<br />
<form name="f1" id="f1" method="post" action="">
<input type="hidden" name="uploadedfiles" id="uploadedfiles" value="" /><!--- this hidden form field will contain a comma-delimited list of uploaded files, which you can process on the form's action page as necessary --->
<div id="uploadify"></div>
<br />
<input type="submit" name="submitbtn" value="submit" />
</form>
</body>
</html>
 
 
<!--- upload.cfm page code --->
<cfsetting enablecfoutputonly="yes"><!--- enable cf output only so only uploaded file name is returned, with no extra whitespace --->
<cfparam name="request.f" default=""><!--- create a var this script will return --->
<cfif len(trim(form.filedata))><!--- only run if a file has been posted --->
<cftry><!--- try to 'upload' the file using cffile --->
<cffile action="upload" filefield="filedata" destination="#getdirectoryfrompath(getcurrenttemplatepath())#uploads" nameconflict="makeunique">
<cfset request.f = cffile.serverfile><!--- set return var to uploaded filename as on server --->
<cfcatch><cfset request.f = ''></cfcatch><!--- catch any errors and set return var to empty string if any --->
</cftry>
<cfoutput>#request.f#</cfoutput><!--- return the uploaded filename to calling page --->
</cfif>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:

Select all Open in new window

Question

Coldfusion & Uploadify Script

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

Coldfusion

CF

Javascript

jQuery

ColdFusion Application Server

Cold Fusion Markup Language

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press