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, Apr 19 '16 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, Apr 19 '16 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, Apr 19 '16 at 16:28
If you want to download the file, this question seems relevant: https://stackoverflow.com/questions/13597516/how-to-download-file-from-javascript . If you want to display the image, this question seems relevant: https://stackoverflow.com/questions/8394721/how-can-i-convert-image-binary-from-api-call-to-data-uri-in-javascript — Greg, Apr 19 '16 at 17:44

score 0 · Accepted Answer · answered Apr 19 '16 at 18:28

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. — VSmoL, Apr 20 '16 at 06:56

Dropbox API and downloading image with javascript

1 Answers1