How to get all Files Save in Dropbox to my HTML Page

Question

i have save Images in Dropbox using Javascript like that

document.forms.newsletter.addEventListener('submit', function 
     cb(evt) {
        //evt.preventDefault()

        // API key from here: https://dropbox.github.io/dropbox-api-v2-
          explorer/#files_upload
        // need to consider how this gets secured
        var TOKEN = ''      
        var dir = 'blackground/'
        var file = document.getElementById('file').files[0]     
        var promise = new Promise(function (resolve, reject) {

            // Dropbox requires application/octet-stream
            var xhr = new XMLHttpRequest();

            xhr.onload = function() {
                if (xhr.status === 200) {
                    resolve(JSON.parse(xhr.response));
                }
                else {
                    reject(xhr.response || 'Unable to upload file');
                } 
            };

            xhr.open('POST', 
           'https://content.dropboxapi.com/2/files/upload');
            xhr.setRequestHeader('Authorization', 'Bearer ' + TOKEN);
            xhr.setRequestHeader('Content-Type', 'application/octet-
          stream');
            xhr.setRequestHeader('Dropbox-API-Arg', JSON.stringify({
                path: '/' + dir + file.name,
                mode: 'add',
                autorename: true,
                mute: false
            }));

            xhr.send(file);
        })

        promise
        .then(function (result) {
            // Save dropbox response to form
            document.getElementById('dropbox').value = 
       JSON.stringify(result)

            // Submit form on successful upload
            evt.target.submit()
        })
        .catch(function (err) {
            console.log('a');
        })

        return false
    })

It works fine. But i want to retrieve each Image using Javascript and ajax to display it in my Web Page. How to make it?

I read this Documentation https://www.dropbox.com/developers-v1/core/docs#files-GET that we can make it with Get Verb.

I have make a Get for the API to get All Image like so

$.ajax({
  method: "GET",
  url: "https://content.dropboxapi.com/1/files/auto/blackground",
  dataType: "json",
  ContentType:"application/octet-stream",
  Authorization:"Bearer token"
});

i get this Error

    {error: "Authentication failed"}
error
:
"Authentication failed"

blackground is the folder where are all the Images

Something can help please

Answer 1

It works fine now. I make it like so. Token is my Token for Dropbox.

var token = '';

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: '/blackground/blackground_logo.jpg' }));
xhr.send();