Display the image before submitting it on Shiny platform

Question

Display the image before submitting it on Shiny platform

I'm currently developing a Shiny app that enables users to upload images directly to the server. I am wondering if there is a way to display the image on the screen without going through the process of uploading it first and then receiving the rendered output.

As of now, my code allows users to select an image file for upload, which is then processed and rendered from the server side after being received. I am looking for a solution that eliminates this roundtrip.

User Interface

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

Server Side Functions

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)

    # additional processing can be done with the image file here
}

javascript r shiny shinyjs

Answer 1

Answer №1

One way to utilize the shinyjs package is by invoking the FileReader function in HTML 5. For more information, you can take a look at this resource here.

library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("Upload Your Files"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Select an 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 handleFileSelection(evt) {
   var files = evt.target.files; // FileList object
   // Iterate through the FileList and display 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) {
   // Show 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 the image file as a data URL.
   reader.readAsDataURL(f);
   }
   }
   document.getElementById('img').addEventListener('change', handleFileSelection, 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)
})

Answer 2

One way to utilize the shinyjs package is by invoking the FileReader function in HTML 5. For more information, you can take a look at this resource here.

library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("Upload Your Files"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Select an 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 handleFileSelection(evt) {
   var files = evt.target.files; // FileList object
   // Iterate through the FileList and display 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) {
   // Show 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 the image file as a data URL.
   reader.readAsDataURL(f);
   }
   }
   document.getElementById('img').addEventListener('change', handleFileSelection, 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)
})

Answer 3

Answer №2

Update: Well, after some consideration, I think I now have a clear understanding of the question :). The issue at hand is that images are being included within

<output id="list"></output>

. Therefore, my suggestion would be to clear it before adding a new picture by using:

document.getElementById('list').innerHTML = ''

library(shiny)
library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("Upload Files"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Select an 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 display 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) {
                   // Display 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 4

Update: Well, after some consideration, I think I now have a clear understanding of the question :). The issue at hand is that images are being included within

<output id="list"></output>

. Therefore, my suggestion would be to clear it before adding a new picture by using:

document.getElementById('list').innerHTML = ''

library(shiny)
library(shinyjs)
shinyApp(ui = fluidPage(
  useShinyjs(),
  titlePanel("Upload Files"),
  sidebarLayout(
    sidebarPanel(
      fileInput("img", "Select an 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 display 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) {
                   // Display 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);")

  })

Display the image before submitting it on Shiny platform

Answer №1

Answer №2

Similar questions

The footer seems to be losing its stickiness and not staying at the bottom when I

Convenient method for extracting the final element within a jQuery section

Why did my compilation process fail to include the style files despite compiling all other files successfully?

The initial $http POST in Angular ends up hitting the error path within the .then function despite the successful execution of the

Tips on configuring a hidden input field to validate a form

Enhancing TypeScript builtin objects in Netbeans using a custom plugin

What is the best way to prevent a directory from being included in the Webpack bundle?

Checkbox: Activate button upon checkbox being selected

Special characters like greater/less than signs have not been properly encoded

Iterate over the JSON data and evaluate the timestamps for comparison

What is the best way to change the height of a div element as the user scrolls using JavaScript exclusively?

Tips for consolidating outputs from three different APIs using JavaScript and AJAX? [Pseudo code example]

The drop-down menu keeps flickering instead of remaining open when clicked

Discovering targeted information from object utilizing React

Iterate through the dataframe to extract distinct values associated with individual values in another column

The process of loading the Facebook like script using $.getScript is causing an issue where the

Error: Unable to call the 'model' function on the 'users' object in Mongoose due

Transferring ipywidgets to a web platform

Access-Control-Allow-Origin does not accept null as the origin with XMLHttpRequest

Creating a function to update data in a Node.js/MongoDB environment