Fileupload to remote server

Ember CLI
6

As I am testing more, I found that

  1. If I am using contentType: false ember/jquery should automatically change it properly, but in ember it is changing it to JSON which is wrong
  2. If i manually set the header to multipart then boundary is missing

Below is my current component, which is very straight forward

import Ember from 'ember';

export default Ember.TextField.extend({
  type: 'file',
  change: function (e) {
    var inputFiles = e.target.files;

    var inputFile = inputFiles[0];

    var fd = new FormData();
    fd.append('file', inputFile);

    Ember.$.ajax({
      url: 'http://localhost:8000/api/demopages',
      data: fd,
      cache: false,
      async: false,
      contentType: false,
      processData: false,
      type: 'POST',
      xhrFields: {
        withCredentials: true
      }
    });
  }
});

Here is my ember information

DEBUG: -------------------------------
DEBUG: Ember             : 1.13.10
DEBUG: Ember Data        : 1.13.12
DEBUG: jQuery            : 2.1.4
DEBUG: Ember Simple Auth : 0.8.0
DEBUG: -------------------------------