title: Upload file using Jquery form plugin
body: <p>I am using <a href="http://malsup.com/jquery/form/#code-samples" rel="nofollow noreferrer">Jquery form plugin</a> to upload file in Ajax request.File is successfully sent to server but on response browser is asking to save response with following popup    </p>
  
  <p><img src="https://i.stack.imgur.com/kynh9.png" alt="enter image description here"> </p>
  
  <p>Here is my HTML  </p>
  
  <pre><code>&lt;form:form name="newRequestForm" id="newRequestForm" modelAttribute="requestForm" method="POST"&gt;     
  &lt;form:input path="mrnFile" type="file" size="40"/&gt;
  &lt;/form:form&gt;  
  </code></pre>
  
  <p>JS  </p>
  
  <pre><code>    // Initializing Jquery form 
       $(function() {
          $('#newRequestForm').ajaxForm();   
      });
  
     // This function is called on click event of submit button  
  function submitDataRequest(formAction) {
      var options = { 
              beforeSubmit: showRequest,  // pre-submit callback 
                  success: showResponse,  // post-submit callback 
                  url:  formAction,
                  dataType:  'json'
              }; 
       $('#newRequestForm').ajaxSubmit(options); 
  }   
  
  
  function showRequest(formData, jqForm, options) { 
      alert('About to submit: '); 
      return true; 
  } 
  
  function showResponse(data, statusText, xhr, $form)  { 
      Alert("In response..")
      if (!data.actionPassed) {
          showErrors(data.errors);
          $("#hideOrShowErrors").show();  
      } else {
          showConfirmation(data, confirmationMsg, formName, successFormAction);
      }
  } 
  </code></pre>
  
  <p><code>showResponse</code> is never invoked instead browser shows the popup.
  I checked through Firebug, the response code is <code>200</code> still success callback is not executed.
   After reading some similar question I think it has something to do with server response type. So I did following in my spring controller  </p>
  
  <pre><code>public ResponseEntity&lt;ResponseDTO&gt; save(@ModelAttribute("dataRequestForm") DataRequestFormDTO dataRequestFormDTO, BindingResult result, SessionStatus status, Model model, HttpServletResponse response) {  
  HttpHeaders responseHeaders = new HttpHeaders();
          responseHeaders.setContentType(MediaType.APPLICATION_JSON);
          return new ResponseEntity&lt;ResponseDTO&gt;(responseDTO, responseHeaders, HttpStatus.CREATED);
      }   
  </code></pre>
  
  <p>On both side I have data type as <code>json</code> but still I am getting the popup.Am I making any blunder?  </p>
  
  <p>Thanks!</p>
  
  <hr>
  
  <p><strong>EDIT:</strong>  </p>
  
  <p>Updated JS   </p>
  
  <pre><code>function submitDataRequest(formAction) {
       var options = { 
  
                    beforeSubmit: function(){ 
                    alert("Before submit");
                    },  // pre-submit callback 
                      success: function(){
                      alert("On success");
                      },  // post-submit callback 
                      url:  formAction
      }  
           $('#newRequestForm').ajaxSubmit(options); 
   }
  </code></pre>
  
  <p>Still I get the same popup and <code>success</code> callback is not fired.  </p>
  
  <p>Added <code>initBinder</code> in controller  </p>
  
  <pre><code>@InitBinder
      protected void initBinder(HttpServletRequest request,
              ServletRequestDataBinder binder) throws ServletException {
          binder.registerCustomEditor(CommonsMultipartFile.class,
                  new ByteArrayMultipartFileEditor());    
      }   
  </code></pre>
  
  <p>After adding <code>initBinder</code> I got following error   </p>
  
  <pre><code>No serializer found for class java.io.ByteArrayInputStream and no properties discovered to create BeanSerializer
  </code></pre>