jQuery ajax get image data from server

Question

Here is my Postman test request:

Here are the headers:

So here is my AJAX request:

var getAvatarData = new FormData();
getAvatarData.append('token', Cookies.get('user_token'));
$.ajax({
    method: "POST",
    data: getAvatarData,
    url: AppSettings.userData.photo_path + "s/" + AppSettings.userData.profile.photo,
     contentType: "multipart/form-data",
     processData: false,
}).done(function (data) {
    console.log(data)
}).fail(function (err) {
    console.log(err)
});

So, i always get into the Fail block with Not found.

With those ajax settings:

method: "POST",
data: getAvatarData,
url: AppSettings.userData.photo_path + "s/" + AppSettings.userData.profile.photo,
dataType: "json",
mimeType: "multipart/form-data",
contentType: false,
processData: false,

I get this also in fail:

What i am missing? What is wrong here?

score 0 · Answer 1 · answered Feb 27 '19 at 19:45

0

I see you have dataType set to JSON, if you set this value to JSON, even if you get a 200 ok and the response text is not a well formatted JSON string, you'll land at the error handler. You can see in your fail object that you got a 200 ok, and the response text contains content.

Try changing your dataType to image/png and see what happens.

Also, you could try this bit of code and see if that works for you.

$.ajax({
  method: "GET",
  url: 'https://httpbin.org/image/jpeg',
  dataType: "image/jpeg",
}).done(function(data) {
  console.log(data);
}).fail(function(err) {
  console.log(err);
});

answered Feb 27 '19 at 19:45

NickAndrews

496
2
9

your piece of code does the same as escribed in 2 scenario = fail with 200 – Developer Feb 27 '19 at 19:56
Did you try changing the dataType in your code? Your hitting the fail handler because your code is expecting JSON data, which it is not getting. You could even remove it for testing purposes and jquery will try to guess it. – NickAndrews Feb 27 '19 at 20:02

jQuery ajax get image data from server

1 Answers1