We’re Still Here to Help (Even Over the Holidays!) - find out more here.
Forum Discussion
embed latest image from Dropbox folder to website
Hello,
Hope somebody can help. I'm trying to embed the latest image from Dropbox to a website. Unfortunately I can't get the script right. If anyone can help with the script it would be great.
<!DOCTYPE html>
<html>
<head>
<title>Display Latest Dropbox Image</title>
</head>
<body>
<div id="image-container">
<img id="latest-image" src="" alt="Latest Image">
</div>
<script>
const folderPath = '/home/Snapshots'; // Replace with the folder path in Dropbox
// Function to update the displayed image
async function updateImage() {
try {
// Fetch the list of files in the folder
const response = await fetch('https://api.dropboxapi.com/2/files/list_folder', {
method: 'POST',
headers: {
'Authorization': 'Bearer sl.BoQurVyU8dwp1VT5dXxRehp24GQBr8SEsOxXzDvFswQpVl9y_LOV2zA-oNUPVR5nRy1vntHjPG8KKPxahEJ-xj_kq5ksKSGKOJMCFZtNzkyS_BGbnGD4cg5tgQ4VQcP_OErglltNHrfu', // Replace with your Dropbox access token
'Content-Type': 'application/json',
},
body: JSON.stringify({
path: folderPath,
}),
});
const data = await response.json();
if (data.entries.length === 0) {
console.log('No image files found in the folder.');
return;
}
// Find the latest image file
const latestImage = data.entries.reduce((prev, current) => (prev.client_modified > current.client_modified) ? prev : current);
// Get the direct image URL from the shared link
const sharedLinkResponse = await fetch('https://api.dropboxapi.com/2/sharing/create_shared_link_with_settings', {
method: 'POST',
headers: {
'Authorization': 'Bearer sl.BoQurVyU8dwp1VT5dXxRehp24GQBr8SEsOxXzDvFswQpVl9y_LOV2zA-oNUPVR5nRy1vntHjPG8KKPxahEJ-xj_kq5ksKSGKOJMCFZtNzkyS_BGbnGD4cg5tgQ4VQcP_OErglltNHrfu', // Replace with your Dropbox access token
'Content-Type': 'application/json',
},
body: JSON.stringify({
path: latestImage.path_display,
}),
});
const sharedLinkData = await sharedLinkResponse.json();
const latestImageURL = sharedLinkData.url.replace('www.dropbox.com', 'dl.dropboxusercontent.com');
const image = document.getElementById('latest-image');
image.src=latestImageURL;
} catch (error) {
console.error('Error:', error);
}
}
// Initial image update
updateImage();
// Refresh the image every X milliseconds (e.g., every 30 seconds)
const refreshInterval = 30000; // 30 seconds
setInterval(updateImage, refreshInterval);
</script>
</body>
</html>
The App permissions are set for "files.metadata.read" and "files.content.read".
I'm struggling for a couple of days now. If anyone can help with the script would be great.
Kind regards,
Jeroen
2 Replies
Hi CASU,
I can try speculate what's wrong with your code, but it's always better when you're saying what's going wrong - unexpected output, error messages, etc.
First do you make somehow sure that every 30 seconds you will have new 'latest image' without existing link? 🧐 If no, when you're going to create new one, you will receive an error showing that there is already a link! You didn't handle this in any way. If I have to bet, this is the issue. If I'm wrong, please clarify.
You can take a look here for an example with different main target, but showing how you can get a link in a safe way. It's in Python, but still shows the idea, so you can easy 'translate' it to JavaScript, I believe. 😉
Good luck.
PS: Something else, I didn't mention, but important if your code isn't just a draft: All access tokens are short lived (there are still confusing old descriptions)!!! So in production, for long term use, you need either dynamic re-authentication or refresh token. 😈 A bit complication of the code - complication that you can avoid using SDK (to some extent).
- Greg-DB
Dropbox Community Moderator
CASU As Здравко said, please share the information about what isn't working as expected for you. For instance, include relevant error messages, etc. Be sure to always check the response body for your API calls, as it may contain an error message.
Also, note that using "dl.dropboxusercontent.com" in shared links is not officially supported. Please refer to this help article for information on the supported parameters.
About Dropbox API Support & Feedback
Find help with the Dropbox API from other developers.
