Menu
I have a small form where I would like to upload a file to my CF Server. I have been able to make this work in the past by submitting my CFFORM via a traditional actionpage. However I would like to upload the file using AJAX instead.
I am receiving an error on my processing page as follows: The cffile action="upload" requires forms to use enctype="multipart/form-data" even though I have defined my form as such.
From google'ng around, I think it may be becasue Cffile requres the filefield attribute, but as there is no form object passed to coldfusion. Possible Similar Issue . I don't really like the solution posted though.
Is there anyway I could get around this error?
Here is my AJAX:
<!---Script to upload file link --->
<cfoutput>
<script>
$(function(){
//Add a new note to a link
$("##upload-file").submit(function(event){
// prevent native form submission here
event.preventDefault();
$.ajax({
type: "POST",
data: $('##upload-file').serialize(),
url: "actionpages/file_upload_action.cfm",
beforeSend: function(){
$('.loader').show();
},
complete: function(){
$('.loader').hide(3000);
},
success: function() {
PopulateFileUploadDiv();
$("##upload").val('');
$("##response").append( "File successfully Uploaded." );
}
});
return false;
});
});
</script>
</cfoutput>
My Form:
<form method="post" name="upload-file" id="upload-file" enctype="multipart/form-data">
<input tabindex="0" size="50" type="file" id="upload" name="upload" accept="image/bmp, image/jpg, image/jpeg, image/tiff, image/gif, image/png, text/richtext, text/plain, text/css, text/html, application/rtf, application/msword, application/x-excel, application/zip, multipart/x-zip, audio/wav" value="Upload an additional file" />
<br />
<input name="submitForm" id="submitForm" type="submit" value="Attach File To Ticket">
</form>
Processing Page:
<!---File Upload Logic --->
<!---CFFile Tag located in template file --->
<!---CFFile code --->
<cffile action="upload" filefield="upload" destination="c:\inetpub\wwwroot\ticket-uploads\" accept="image/bmp, image/jpeg, image/jpg, image/tiff, image/gif, image/png, text/richtext, text/plain, text/css, text/html, text/xml, application/x-zip-compressed, application/xml, application/mspowerpoint, application/powerpoint, application/vnd.openxmlformats-officedocument.presentationml.presentation , application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-powerpoint, application/x-mspowerpoint, application/octet-stream, application/pdf, application/rtf, application/msword, application/x-excel, application/zip, multipart/x-zip, audio/wav" nameconflict="makeunique">
<!---Retrieve Uploaded filename --->
<cfoutput>
<cfset Uploaded_File_Name = #cffile.ServerFile#>
</cfoutput>
<!--- Add file details to file_uploads table --->
<cfquery name="uploads" datasource="#datasource#">
insert into file_uploads (ticket_id, file_path)
values(#form.ticket_id#, '#Uploaded_File_Name#')
</cfquery>
539
As @cfqueryparam mentioned in the comments, the key is the javascript code. In particular, the contentType and processData settings. The action page can be written in any server side language.
Just to demonstrate, the example in this thread works fine. At least in newer browsers. Aside from dumping the status to a div, the only thing I changed was the input name. That is because FILE is a keyword in CF.
Upload
<!DOCTYPE html>
<html>
<head>
<title>Image Upload Form</title>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function submitForm() {
console.log("submit event");
var fd = new FormData(document.getElementById("fileinfo"));
$.ajax({
url: "action.cfm",
type: "POST",
data: fd,
enctype: 'multipart/form-data',
processData: false, // tell jQuery not to process the data
contentType: false // tell jQuery not to set contentType
}).done(function( response ) {
// display response in DIV
$("#output").html( response.toString());
})
.fail(function(jqXHR, textStatus, errorMessage) {
// display error in DIV
$("#output").html(errorMessage);
})
return false;
}
</script>
</head>
<body>
<form method="post" id="fileinfo" name="fileinfo" onsubmit="return submitForm();">
<label>Select a file:</label><br>
<input type="file" name="upload" required />
<input type="submit" value="Upload" />
</form>
<div id="output"></div>
</body>
</html>
action.cfm
<cffile action="upload" filefield="upload"
destination="c:/temp/"
nameconflict="makeunique"
result="uploadResult">
<!--- Quick and dirty response dump for DEV/Debugging only --->
<cfoutput>#serializeJSON(uploadResult)#</cfoutput>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
