title: JQuery Form Plugin File Upload using POST redirects to POST response
body: <p><strong>Please help guys, This one is a major BLOCKER!</strong></p>
  
  <p>I have a project that uses NodeJS + <a href="http://malsup.com/jquery/form/" rel="nofollow">jQuery Form Plugin</a> + Typescript in which I am trying to do a file upload. After the file upload the server sends a response to the POST message which renders on the screen. The file does get uploaded successfully and completely before the POST response renders on the screen. I expect the POST response to call the "success" function instead of having the page redirected to show the JSON response.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>$(new ID().setAsRoot().selectId()).append(
      "&lt;form id=\"fileUploadForm\" accept-charset=\"utf-8\" method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\"&gt;" +
          "&lt;input id = \"filename\" type=\"file\" name=\"userfile\" multiple=\"multiple\" /&gt;" +
          "&lt;button type=\"submit\" id = \"submitButton\"&gt; Upload &lt;/button&gt;&lt;/form&gt;");
  
  var form = $("#fileUploadForm");
  form.submit(function (e) {
      //e.preventDefault();
      this.ajaxSubmit({
          type: form.attr('method'),
          url: form.attr('action'),
          data: form.serialize(),
          success: function (data) {
              var x = JSON.parse(data);
              alert("Success : " + x);
          },
          error: function (data) {
              var x = JSON.parse(data);
              alert("Error : " + x);
          }
      });
  });
  </code></pre>
  
  <p>the success function does not get called (which means the alert message doesn't show). The JSON data just gets rendered on the screen like this:</p>
  
  <pre><code>{
    "path": "data\\cb3409f1cc234ec3f64b60d80be13a3e.html",
    "name": "feed.html"
  }
  </code></pre>
  
  <p>There is an error on the console that says:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token : shortcut_manager.js:123
  (anonymous function) shortcut_manager.js:123
  (anonymous function) extensions::messaging:327
  Event.dispatchToListener extensions::event_bindings:386
  Event.dispatch_ extensions::event_bindings:371
  Event.dispatch extensions::event_bindings:392
  dispatchOnMessage
  </code></pre>
  
  <p>Here's the server side code that handles it. The server uses NodeJS formidable module.</p>
  
  <pre><code>public upload(req:express.Request, res) {
  
          var form = new formidable.IncomingForm();
          var originalFileName:String;
          var filePath:String;
          form.uploadDir = this.directory;
          form.keepExtensions = true;
          form.type = 'multipart';
          var fields = [];
          form
              .on("error", function (err) {
              })
              .on("field", function (field, value) {
              })
              .on("end", function () {
                  res.send({
                      path: filePath,
                      name: originalFileName
                  });
              })
              .on("file", function (name, file:formidable.File) {
                  originalFileName = file.name;
                  filePath = file.path;
              });
          form.parse(req);
          return;
      }
  </code></pre>
  
  <p>--Update--</p>
  
  <p>If I do <code>$.ajax</code> instead of <code>this.ajax</code>. The file does not upload. The browser console shows an error:</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. 
  </code></pre>