Render image before uploading it in Shiny

Question

I'm building a Shiny app that lets users upload images to the server. I'd like to display the image on the screen without having to upload it first and then get the rendered output back. Is this possible?

This is my code right now. You can select an image file, which gets uploaded. The image is then rendered from the file on the server side, after it's been received. I'd like to avoid the roundtrip.

UI

fluidPage(
    titlePanel("File upload"),
    sidebarLayout(
        sidebarPanel(
            fileInput("img", "Choose image file",
                accept=c("image/jpeg", "image/x-windows-bmp"))
        ),
        mainPanel(
            imageOutput("picture", width="500px", height="500px")
        )
    )
)

Server

function(input, output, session)
{
    output$picture <- renderImage({
        imgFile <- input$img
        if(is.null(imgFile))
            return(list(src=""))
        list(src=imgFile$datapath, alt=imgFile$name, contentType=imgFile$type)
    }, deleteFile=FALSE)

    # do more stuff with the file
}

Answer 1

Edit: Okay, I now the question is clear for me, I hope :). The problem is that pictures are added within <output id="list"></output>. So I would suggest clearing it before a new picture is added with: document.getElementById('list').innerHTML = ''

library(shiny)
library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("File upload"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Choose image file",
                accept=c("image/jpeg", "image/x-windows-bmp"))
    ),
    mainPanel(
      HTML('<output id="list"></output>')
    )
  )), 
  server = function(input, output, session){ 
    shinyjs::runjs("

                   function handleFileSelect(evt) {
                   document.getElementById('list').innerHTML = ''
                   var files = evt.target.files; // FileList object
                   // Loop through the FileList and render image files as thumbnails.
                   for (var i = 0, f; f = files[i]; i++) {

                   // Only process image files.
                   if (!f.type.match('image.*')) {
                   continue;
                   }

                   var reader = new FileReader();

                   // Closure to capture the file information.
                   reader.onload = (function(theFile) {
                   return function(e) {
                   // Render thumbnail.
                   var span = document.createElement('span');
                   span.innerHTML = ['<img class=\"thumb\" src=\"', e.target.result,
                   '\" title=\"', escape(theFile.name), '\"/>'].join('');
                   document.getElementById('list').insertBefore(span, null);
                   };
                   })(f);

                   // Read in the image file as a data URL.
                   reader.readAsDataURL(f);
                   }
                   }
                   document.getElementById('img').addEventListener('change', handleFileSelect, false);")

  })

Answer 2

You can use package shinyjs to call FileReader from HTML 5 read here

library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("File upload"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Choose image file",
                accept=c("image/jpeg", "image/x-windows-bmp")),
      HTML('<output id="list"></output>')
    ),
    mainPanel(
      imageOutput("picture", width="500px", height="500px")
    )
  )), 
server = function(input, output, session){ 
  shinyjs::runjs("

  function handleFileSelect(evt) {
   var files = evt.target.files; // FileList object
   // Loop through the FileList and render image files as thumbnails.
   for (var i = 0, f; f = files[i]; i++) {

   // Only process image files.
   if (!f.type.match('image.*')) {
   continue;
   }

   var reader = new FileReader();

   // Closure to capture the file information.
   reader.onload = (function(theFile) {
   return function(e) {
   // Render thumbnail.
   var span = document.createElement('span');
   span.innerHTML = ['<img class=\"thumb\" src=\"', e.target.result,
   '\" title=\"', escape(theFile.name), '\"/>'].join('');
   document.getElementById('list').insertBefore(span, null);
   };
   })(f);

   // Read in the image file as a data URL.
   reader.readAsDataURL(f);
   }
   }
   document.getElementById('img').addEventListener('change', handleFileSelect, false);")

  output$picture <- renderImage({
    imgFile <- input$img
    if(is.null(imgFile))
      return(list(src=""))
    list(src=imgFile$datapath, alt=imgFile$name, contentType=imgFile$type)
    }, deleteFile=FALSE)
})