title: 500 Internal server error while using jquery ajax to upload and send file to server
body: <p>I am trying to have import functionality in my project which allows import of excel sheets only. I want to upload the file and then send it to the server for parsing. I am using ajax jquery to send the file to the server. But I get 500 Internal Server error.
    I have a main form say Form1 and a nested form say Form2. The upload functionality is in Form2. The code is as follows:</p>
  
  <pre><code>&lt;form action = @routes.SignUp.uploadFile method="post" id ="upfile"&gt;
  &lt;input name="file" type="file" id="filename"/&gt;
  &lt;input type="button" value="Upload" id="uploadfile"/&gt;
  &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
          var file;        
          $('#filename').change(function(){
           file = this.files[0];
           var name = file.name;
           var size = file.size;
           var fup = document.getElementById('filename');
           var fileName = fup.value;
           var type = fileName.substring(fileName.lastIndexOf('.') + 1);
           if(type =="xls" || type=="xlsx")
           {
              return true;
           }
           else
           {
              alert("Upload Excel files only");
              return false;
           }
          });
  
          $('#uploadfile').click(function(){
          var formData = new FormData($('form')[0]);
               $.ajax({
               url: '@routes.SignUp.uploadFile',
               type: 'POST',
               xhr: function() {  // Custom XMLHttpRequest
               var myXhr = $.ajaxSettings.xhr();
               if(myXhr.upload){ // Check if upload property exists
                  myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
               }
               return myXhr;
               },
               //Ajax events
               //beforeSend: beforeSendHandler,
               success:function(){
               alert("completeHandler");
               },
               //error: errorHandler,
               // Form data
               data: formData,
               //Options to tell jQuery not to process data or worry about content-type.
               cache: false,
               contentType: false,
               processData: false
               });
  
          });
          function progressHandlingFunction(e){
  if(e.lengthComputable){
      $('#progress').attr({value:e.loaded,max:e.total});
  }
  </code></pre>
  
  <p>}
          </p>
  
  <p>Can someone please help??</p>