I have a use case (in my NodeJS app) where I want to allow the users to input the URL of a public folder on OneDrive and Dropbox and doing that should let them choose and download the images that they want saved.

For now, I am doing that with any website where they can input the link and I scrape that site, get all the images and let them download those. This is being done through socket and here’s a snippet of the code that does this:

        socket.on('scrapeURL', async (targetUrl: string) => {
          try {
            if (!targetUrl) {
              socket.emit('scrapeError', 'Target URL not found.')
              return
            }


            if (targetUrl.startsWith("http://")) {
              socket.emit('scrapeError', 'Invalid Target URL.')
              return
            }

            if (!targetUrl.startsWith("https://")) {
              targetUrl = "https://" + targetUrl;
            }

            const svgs: any = []
            const images: any = []
            const tempSvgs: any = []
            const tempImages: any = []

            socket.emit('scrapeProgress', `Fetching ${targetUrl}.`)

            let response;
            try {
              response = await axios.get(targetUrl, {
                headers: {
                  'Content-Type': 'application/json',
                  'User-Agent': 'myapp-backend-server',
                  Accept: '*/*',
                  Connection: 'keep-alive'
                }
              })
            } catch (error) {

              socket.emit('scrapeError', 'Unable to fetch the target URL.')
              return
            }

            const html = response?.data || undefined

            if (!html) {
              socket.emit('scrapeError', 'Unable to fetch the target URL.')
              return
            }

            socket.emit('scrapeProgress', 'Loading data to Cheerio.')

            // Load HTML content into Cheerio
            const $ = cheerio.load(html)

            socket.emit('scrapeProgress', 'Getting images details.')

            // Extracting images
            $('img').each((index, element) => {
              const imageUrl = $(element).attr('src')
              const lazyImageUrl = $(element).attr('data-lazy-src')
              const imgUrl = lazyImageUrl || imageUrl || null

              if (imgUrl) {
                tempImages.push(url.resolve(targetUrl, imgUrl))
              }
            })

            // Extracting background images
            $('[style]').each((index, element) => {
              const style = $(element).attr('style')
              if (style && style.includes('background-image')) {
                const regex = /url(['"]?(.*?)['"]?)/
                const match = regex.exec(style)
                if (match && match[1]) {
                  tempImages.push(match[1])
                }
              }
            })

            socket.emit('scrapeProgress', 'Getting SVGs details.')

            // Extracting SVGs
            $('svg').each((index, element) => {
              const svgContent = $.html(element)
              tempSvgs.push(
                `data:image/svg+xml,${encodeURIComponent(svgContent)}`
              )
            })

            for (const image of tempImages) {
              if (await this.isImageValid(image)) {
                images.push(image)
              }
            }

            for (const svg of tempSvgs) {
              if (await this.isImageValid(svg)) {
                svgs.push(svg)
              }
            }

            socket.emit('scrapeResult', {
              fonts,
              images,
              svgs,
              colors,
              allFonts: fonts?.length ?? 0,
              allImages: images?.length ?? 0,
              allSvgs: svgs?.length ?? 0,
            })
          } catch (error: any) {
            if (error?.message && error.message.includes('ENOTFOUND')) {
              socket.emit('scrapeError', Err.notFound('Target URL not found.'))
            } else {
              socket.emit('scrapeError', `Target URL not found.`)
            }
          }
        })

What I want to do now is let the people input a URL of Dropbox or OneDrive that is a public folder and they can select which images (I would like a thumbnail of those images so they can select them) they would like to choose. Whichever they choose, are downloaded.

How can I accomplish this? Any help or guidance would be greatly appreciated.

Thank you.