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
