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);
}

Answer 1

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();