Render images for interactive display from folder loaded with shinyDirChoose - r

Question

The code below works if the user chooses several images. How can I implement this with shinyDirChoose, so that the user only chooses the folder where the images are located.
Problem: I don't know how to get the local datapath which is stored in the files() object. This path is needed for rendering the images.
Couldn't find any good answers in the web so far.
library(shiny)
ui <- shinyUI(fluidPage(
tags$script('
$(document).on("keydown", function (e) {
Shiny.onInputChange("rightCursor", [e.which,e.timeStamp]);
});
'),
sidebarLayout(
sidebarPanel(
fileInput(inputId = 'files',
label = 'Select an image or several images',
multiple = TRUE,
accept=c('image/png', 'image/jpeg'))
),
mainPanel(
uiOutput('images'),
tableOutput('files')
)
)
))
server <- shinyServer(function(input, output) {
rv <- reactiveValues(page = 1)
output$files <- renderTable(input$files)
files <- reactive({
files <- input$files
files$datapath <- gsub("\\\\", "/", files$datapath)
files
})
output$images <- renderUI({
if(is.null(input$files)) return(NULL)
imagename = paste0("image", rv$page)
image_output <- imageOutput(imagename)
})
observe({
if(is.null(input$files)) return(NULL)
for (i in 1:nrow(files()))
{
print(i)
local({
my_i <- i
imagename = paste0("image", my_i)
output[[imagename]] <-
renderImage({
list(src = files()$datapath[my_i], width = 400, height = 400,
alt = "Image failed to render")
}, deleteFile = FALSE)
})
}
})
navPage <- function(direction) {
rv$page <- rv$page + direction
}
observeEvent(input$rightCursor,{
navPage(1)
print(rv$page)
})
})
shinyApp(ui=ui,server=server)
The user only chooses the folder where the images are located, instead of one or several files.

Answer 1

Here is a way.
library(shiny)
library(shinyFiles)
ui <- fluidPage(
tags$head(
tags$script('
$(document).on("keydown", function (e) {
Shiny.onInputChange("rightCursor", [e.which,e.timeStamp]);
});
')
),
mainPanel(
shinyDirButton("dir", "Input directory", "Upload"),
verbatimTextOutput("dir", placeholder = TRUE),
uiOutput('images')
))
server <- function(input, output) {
shinyDirChoose(
input, "dir", roots = c(home = "~"), filetypes = c("png", "jpg")
)
folder <- reactiveVal()
output$dir <- renderText({
folder()
})
observeEvent(input$dir, {
if (!"path" %in% names(input$dir)) return()
home <- normalizePath("~")
folder(
file.path(
home,
paste(unlist(input$dir$path[-1]), collapse = .Platform$file.sep)
)
)
})
files <- eventReactive(folder(), {
list.files(folder(), full.names = TRUE)
})
page <- reactiveVal(1)
output$images <- renderUI({
req(files())
imagename = paste0("image", page())
imageOutput(imagename)
})
observeEvent(files(), {
for (i in 1:length(files()))
{
print(i)
local({
my_i <- i
imagename = paste0("image", my_i)
output[[imagename]] <-
renderImage({
list(src = files()[my_i], width = 400, height = 400,
alt = "Image failed to render")
}, deleteFile = FALSE)
})
}
})
observeEvent(input$rightCursor,{
page(page()+1)
})
}
# Run the application
shinyApp(ui = ui, server = server)