title: Uploading a file with AJAX and CFFILE
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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. <a href="https://stackoverflow.com/questions/11852813/cffile-alternative-i-need-to-upload-without-form-submit">Possible Similar Issue</a> . I don't really like the solution posted though.</p>
  
  <p>Is there anyway I could get around this error?</p>
  
  <p>Here is my AJAX:</p>
  
  <pre><code>&lt;!---Script to upload file link ---&gt;     
  &lt;cfoutput&gt;
  &lt;script&gt;
  $(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;           
      });
  });
  &lt;/script&gt;
  &lt;/cfoutput&gt;
  </code></pre>
  
  <p>My Form:</p>
  
  <pre><code>&lt;form method="post" name="upload-file" id="upload-file" enctype="multipart/form-data"&gt;
  
        &lt;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" /&gt;
  
        &lt;br /&gt;
        &lt;input name="submitForm" id="submitForm" type="submit" value="Attach File To Ticket"&gt;
  
        &lt;/form&gt;
  </code></pre>
  
  <p>Processing Page:</p>
  
  <pre><code>&lt;!---File Upload Logic ---&gt;
  
          &lt;!---CFFile Tag located in template file ---&gt;
          &lt;!---CFFile code ---&gt;
          &lt;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"&gt;
  
         &lt;!---Retrieve Uploaded filename ---&gt;
          &lt;cfoutput&gt;
          &lt;cfset Uploaded_File_Name = #cffile.ServerFile#&gt;
          &lt;/cfoutput&gt;
  
          &lt;!--- Add file details to file_uploads table ---&gt;
          &lt;cfquery name="uploads" datasource="#datasource#"&gt;
          insert into file_uploads (ticket_id, file_path)
          values(#form.ticket_id#, '#Uploaded_File_Name#')
          &lt;/cfquery&gt;
  </code></pre>