CODEWITHSUNDEEP
javascriptjqueryajax
chuckd
chuckd

Reputation: 14520

XMLHttpRequest passes but not my Jquery Ajax call calling the same thing

I can't figure out why the first call passes and the second call I get a 400 error!

// passes with a 200 success
var data = new FormData();
data.append('file', document.querySelector('#file-box-front').files[0]);
data.append('purpose', 'identity_document');

var oReq = new XMLHttpRequest();
oReq.open("POST", 'https://uploads.stripe.com/v1/files', true);

oReq.setRequestHeader('Authorization', 'Bearer ' + scope.apiKey);

oReq.onload = function(oEvent) {
  if (oReq.status == 200) {
    document.querySelector('#label-results').textContent = 'Success!';
  } else {
    document.querySelector('#label-results').textContent = 'Failure: ' + oReq.status;
  }
  document.querySelector('#upload-results').textContent = oReq.response;
}
oReq.send(data);


// jquery call below fails with 400
var options = {
  url: 'https://uploads.stripe.com/v1/files',
  type: "post",
  headers: {
    "Authorization": "Bearer " + scope.apiKey
  },
  processData: false,
  data: data
};

$.ajax(options)
  .done(function(response) {
    var i = 0;
  })
  .always(function() {

  })
  .fail(function(jqXHR, textStatus) {
    yb.base.eventAlert("Error submitting image. Please contact  help desk.", "error");
  });

Upvotes: 0

Views: 11

Answers (1)

Musa
Musa

Reputation: 97672

Your jQuery call is missing the contentType option

var options = {
  url: 'https://uploads.stripe.com/v1/files',
  type: "post",
  headers: {
    "Authorization": "Bearer " + scope.apiKey
  },
  processData: false,
  contentType: false, // prevents jQuery from setting the default content type
  data: data
};

Upvotes: 1

Related Questions