I'm having a problem trying to use AJAX (with the Prototype framework) with
the cffile tag to upload files to the server. The problem seems to be
related to the fact that the enctype attribute of the upload form must be
specified with the value of multipart/form-data. That specification requires
that the form be posted (as opposed to "get"). Also, the cffile tag
attribute filefield accepts the value entered into the file form field but
when I use AJAX to pass the value to the action page with the cffile tag it
does not work.
Here is my form:
<form action="action.cfm" method="post" name="upload_form"
enctype="multipart/form-data" id="upload_form">
<input type="file" name="filepath" id="filepath" /><br />
<input type="submit" name="upload" id="upload" value="Submit" />
</form>
That is simple. Here is my AJAX (also very simple):
Event.observe(window, 'load', init, false);
function init() {
Event.observe('upload_form', 'submit', uploadNow);
}
function uploadNow(e){
$("upload").disabled=false;
$("statusmsg").innerHTML = '<img src=\"images/ajax-loader.gif\" />';
var pars = 'fpath=' + $F('filepath');
var myAJAX = new Ajax.Request('action.cfm', {
method:'post',
onSuccess:function(){
$('status').innerHTML = '<p>File Upload Complete</p>';
},
parameters: pars
});
};
All that does is when the upload_form form button is clicked it runs the
uploadNow() JavaScript function. The uploadNow() function does some display
(a sexy ajax loader animated gif), then it assigns the form field "filepath"
to a variable called "fpath" and then posts that variable to the action
page.
Here is the action page:
<cffile accept="image/jpg" action="upload"
destination="C:\wwwroot\steadfast\www\images\" result="ustatus"
filefield="fpath" nameconflict="makeunique">
<cfoutput>#ustatus.serverFileName#</cfoutput>
The cffile tag looks for a filefield called "fpath". For some reason it is
not getting that. I also tried changing the AJAX to pass the variables with
a method of "get" instead of "post" and then added the following to the top
of the action page:
<cfset form.fpath = url.fpath>
This does not work either. Does anyone have any ideas on how to get this to
work?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
ColdFusion 8 - Build next generation apps
today, with easy PDF and Ajax features - download now
http://download.macromedia.com/pub/labs/coldfusion/cf8_beta_whatsnew_052907.pdf
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:287311
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
