Upload files via AJAX

angular-upload.js

angular.module('uploadFile', []).service('uploadService', ['$http', function ($http) {
  this.uploadFile = function () {
    var field = document.createElement('input')
    field.setAttribute('type', 'file')
    field.setAttribute('accept', '.json, application/json')

    field.onchange = function () {
      var data = new FormData()
      data.append('connectionId', 'banana')
      data.append('fileToImport', field.files[0])

      $http.post('http://www.example.com/form-submit', data, {
        transformRequest: angular.identity,
        headers: {
          'Content-Type': undefined
        }
      }).then(function (response) {
        alert('Submit successful! Server says: ' + response.data)
      })
    }

    field.click()
  }
}])

jquery-upload.js

function uploadFile () {
  var field = document.createElement('input')
  field.setAttribute('type', 'file')
  field.setAttribute('accept', '.json, application/json')

  field.onchange = function () {
    var data = new FormData()
    data.append('connectionId', 'banana')
    data.append('fileToImport', field.files[0])

    $.ajax({
      url: 'http://www.example.com/form-submit',
      type: 'POST',
      processData: false, // important
      contentType: false, // important
      data: data,
      success: function (response) {
        alert('Submit successful! Server says: ' + response.data)
      }
    })
  }

  field.click()
}