RShiny: Input multiple image files and put them into a table - r

Question

I'm trying to work on a project in shiny to compare images uploaded by user and that saved in my amazon s3 server.
while downloading from s3, I am using this:
save_object(object=xyz ,bucket = "xyz", file = paste0("www/",xyz,".jpg"))
I'm taking input as:
fileInput("image","upload the image")
My dataframe is like this:
a$name<- xyz
a$server_image<- paste0("<img src=",'"',"xyz.jpg",'"'," ","height=",'"',"300",'"',"></img>")
a$uploaded_image<- paste0("<img src=",'"',input$image$datapath,'"'," ","height=",'"',"300",'"',"></img>")
I'm trying to get output like below.
output$output_table<-DT::renderDataTable({DT::datatable(a,escape = FALSE)})
In this case, the image downloaded from aws s3 into "www/" directory is correctly showed in the table, but there is problem with viewing uploaded image.
I also tried to use file.copy on input$image to copy it to a folder "www", but it also doesn't work when I deploy the app.
How can I view an image taken using fileInput and View without using renderImage?

Answer 1

I'm suspecting that your app renders <img src=... before the file is copied in www.
A solution is to convert the image in its base64 encoding and then to render the table including the image from its base64 string.
library(shiny)
library(DT)
ui <- shinyUI(
fluidPage(
fileInput("image", "upload image"),
DT::dataTableOutput("table")
)
)
server <- shinyServer(function(input, output) {
base64 <- eventReactive(input$image, {
base64enc::dataURI(file=input$image$datapath, mime=input$image$type)
})
output$table <- DT::renderDataTable({
req(input$image)
dat <- data.frame(image = sprintf('<img src=%s height="300"></img>', base64()))
datatable(dat, escape=FALSE)
})
})