You might see that the Dropbox Community team have been busy working on some major updates to the Community itself! So, here is some info on what’s changed, what’s staying the same and what you can expect from the Dropbox Community overall.

Forum Discussion

sharmanhall's avatar
sharmanhall
Explorer | Level 4
2 years ago

Export Bulk Dropbox Image Folder URLs

The problem is that there are hundreds of photos. It is almost impossible to enter the URL for each rock sample manually. I need some automated way to copy the Dropbox photo URLs. You can use my script below to generate bulk Dropbox links.

* Requires TamperMonkey or GreaseMonkey addon in your browser.

 

I wrote a script to accomplish this:

https://gist.github.com/tyhallcsu/89d6c672f93e94cbd651354b587306b4

This is a userscript that extracts image URLs from a Dropbox page and copies them to the clipboard when a button is clicked. The script creates a button on the page that, when clicked, scrolls to the bottom of the page, waits for new images to load, and extracts the image URLs. The script then joins the URLs into a string separated by newlines. It then puts the links on your clipboard with ?dl=0 replaced with ?raw=1 parameters.


Floating button in the bottom right of your browser window:


Code:

// ==UserScript==
// @name Extract All Dropbox Image URLs in Folder to Clipboard
// @namespace https://www.example.com/
// @version 3
// @description Extracts image URLs from a Dropbox page and copies them to the clipboard when a button is clicked.
// @author Tyler Hall Tech
// @match https://www.dropbox.com/*
// @grant GM_setClipboard
// @grant GM_log
// @run-at document-idle
// ==/UserScript==

(function() {
'use strict';

const SECONDS_TO_WAIT_FOR_SCROLL = 1; // adjust as needed
const DOWNLOAD_URL_REPLACEMENT = '?raw=1';

// function to get all image link elements
function getImageLinks() {
const imageLinks = document.querySelectorAll('a.dig-Link.sl-link--file[href*="dl=0"]');
return Array.from(imageLinks).map(link => link.getAttribute('href').replace(/\?dl=0$/, DOWNLOAD_URL_REPLACEMENT));
}

// function to scroll to the bottom of the page and wait for new images to load
async function waitForImagesToLoad() {
window.scrollTo(0, document.body.scrollHeight);
await new Promise(resolve => setTimeout(resolve, SECONDS_TO_WAIT_FOR_SCROLL * 1000));
}

// create an array to hold the image URLs
let imageUrls = [];

// add a button to the page that will copy the image URLs to the clipboard when clicked
const copyButton = document.createElement('button');
copyButton.classList.add('dig-Button', 'dig-Button--primary', 'dig-Button--standard', 'copy-urls-button');
copyButton.textContent = 'Copy all URLs';
copyButton.style.position = 'fixed';
copyButton.style.bottom = '20px';
copyButton.style.right = '20px';
copyButton.style.zIndex = '9999';
document.body.appendChild(copyButton);

// add a click event listener to the button
copyButton.addEventListener('click', async function() {
let finished = false;
let numUrls = 0;
while (!finished) {
// scroll to the bottom of the page and wait for new images to load
await waitForImagesToLoad();

// get the newly loaded image URLs
const newImageUrls = getImageLinks().filter(url => !imageUrls.includes(url));
imageUrls.push(...newImageUrls);

// check if all images have been loaded
finished = newImageUrls.length === 0;

numUrls += newImageUrls.length;
}

// join the image URLs into a string separated by newlines
const imageUrlString = imageUrls.join('\n');

// copy the image URL string to the clipboard
GM_setClipboard(imageUrlString, 'text');

// disable the button and change the text to indicate that the URLs have been copied
copyButton.disabled = true;
copyButton.textContent = `${numUrls} URL(s) copied to clipboard`;

// enable the button again after 3 seconds
setTimeout(function() {
imageUrls = [];
copyButton.disabled = false;
copyButton.textContent = 'Copy all URLs';
}, 3000);
});
})();

 

