getting preview from API response

Question

I have binary data that I want to show as a preview in my modal

The binary data is as seen in the below image in Response:-

The same data is seen in preview:-

If I hardcode the preview value in code then it works. But if I take the response from API then it doesn't work.

How to get the preview as seen in the preview image without hardcode ?

This works:

clickedFile.image = "/9j/4AAQSkZJRgABAQEASABIAAD/4QHDRXhpZ.."
        var myBase64 = "data:"+file.fileType+";base64,"+clickedFile.image+"";
        var img = new Image();
        img.src = myBase64;

But this doesn't works:

 clickedFile.image = api.response;
            var myBase64 = "data:"+file.fileType+";base64,"+clickedFile.image+"";
            var img = new Image();
            img.src = myBase64;

So how to convert binary response api.response to its preview value "/9j/4AAQSkZJRgABAQEASABIAAD/4QHDRXhpZ.."?

UPDATE:

Using REST Client, I can see the following dialogue: CANNOT PREVIEW IMAGE

Can you add the image data as text and show the headers section of your post? — N-ate, Jan 11 '18 at 17:51
@SterlingArcher. Then it gives error- `Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.` — sjain, Jan 11 '18 at 17:57
@MyGod did you google the error? https://stackoverflow.com/questions/23223718/failed-to-execute-btoa-on-window-the-string-to-be-encoded-contains-characte — Sterling Archer, Jan 11 '18 at 17:59
@SterlingArcher I didn't notice the asker's name and thought you were getting flippant with him. lol. — N-ate, Jan 11 '18 at 18:06
I copied Base64 variable and then used `clickedFile.image = Base64.encode(image);` but it didn't worked. Got exception in console: `404 (Not Found)`. — sjain, Jan 11 '18 at 18:10

score 0 · Answer 1 · answered Jan 11 '18 at 18:05

If an image is to be sent over ajax you need to base64 encode the bytes first. This is because ajax can only receive particular formats and binary is not one of them. The easiest way to do this is to make a data url on the server that you can simply set to the image.src. Be aware however that this requires more bandwidth than setting the image.src to a served file.

getting preview from API response

1 Answers1