vendredi 23 février 2018

Returning image data over AJAX

Ok guys this one seems simple but has been driving me crazy. It's 2 am here so I'm just gonna lay this out there.

  1. I'm making a proof of concept page that loads json data and puts it in a table. That's done.
  2. For each object in the main json array, there are an array of images, with IDs.
  3. These IDs can be used in conjuction with the dataID to form a long url for another AJAX request, this time for an image.

Here's the tricky part. After finally handling CORS issues I finally am getting back packets with responses. And basically I'm getting screwed in the weirdest way. Here's a tiny piece of one of my responses:

ÿØÿàJFIFÿÛ  ( 
%!1!%)+...!683-7(-.+...

That's garbage to me. But it's got something to do with how the picture is coming down. I've been messing with content-type but even text/plain looks like that. I'm getting that from the view and Chrome's network tab of the developer tools. When I go from response to "Preview" the text reads:

"/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMTEhUSEhMVFhUWGBkaGBcXGBYYGBseGBsaFxoXGRo HiggGB..."

Basically what's in the preview tab is perfect. I put that in an image tag after src='data:image/png;base64,' + that stuff and it worked perfectly. What I'm after really is how the heck is Chrome getting that text from the response? And how do I get that from the success:function()data{} from a $.ajax call. I will put what i'm doing below code wise but its pretty standard. The packet returns and everything I just want the PREVIEW version, not the RESPONSE version. And I can't find any documentation.

var response = $.ajax({
            type: 'GET',
            url: 'http://dev.dragonflyathletics.com:1337/api/dfkey/events/' + item.id + '/media/' + imageID,
            contentType: 'multipart/form-data',
            headers: {
                'Authorization': 'Basic ' + btoa('anything:evalpass')
            },
            success: function (data) {
                a = data;
                imgTag = '<img alt="' + item.images[0].caption + '" src="data:image/png;base64,' + data + '">';
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.log(errorThrown);
                //alert(jqXHR);
                //alert(textStatus);
                //alert(errorThrown);
                //requestRetry('events', 3);
            }
        });

Please help me out I will mark answer in the morning <3




Aucun commentaire:

Enregistrer un commentaire