Hope this helps someone. I hope Dropbox natively supports this some day. But for now, this works just fine 🙂

  • sharmanhall's avatar
    sharmanhall
    Explorer | Level 4
    2 years ago

    // ==UserScript==
    // @name Extract All Dropbox Image URLs in Folder to Clipboard
    // @namespace https://www.example.com/
    // @version 3
    // @description Extracts image URLs from a Dropbox page and copies them to the clipboard when a button is clicked.
    // @author Tyler Hall Tech
    // @match https://www.dropbox.com/*
    // @grant GM_setClipboard
    // @grant GM_log
    // @run-at document-idle
    // ==/UserScript==

    (function() {
    'use strict';

    const SECONDS_TO_WAIT_FOR_SCROLL = 1; // adjust as needed
    const DOWNLOAD_URL_REPLACEMENT = '?raw=1';

    // function to get all image link elements
    function getImageLinks() {
    const imageLinks = document.querySelectorAll('a.dig-Link.sl-link--file[href*="dl=0"]');
    return Array.from(imageLinks).map(link => link.getAttribute('href').replace(/\?dl=0$/, DOWNLOAD_URL_REPLACEMENT));
    }

    // function to scroll to the bottom of the page and wait for new images to load
    async function waitForImagesToLoad() {
    window.scrollTo(0, document.body.scrollHeight);
    await new Promise(resolve => setTimeout(resolve, SECONDS_TO_WAIT_FOR_SCROLL * 1000));
    }

    // create an array to hold the image URLs
    let imageUrls = [];

    // add a button to the page that will copy the image URLs to the clipboard when clicked
    const copyButton = document.createElement('button');
    copyButton.classList.add('dig-Button', 'dig-Button--primary', 'dig-Button--standard', 'copy-urls-button');
    copyButton.textContent = 'Copy all URLs';
    copyButton.style.position = 'fixed';
    copyButton.style.bottom = '20px';
    copyButton.style.right = '20px';
    copyButton.style.zIndex = '9999';
    document.body.appendChild(copyButton);

    // add a click event listener to the button
    copyButton.addEventListener('click', async function() {
    let finished = false;
    let numUrls = 0;
    while (!finished) {
    // scroll to the bottom of the page and wait for new images to load
    await waitForImagesToLoad();

    // get the newly loaded image URLs
    const newImageUrls = getImageLinks().filter(url => !imageUrls.includes(url));
    imageUrls.push(...newImageUrls);

    // check if all images have been loaded
    finished = newImageUrls.length === 0;

    numUrls += newImageUrls.length;
    }

    // join the image URLs into a string separated by newlines
    const imageUrlString = imageUrls.join('\n');

    // copy the image URL string to the clipboard
    GM_setClipboard(imageUrlString, 'text');

    // disable the button and change the text to indicate that the URLs have been copied
    copyButton.disabled = true;
    copyButton.textContent = `${numUrls} URL(s) copied to clipboard`;

    // enable the button again after 3 seconds
    setTimeout(function() {
    imageUrls = [];
    copyButton.disabled = false;
    copyButton.textContent = 'Copy all URLs';
    }, 3000);
    });
    })();

    • sharmanhall's avatar
      sharmanhall
      Explorer | Level 4
      2 years ago

      Updated script:

      // ==UserScript==
// name         Bulk Export Dropbox Image URLs (2023)
// @version      3.1
// @description  Extracts image URLs from a Dropbox page and copies them to the clipboard when a button is clicked.
// @author       sharmanhall
// @supportURL   https://github.com/tyhallcsu/dropbox-image-url-extractor/issues/new
// @namespace    https://github.com/tyhallcsu/dropbox-image-url-extractor
// @homepageURL  https://github.com/tyhallcsu/dropbox-image-url-extractor
// @license      MIT
// connect      greasyfork.org
// connect      sleazyfork.org
// connect      github.com
// connect      openuserjs.org
// match        https://www.dropbox.com/*
// Grant        GM_setClipboard
// Grant        GM_log
// @compatible   chrome
// @compatible   firefox
// @compatible   edge
// @compatible   opera
// @compatible   safari
// run-at       document-idle
// Icon         https://cfl.dropboxstatic.com/static/metaserver/static/images/favicon-vfl8lUR9B.ico
// ==/UserScript==
 
