Dropbox API and downloading image with javascript

Question

I have this problem where I get my file in Dropbox with XMLHttpRequest, I have every POST etc. working fine, but when I check my response/responseText looks like this:

"�PNG ↵↵ IHDR,,�" pHYs��↵OiCCPPhotoshop ICC profilexڝSgTS�=���BK���KoR RB���&*! J�!��Q�EEȠ�����Q,�↵��!���������{�kּ������>��������H3Q5��B�������.@�↵$p�d!s�#�~<<+"��x��M��0���B�\���t�8K�@z�B�@F���&S�`�cb�P-`'������{[�!�� e�Dh;��V�EX0fK�9�-0IWfH�����0Q��){`�##x��F�W<�+��*x��<�$9E�[-qWW.(�I+6aa�@.�y�2�4���������x����6��_-���"bb���ϫp@�t~��,/��;�m��%�h^�u��f�@����W�p�~<<E���������J�B[a�W}�g�_�W�l�~_�↵]2�v����HX}��sɤ��뾲*,9�4S���=3 _���Yijl���#[����g�M�{��OI�FԍΡ�� �7B|u���>w������7P!��Ïpp�p��ûoο�k~��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@BB� �!@B� �!@B��!!BB� �!@B� �!@B��!!BB� �!@B� �!@B���+�h+`/��!@B��!!BB� �!@B� �!@B��!�Z�oj�A N�fJIEND�B`�"

I think that is my picture? How I am able to download it then?

function showImage() { var foldersFiles = []; var data = { "path": "/path_to_my_file/mypicture.png" } var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { console.log(xhttp.responseText); } }; xhttp.open("POST", "https://content.dropboxapi.com/2/files/download", true); xhttp.setRequestHeader("Authorization", "Bearer My_Access_Token"); xhttp.setRequestHeader("Dropbox-API-Arg", JSON.stringify(data)); xhttp.send(); // xhttp.send(data); }

I'm not sure what you're asking. It seems like you're successfully downloading the image... what do you want to do with it next? (So far, you're logging it to the console.) — user94559
– user94559, Commented Apr 19, 2016 at 16:09
@smarx Good to know that im currently doing it right. The thing what I have to do now is, how do I get file "physically"? Like when im calling showImage function, it pop ups windows where I can download it. Or even show it somehow on webpage? — VSmoL
– VSmoL, Commented Apr 19, 2016 at 16:18
Set xhttp.responseType='blob' or xhttp.responseType='arraybuffer' and then search for how to use a blob/arraybuffer as the src for an img tag or use the File API to save to the local disk. — user94559
– user94559, Commented Apr 19, 2016 at 16:28
If you want to download the file, this question seems relevant: stackoverflow.com/questions/13597516/… . If you want to display the image, this question seems relevant: stackoverflow.com/questions/8394721/… — Greg
– Greg, Commented Apr 19, 2016 at 17:44

user94559 · Accepted Answer · 2016-04-19 18:28:44Z

Here's some code that works in at least some browsers. Specifically, I believe the download part won't work in IE at all. (I only tested in Chrome, where both techniques do work.)

var token = '<REDACTED>'; var xhr = new XMLHttpRequest(); xhr.responseType = 'blob'; xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { var imageUrl = (window.URL || window.webkitURL).createObjectURL(xhr.response); // display, assuming <img id="image"> somewhere document.getElementById('image').src = imageUrl; // download via the download attribute: limited browser support var a = document.createElement('a'); a.download = 'test.png'; a.href = imageUrl; a.click(); } }; xhr.open('POST', 'https://content.dropboxapi.com/2/files/download'); xhr.setRequestHeader('Authorization', 'Bearer ' + token); xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({ path: '/test.png' })); xhr.send();

Thanks for the answer. It works like charm and as you said, this isn't working on IE at least not IE 11, but currently I dont need it.

Collectives™ on Stack Overflow

Dropbox API and downloading image with javascript

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related