Access Authenticated Image through Ajax success

Question

I have this method, I have to log in into the "Storage app" and display the img in a html img but don't know how to parse 2nd success function.

PD: I checked that I reach that success method with console logs.

setTimeout(function() {
  $.ajax({
    contentType: 'application/json',
    data: JSON.stringify({
      "username": "username",
      "password": "password"
    }),
    dataType: "json",
    processData: false,
    type: 'POST',
    url: pathStorage + "/api/login",
    async: false,

    complete: function(data) {
      var response = $.parseJSON(data.responseText);

      $.ajax({
        type: 'GET',
        url: pathStorage + "/web-app/files/" + id + "_imagen.jpg",
        headers: {
          "Authorization": response.token_type + " " + response.access_token
        },
        success: function(data) {

          //this dont works
          $('#idImg').prop('src', 'data:image/jpg;base64,' + data)
        }

      })
    }

  })
}, 1000)

what do you have in your `data` response? because you might need to call the appropriate key if its an object — N. Ivanov, Jul 10 '17 at 12:10
@N.Ivanov the problem is I'm not able to see the data, when I used postman for this request, the response was the img displayed. — Pablo Mosby, Jul 10 '17 at 12:12
You cant easily use jQuery ajax to download an image see https://stackoverflow.com/questions/17657184/using-jquerys-ajax-method-to-retrieve-images-as-a-blob/17682424 — Musa, Jul 10 '17 at 12:15
you could check with `console.log(data)` to see the contents of the data object — Martin Staufcik, Jul 10 '17 at 12:17
@MartinStaufcik the `data` is not legible, it's something from adobe — Pablo Mosby, Jul 10 '17 at 12:27
@Musa I don't want to download it, just to display it in a or tag — Pablo Mosby, Jul 10 '17 at 12:39
Neither `window.URL` or `window.webkitURL` seem to be recognised, am I missing any import? @Musa — Pablo Mosby, Jul 11 '17 at 09:51

score 0 · Answer 1 · answered Jul 12 '17 at 11:28

Thanks @Musa for the reply, I managed to set the img, but had to import fileapi.js I leave here my actual code

setTimeout(function () {
  $.ajax({
     contentType: 'application/json',
     data: JSON.stringify({
       "username": "user",
       "password": "password"
       }),
     dataType: "json",
     processData: false,
     type: 'POST',
     url: sessionRutaStorage + "/api/login",
     async: false,

     complete: function (data) {
        var response = $.parseJSON(data.responseText);

        var xhr = new XMLHttpRequest()
        xhr.open('GET', storagePath + "/web-app/files/" + id + "_imagen.jpg", true);
        xhr.setRequestHeader("Authorization", response.token_type + " " + response.access_token )
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 &&this.status == 200) {

               var img=document.getElementById('imgInfo');
               var url = window.URL || window.webkitURL;
               img.src = url.createObjectURL(this.response);
               img.setAttribute("src",url.createObjectURL(this.response))
                }
          };

         xhr.responseType = 'blob';
         xhr.send();

  }

 })
}, 1000)

Access Authenticated Image through Ajax success

1 Answers1