(function() {
    'use strict';
 
    const SECONDS_TO_WAIT_FOR_SCROLL = 1; // adjust as needed
    const DOWNLOAD_URL_REPLACEMENT = '?raw=1';
 
    // function to get all image link elements
    function getImageLinks() {
        const imageLinks = document.querySelectorAll('a.dig-Link.sl-link--file[href*="dl=0"]');
        return Array.from(imageLinks).map(link => link.getAttribute('href').replace(/\?dl=0$/, DOWNLOAD_URL_REPLACEMENT));
    }
 
    // function to scroll to the bottom of the page and wait for new images to load
    async function waitForImagesToLoad() {
        window.scrollTo(0, document.body.scrollHeight);
        await new Promise(resolve => setTimeout(resolve, SECONDS_TO_WAIT_FOR_SCROLL * 1000));
    }
 
    // create an array to hold the image URLs
    let imageUrls = [];
 
    // add a button to the page that will copy the image URLs to the clipboard when clicked
    const copyButton = document.createElement('button');
    copyButton.classList.add('dig-Button', 'dig-Button--primary', 'dig-Button--standard', 'copy-urls-button');
    copyButton.textContent = 'Copy all URLs';
    copyButton.style.position = 'fixed';
    copyButton.style.bottom = '20px';
    copyButton.style.right = '20px';
    copyButton.style.zIndex = '9999';
    document.body.appendChild(copyButton);
 
    // add a click event listener to the button
    copyButton.addEventListener('click', async function() {
        let finished = false;
        let numUrls = 0;
        while (!finished) {
            // scroll to the bottom of the page and wait for new images to load
            await waitForImagesToLoad();
 
            // get the newly loaded image URLs
            const newImageUrls = getImageLinks().filter(url => !imageUrls.includes(url));
            imageUrls.push(...newImageUrls);
 
            // check if all images have been loaded
            finished = newImageUrls.length === 0;
 
            numUrls += newImageUrls.length;
        }
 
        // join the image URLs into a string separated by newlines
        const imageUrlString = imageUrls.join('\n');
 
        // copy the image URL string to the clipboard
        GM_setClipboard(imageUrlString, 'text');
 
        // disable the button and change the text to indicate that the URLs have been copied
        copyButton.disabled = true;
        copyButton.textContent = `${numUrls} URL(s) copied to clipboard`;
 
        // enable the button again after 3 seconds
        setTimeout(function() {
            imageUrls = [];
            copyButton.disabled = false;
            copyButton.textContent = 'Copy all URLs';
        }, 3000);
    });
})();
      • AKA4747's avatar
        AKA4747
        New member | Level 2
        2 years ago

        I tried your script but it says 0 Url copied ? This script still work ?

  • pixelsilo's avatar
    pixelsilo
    New member | Level 2
    11 months ago

    Update in Jan 2024. Couldn't get this to work. Chat GPT fixed it for me. The function needs updating. Change it to the below.

    function getImageLinks() {
    // Update the selector to match the Dropbox page structure
    const imageLinks = document.querySelectorAll('a.dig-Link._sl-file-name_1iaob_86.dig-Link--primary[href*="dl=0"]');
    return Array.from(imageLinks).map(link => link.getAttribute('href').replace(/\?dl=0$/, DOWNLOAD_URL_REPLACEMENT));
    }

    Make sure the folder is publically shared and you're logged out (incognito mode didn't work for me)

  • Jay's avatar
    Jay
    Icon for Dropbox Staff rankDropbox Staff
    9 hours ago

    Hi sharmanhall, thanks for posting today!

     

    Thanks for posting your method of copying your Dropbox image URLs for other users to use.

     

    I'll leave this post open for other users to comment as well if need be.

About Dropbox tips & tricks

Node avatar for Dropbox tips & tricks

Learn how to get the most out of Dropbox with other users like you.

393 PostsLatest Activity: 9 hours ago
324 Following

If you need more help you can view your support options (expected response time for an email or ticket is 24 hours), or contact us on X or Facebook.

For more info on available support options for your Dropbox plan, see this article.

If you found the answer to your question in this Community thread, please 'like' the post to say thanks and to let us know it was useful!