How can I browse and upload an image in a shiny application? - r

I want to create a shiny application which will the user the ability to browse and load an image and then display it. My question is whether this is supported by shiny.
#ui.r
pageWithSidebar(
headerPanel('Image Recognition'),
sidebarPanel(
fileInput("file1", "Choose Image",
accept = c(
".jpg")
))
,
mainPanel(
imageOutput("file1")
)
)
#server.r
library(shiny)
function(input, output, session) {
(shiny.maxRequestSize=30*1024^2)
output$myImage <- renderImage({
# A temp file to save the output.
# This file will be removed later by renderImage
file1 <- tempfile(fileext = '.png')
# Generate the PNG
png(file1, width = 400, height = 300)
dev.off()
# Return a list containing the filename
list(src = file1,
contentType = 'image/png',
width = 400,
height = 300,
alt = "This is alternate text")
}, deleteFile = TRUE)
}

Here is a solution using base64 encoding of the uploaded file.
library(shiny)
library(base64enc)
options(shiny.maxRequestSize = 30*1024^2)
ui <- fluidPage(
fileInput("upload", "Upload image", accept = "image/png"),
uiOutput("image")
)
server <- function(input, output){
base64 <- reactive({
inFile <- input[["upload"]]
if(!is.null(inFile)){
dataURI(file = inFile$datapath, mime = "image/png")
}
})
output[["image"]] <- renderUI({
if(!is.null(base64())){
tags$div(
tags$img(src= base64(), width="100%"),
style = "width: 400px;"
)
}
})
}
shinyApp(ui, server)

Related

How to Upload Image File, Display and Remove it on Shiny R

Need Help, I would like to upload an image file display it on shiny and the image can be remove.
I already tried but the problem is first attemp upload file is OK but second attemp is the image are not displayed.
library(shiny)
ui <- fluidPage(
sidebarLayout(
sidebarPanel(
fluidRow(
fileInput("myFile", "Choose a file", accept = c('image/png', 'image/jpeg')),
actionButton('reset', 'Reset Input')
)
),
mainPanel(
div(id = "image-container", style = "display:flexbox")
)
)
)
server <- function(input, output) {
observeEvent(input$myFile, {
inFile <- input$myFile
if (is.null(inFile))
return()
b64 <- base64enc::dataURI(file = inFile$datapath, mime = "image/png")
insertUI(
selector = "#image-container",
where = "afterBegin",
ui = img(src = b64, width = 600, height = 600)
)
})
observeEvent(input$reset, {
removeUI(
selector = "#image-container",
)
})
}
shinyApp(ui = ui, server = server)
Any solution is really appreciated
With your removeUI you are removing the container. Remove its content instead:
observeEvent(input$reset, {
removeUI(
selector = "#image-container > *"
)
})

How to put entire image location in tags$img of shiny package?

