Coldfusion Ajax Jquery form

How to pass form field value to page via ajax

Page 1 of 1

2 Replies - 6107 Views - Last Post: 19 February 2010 - 12:48 PM Rate Topic: -----

#1 Guest_Mark*


Reputation:

Coldfusion Ajax Jquery form

Posted 16 February 2010 - 07:02 AM

Hello and thanks for your time. I am stuck on a seemingly simple bunch of logic. I have a form that an end user utilizes to choose a file from their local machine. 

<form name="PowUploadForm" enctype="multipart/form-data" method="post" action="">
<input name="selectedFile" id="selectedFile" type="file" />
<input name="uploadFile" type="submit" id="uploadFile" value="Process Actions"/>
</form>


Then a block of jquery/ajax that triggers via .click function:

$(document).ready(function(){	
$("##uploadFile").click( function() {
			if(document.PowUploadForm.selectedFile.value==""){
			$('##error').show();//shows a div with an error message in it
		return false;
		}else{
					var usrFile = $("##selectedFile").val();
					var param = {powFile:usrFile};
					$.ajax({
						   type: "POST",
						   url: "new_rename_save_pow.cfm",
						   dataType: "text",
						   data: param,
						   error: function() {
							   alert('Ajax Error');
						   },
						   success: function(response){
							   $("##uploadSuccess").html(response);
						   }
					});
		}
});
});


Then I have .cfm page with the upload logic:


<cfset protectedPath = "/usr/local/pow_upload/">
<cffile action="upload" 
  fileField ="  "
  destination="#protectedPath#"
  nameconflict="makeUnique"
  mode="644" />
<!---This next bit of html will be returned and displayed in the 'uploadSuccess' div--->
<h3>Thank You!</h3>
<p>File Uploaded successfully</p>


As you may notice the fileField attribute of the cffile tag is empty because I am not sure what goes in there. I've tried a variety of things: #File.ServerFile#, selectedFile, powFile, usrFile, param, etc. nothing is working. I do not get any errors but nothing is returned to my target div ('uploadSuccess'), and the chosen file is not uploaded. Any tips will be greatly appreciated. Thanks!

Is This A Good Question/Topic? 0

Replies To: Coldfusion Ajax Jquery form

#2 xheartonfire43x  Icon User is offline

  • D.I.C Regular

Reputation: 46
  • View blog
  • Posts: 454
  • Joined: 22-December 08

Re: Coldfusion Ajax Jquery form

Posted 16 February 2010 - 07:46 AM

First of the fileField is the name of the field you are using for the file input.
Second, if I remember correctly there is something special you need to do to do a AJAX fileUpload. Take a look at This page. It may be of some help.
Was This Post Helpful? 0
  • +
  • -

#3 midasxl  Icon User is online

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 182
  • Joined: 03-December 08

Re: Coldfusion Ajax Jquery form

Posted 19 February 2010 - 12:48 PM

Alright, I am back with a solution. Xheartonfire43x pointed me in the right direction and I have come up with the following:


<html>

<script>
function startUpload(){//onsubmit hide the form and show the upload process animation pic
      document.getElementById('upload_process').style.visibility = 'visible';
      document.getElementById('wrapper').style.visibility = 'hidden';
      return true;
}

function stopUpload(success){
      var result = '';
      if (success == "true"){
         result = '<div class="msg">THE FILE WAS UPLOADED SUCCCESSFULLY!<\/div>';
      }
      else {
         result = '<div class="emsg">YOU HAVE EXPERIENCED AN ERROR!<\/div>';
      }
      document.getElementById('upload_process').style.visibility = 'hidden';
      document.getElementById('wrapper').innerHTML = result;
      document.getElementById('wrapper').style.visibility = 'visible';
	 return true;   
}
</script>

<body>

<form name="uploadForm" method="post" enctype="multipart/form-data" action="save_pow.cfm" target="upload_target" onsubmit="startUpload();"/>

<p id="upload_process">Uploading File...<br/><br /><br /><img src="ajax_load.gif" /><br/></p>
<!-- go get yourself an animated gif -->
<div id="wrapper">

<input class="selectedFile" name="selectedFile" id="selectedFile" type="file" /><br>
<input name="uploadFile" type="submit" id="uploadFile" class="uploadFile" value="Upload File"/>

</div>

<iframe id="upload_target" name="upload_target" src="" style="width:0;height:0;border:0px solid ##fff;"></iframe>

</form>

</body>

</html>


And then on my action page which is a .cfm page:


<cfset protectedPath="path to the directory where you want to upload your files">

<!--- Upload new file --->
<cffile action="upload" 
  fileField ="selectedFile"
  destination="#protectedPath#"
  nameconflict="makeUnique"
  mode="664" />

<cfif FileExists("#protectedPath##File.ServerFile#")>
	<cfset ajaxFlag="true">
    <cfelse>
	<cfset ajaxFlag="false">
    </cfif>
    
    <cfoutput>
	<script language="javascript" type="text/javascript">window.top.window.stopUpload('#ajaxFlag#');</script>
    </cfoutput>


After the file is successfully uploaded and the logic checks to see if it exists, the stopUpload function is called and given the value of the ajaxFlag, which governs the result message on the main page.

I have to admit I do not know exactly why this works, and my original code attempt does not, but it works fine and I will continue to research it.

Thanks!
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1