Search code examples
rshinydropbox

How to embed picture from dropbox in shiny

I'm building a shiny application where I want to be able to show dynamically chosen pictures from my dropbox without having to download them. I'm using rdrop2 for most of it. Here's what I've got (shortened version).

library(shiny)
library(shinydashboard)
library(rdrop2)
library(httr)

drop_auth(rdstoken = "token.rds")



ui <- dashboardPage(title = "digiHerb",
                    
                    dashboardHeader(),
                    
                    dashboardSidebar(),
                    
                    dashboardBody(
                      column(width=12,
                             
                      # print url (just for for troubleshooting, and the url is showing correctly)
                      box(width = NULL,
                          textOutput('path')),
                      
                      # Method 1
                      box(width = NULL,
                        htmlOutput("picture"))
                      
                      # Method 2 - iframe
                      ,
                      box(width=NULL,
                          uiOutput('myIFrame'))
                      
                      # Method 3
                      ,
                      box(width = NULL,
                        uiOutput("img"))
                      
                      #alternative method - fails with error 'cant find function GET'
                      #,
                      #box(width = NULL,
                      #    htmlOutput("includeHTML"))
                      ))
 
)
                    

server <- function(input, output, session) {
 

# get a list of the images from dropbox - they areall shared publically
shared <- drop_list_shared_links(verbose = F)
l <- length(shared$links)
sharedBefore <- data.frame()
for(i in 1:l){
  sharedBefore[i,1] <- shared$links[[i]]$name
  sharedBefore[i,2] <- shared$links[[i]]$url
}
colnames(sharedBefore) <- c("names", "url")


# using just a static entry for now (first entry) - this will become dynamic
preview <- sharedBefore[1,"url"]

output$path <- renderText(print(preview))

# Method 1
output$picture<-renderText({
   c('<img src="',
     preview,
     '">')
 })
 
# Method 2 - iframe
output$myIFrame<-renderUI({
  tags$iframe(src = preview)
})

# Method 3:
output$img <- renderUI({
   tags$img(src =  preview, width="100%")
 })
   
# Alternative method 2:
#request <- httr::GET(url=preview)
#dropB <- httr::content(request, as="text")
#output$includeHTML <- renderText({
#  dropB
#})

 
 }

shinyApp(ui = ui, server = server)

Does anyone have any suggestions as to why none of these methods work? The app is hosted on, and tested from, shinyapps.io. The log there shows no errors.

EDIT 10.08 : I found the source of the problem I think. The shiny app appears online with these little symbols where the pictures should be: enter image description here If I right click it and and press 'open image in a new tab' it takes me to the correct picture.(Actually I would prefer it took me to the preview url for that picture and not the actual picture, so if anyone now how to accomplish this as well, please share.) If instead I press inspect and then view the console I can see there's an error that reads:

Refused to display 'https://www.dropbox.com/..........JPG?dl=0' in a frame because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' ".

I would seem dropbox is not allowing me to view the picture 'remotely' or what to call it. So I haven't solved the question - I'm still stuck as to how to solve this issue.

Solution

  • I appears this is a known issue with dropbox that they don't allow iframes. There is a new functionality called the embedder which supposedly does this, but it's rather complicated. See discussion here: https://www.dropboxforum.com/t5/Dropbox-API-Support-Feedback/Embed-dropbox-folder-in-the-a-webpage/td-p/72455 Perhaps my ultimate solution will be to switch and use google drive or something, but I would miss the functionality of the rdrop2 package.