The following code for tags$img is:
Working...when the image is stored in 'www' folder and src = "Rlogo.png"
Not working...when entire path of the image is given
I need to put the entire location in one of my shiny app where the app.R file will be run from command prompt. Please help thanks..
library(shiny)
ui <- fluidPage(
box(
tags$img(height = 100, width = 100,src = "Rlogo.png"),
tags$img(height = 100, width = 100,src = "E:/myApp/www/Rlogo.png")
)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
use imageOutput instead of tags$img:
library(shiny)
ui <- fluidPage(
box(
tags$img(height = 100, width = 100,src = "Rlogo.png"),
imageOutput('image')
)
)
server <- function(input, output, session) {
output$image <- renderImage({
list(src = "E:/myApp/www/Rlogo.png",
alt = "This is alternate text"
)
}, deleteFile = TRUE)
}
shinyApp(ui, server)

display png file in shinyR

I am trying to display a png file using shiny. file is uploaded but not displayed properly. I have included both ui and server code
ui <- fluidPage(
titlePanel("Upload Slide Image"),
sidebarLayout(
sidebarPanel(fileInput("file1", "Choose png File", multiple = TRUE,
accept = c(".png")) ), # Input: Select a file ----
mainPanel(imageOutput("myImage"))
)
)
server <- function(input, output, session){
output$myImage <- renderImage({
outfile <- tempfile(fileext = '.png')
png(outfile, width = 400, height = 300) # Generate the PNG
dev.off()
list(src = outfile,contentType = 'image/png',width = 400, height = 300,
alt = "This is alternate text")
}, deleteFile = TRUE)
}
# Create Shiny app ----
shinyApp(ui, server)
You are not doing anything with input (as mentioned by #RolandASc). Rather you are generating a new png file in your server.
As a source, you need to add input$file1$datapath to use the file that has been uploaded using the UI, as mentioned in this answer.
ui <- fluidPage(
titlePanel("Upload Slide Image"),
sidebarLayout(
sidebarPanel(fileInput("file1", "Choose png File", multiple = TRUE,
accept = c(".png")) ), # Input: Select a file ----
mainPanel(imageOutput("myImage"))
)
)
server <- function(input, output, session){
observe({
if (is.null(input$file1)) return()
output$myImage <- renderImage({
## Following three lines CREATE a NEW image. You do not need them
#outfile <- tempfile(fileext = '.png')
#png(outfile, width = 400, height = 300) # Generate the PNG
#dev.off()
list(src = input$file1$datapath, contentType = 'image/png',width = 400, height = 300,
alt = "This is alternate text")
}, deleteFile = TRUE)
})
}
# Create Shiny app ----
shinyApp(ui, server)
EDIT: I have added a check in observe to cater for error when the app is first run.

Download plots as PNG documents

I am fairly new to Shiny Apps and I wish to download the plots as png/pdf file. After publishing the app online, the downloaded filename is correct but it is an empty file. I applied print function in content for downloadHandler but it doesn seem to work. Can anyone help me out? Thanks
ui.r
library(shiny)
ui <- fluidPage(
titlePanel("My First Shiny Project"),
sidebarLayout(
sidebarPanel(
selectInput("select","Choose a Dataset",
choices = list("trees","pressure"),
selected = "pressure"),
selectInput("format","Choose file format",
choices = list("pdf","png"))
),
mainPanel(
plotOutput("graph")
)
),
downloadButton("download","Download Here")
)
server.r
library(shiny)
server <- function(input,output){
data <- function()({
switch(input$select,
"trees" = trees,
"pressure" = pressure)
})
output$graph <- renderPlot(
plot(data())
)
output$download <- downloadHandler(
filename = function(){
paste("data",input$select,input$format,sep = ".")
},
content = function(file){
if(input$format == "png")
png(file)
if(input$format == "pdf")
pdf(file)
print(plot(data()))
dev.off
}
)
}
It seems that the only issue was that you used dev.off instead of dev.off(), you also do not need the print() statement. A working version of your code is shown below, hope this helps!
library(shiny)
library(ggplot2movies)
library(dplyr)
ui <- fluidPage(
titlePanel("My First Shiny Project"),
sidebarLayout(
sidebarPanel(
selectInput("select","Choose a Dataset",
choices = list("trees","pressure"),
selected = "pressure"),
selectInput("format","Choose file format",
choices = list("pdf","png"))
),
mainPanel(
plotOutput("graph")
)
),
downloadButton("download","Download Here")
)
server <- function(input,output){
data <- function()({
switch(input$select,
"trees" = trees,
"pressure" = pressure)
})
output$graph <- renderPlot(
plot(data())
)
output$download <- downloadHandler(
filename = function(){
paste("data",input$select,input$format,sep = ".")
},
content = function(file){
if(input$format == "png")
png(file)
if(input$format == "pdf")
pdf(file)
plot(data())
dev.off()
}
)
}
shinyApp(ui,server)

renderImage NOT DISPLAYING - R Shiny (only alt text)

Using the code below, I am only getting the alt text to appear.
Any suggestions on what may be the problem?
From server.R:
output$face <- renderImage({
list(src = "http://www.clipartbest.com/cliparts/yco/GGE/ycoGGEacE.png",
filetype = "image/png",
alt = "YOU MUST BE KIDDING ME!")
}, deleteFile = FALSE)
From ui.R:
imageOutput("face")
Thanks,
Chad
Adding to the explanation of the problem - I am not just trying to display the image. Rather, I am trying to make it reactive - and display a different image, based on inputs... per the server.R code below:
output$imagegauge <- renderImage({
if (is.null(IRR_calc()))
return(NULL)
if (IRR_calc() > .085) {
return(list(
src = "http://www.i2symbol.com/images/abc-123/o/white_smiling_face_u263A_icon_256x256.png",
contentType = "image/png",
alt = "Smiley Face"
))
} else {
return(list(
src = "http://www.clipartbest.com/cliparts/yco/GGE/ycoGGEacE.png",
filetype = "image/png",
alt = "Sad Face"
))
}
}, deleteFile = FALSE)
Thanks again,
Chad
renderImage takes a file as src input rather then a url. You can just include this image directly using tags$img :
library(shiny)
runApp(list(
ui = fluidPage(
titlePanel("Hello Shiny!"),
sidebarLayout(
sidebarPanel(
numericInput('n', 'Number of obs', 100),
numericInput('m', 'Select image (Happy (1) or Sad(2))', 1, min = 1, max = 2),
uiOutput('test')
),
mainPanel(
plotOutput('plot')
)
)
),
server = function(input, output) {
output$plot <- renderPlot({ hist(runif(input$n)) })
output$test <- renderUI({
images <- c("http://www.i2symbol.com/images/abc-123/o/white_smiling_face_u263A_icon_256x256.png"
, "http://www.clipartbest.com/cliparts/yco/GGE/ycoGGEacE.png")
tags$img(src= images[input$m])
})
}
))

Resources