scrimba
Build an App with JavaScript and Dropbox
Render Thumbnails
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

AboutCommentsNotes
Render Thumbnails
Expand for more info
index.js
run
preview
console
import { Dropbox } from 'dropbox';

const dbx = new Dropbox({
accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k',
fetch
})

const fileListElem = document.querySelector('.js-file-list')

const state = {
files: []
}

const init = () => {
dbx.filesListFolder({
path: ''
}).then(res => {
updateFiles(res.entries)
})
}

const updateFiles = files => {
state.files = [...state.files, ...files]
renderFiles()
}

const renderFiles = () => {
fileListElem.innerHTML = state.files.sort((a, b) => {
// sort alphabetically, folders first
if ((a['.tag'] === 'folder' || b['.tag'] === 'folder')
&& !(a['.tag'] === b['.tag'])) {
return a['.tag'] === 'folder' ? -1 : 1
} else {
return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1
}
}).map(file => {
const type = file['.tag']
return `
<li class="dbx-list-item ${type}">
${file.name}
</li>
`
}).join('')
}

init()
Console
index.html
-3:43