R Shiny File Upload Widget Not Working

April 14, 2022 Post a Comment

TL;DR

Nobody wants to use a tiresome dashboard. At Appsilon, we oft hear this complaint from clients: "We've built a fantastic Shiny dashboard, merely it's incredibly slow and no one wants to use it." No matter how complicated they are, Shiny dashboards practice not have to be slow! Ane powerful way to speed up the functioning of R Shiny applications is to leverage Shiny's spider web nature and push actions to the browser. This article volition evidence yous how to omit the server bottleneck with updateInput, leverage CSS classes, and accept advantage of JavaScript actions for smoother Shiny operation.

"The reason for Shiny's slow activeness [is] unremarkably not Shiny." – Winston Chang

Introduction: server.R Slows Down Shiny
Speed Up R Shiny Performance with updateInput
Enhance R Shiny UI with CSS Classes
Using R Shiny with JavaScript Actions
Larn More: Shiny Tutorials

Introduction: server.R Slows Downwards Shiny

It is like shooting fish in a barrel to fall in dearest with R Shiny's capacity for reactivity. The power to parametrize every detail in the server.R file can be specially tempting for those with R programming rather than a web app development groundwork. As always, with keen power comes great responsibility, and overusing this feature may atomic number 82 to significant application functioning issues. This can atomic number 82 to a long initial loading fourth dimension, where elements slowly pop onto the screen one by one. Users might besides be forced to look a few seconds after each click. Slow performance is a main reason that users lose interest in an application. No matter how great your application is, information technology needs to be fast to be a success!

This huge negative impact on performance might not become credible until the production reaches maturity and is hard to refactor because the codebase is big and complex. Adhering to the rules and tips discussed in this article from the very start of your projection is the key to developing efficient R Shiny apps whilst taking advantage of the reactivity feature.

Old Faithful Geyser

Speed Up R Shiny Performance with updateInput

Anyone who has built their start Old Faithful Geyser R Shiny app is familiar with how a Shiny app is split into ii parts – ui and server . Typically, application development begins with having these two worlds separated, i.e. widgets (UI elements) and logic are kept separate in the ui.R and server.R files respectively. Even so, the developer somewhen gets to a bespeak where the UI itself is dependent on the beliefs of other widgets, user input, actions, and clicks. There is a temptation to pack everything into the renderUI function and let reactivity practice the work. While tempting, relying too much on the renderUI function volition deadening down performance. The developer tin speed up the R Shiny application significantly with just a bit more code, as I nowadays in the post-obit case.

Consider these two strategies to deploy two equivalent numeric inputs updated by a push:

                          library(shiny)              ui <- fluidPage(                              titlePanel("Shiny Super Solutions 6!"),                              numericInput(                              "update_input",                              label = "I will exist updated using updateInput",                              value = 0,                              min = 0,                              max = x                ),                uiOutput("render_input"),                                                          actionButton(                              "click_button",                              label = "I will update numeric inputs!"                              )              )              server <- function(input, output, session) {                              output$render_input <- renderUI({                              numericInput(                              "render_input",                              label = "I will be updated using reactivity",              value = if(is.nada(input$click_button)) {          0       } else {          input$click_button       },                              min = 0,                              max = 10                              )                })                              observeEvent(input$click_button, {                              updateNumericInput(                              session,                              "update_input",                              value = input$click_button                              )                              })              }              shinyApp(ui, server)

At first glance their resulting behavior is identical:

Shiny Update Click Every bit long as the application is small, it is difficult to spot any deviation in performance between updateInput and renderUI . Therefore, ane may think at that place is no adventure to using renderUI in the initial stages of app development…at least until the app grows in size, when functioning issues become apparent.

Call up about the trouble this fashion: when Shiny spots a difference in the input , it goes through all the elements that react to it. The render solution recreates the entire widget, including the label, edge and other features. In most cases we are only interested in modifying the value within, so we should focus on this chore only.

Likewise note what happens when the app starts (I'm refreshing the page in this graphic):

Shiny Reactivity Practise you see how the reactivity department pops in and out of existence? The flickering of the input created by reactivity occurs because the rendering is washed on the server rather than in the browser. Commencement a Shiny app outset goes through the UI portion, creates all the features coded in that location, and then reaches out to the server components. In a real app, handling UI via the server will result in poor UX: after opening the app, the user will see mostly blank spaces that slowly fill in with content one by one, causing a lot of distraction and potentially fifty-fifty confusion. Instead, all widgets should already be there, waiting for the user, and only pocket-sized portions (such equally a value inside of a field) should be left open to modification on the fly.

Raise R Shiny UI with CSS Classes

Information technology is possible (and even simple) to make use of JavaScript and CSS rules to manner the content within an R Shiny app. One time the app is running in the browser, it should be looked at equally any other web page from the UI perspective even if there is R code involved. Under the hood, an R Shiny app is in fact R code transformed into HTML. Therefore, R Shiny apps can be modified with CSS only like web apps. Using CSS allows y'all to enhance the style of your app beyond, for instance, the basic "primary-blue, warning-orange, danger-ruby-red" options in stock Shiny applications.

Hither's an open underground: under the hood, an R Shiny app is in fact R code transformed into HTML.

The most efficient way to assign styles are CSS classes. You can use them to e.thousand., wrap your content in `div(class = 'myclass', …)`. Using IDs for the diverse elements can assist with constructing selectors – instructions for the browser that indicate which elements you are interested in modifying.

The ability to only switch classes further streamlines the style modification procedure. If yous are an R user I would recommend that you check out the fantabulous shinyjs package by Dean Attali. It will help you with web modifications starting at the code level, and so the transition into frontend coding will be smooth.

Think that you need to define classes before you lot start triggering them on and off. There is a comprehensive tutorial by R Studio on how to implement CSS within a Shiny app, but I would encourage you to become a step further and utilize SASS . Whilst SASS is beyond the scope of this article, I can recommend a nice overview of SASS past my colleague Pedro Silva. Pedro too has a great primer on getting started with CSS and R Shiny .

Using JavaScript Actions with R Shiny

Because Shiny applications can be treated like any other webpage once they are in the browser, nosotros tin also make apply of JavaScript code to heighten them. Using JavaScript allows for keeping an action's logic inside the browser rather than sending the action trigger to the server and slowing down the app. This is benign, considering there is a resources overhead for passing information between the ui and the server. Therefore, it is best to avoid communicating with the server if in that location is no need to get beyond the UI code. Consider this equivalent buttons instance:

                          library(shiny)              library(shinyjs)              ui <- fluidPage(                              useShinyjs(),                              titlePanel("Shiny Super Solutions 6!"),                                            actionButton(                              "js_update",                              label = "I will exist updated using javascript",                              icon = icon("arrow-up")                              ),                              uiOutput("shiny_update"),                              actionButton(                              "click_button",                              label = "I will update icons!",                              onclick = "                              $('#js_update > i').toggleClass('fa-pointer-up');                              $('#js_update > i').toggleClass('fa-arrow-down');                              "                              )              )              server <- role(input, output, session) {                              output$shiny_update <- renderUI({     clicks <- input$click_button     icon_status_up <-       is.null(clicks) || clicks %% two == 0     icon_name <- if(icon_status_up) {       "arrow-up"     } else {       "pointer-down"     }                              actionButton(                              "shiny_update",                              label = "I volition be updated using reactivity",                              icon = icon(icon_name)                              )                              })              }              shinyApp(ui, server)

Both buttons start with the arrow-upwards icon, but they are modified in a very different way.

After each click in the "classic" Shiny solution ( shiny_update button), data is passed to the server, candy with R code and the whole push is re-rendered. In the JavaScript-based solution ( js_update button) the data never exits the browser or communicates with the server, making it a very fast solution (note also that less code was used and that the entire logic is in a single file). In this example, JavaScript instructions are added inline to the R code. For more complicated solutions I recommend adding additional, independent JS scripts. You can learn more than about connecting Shiny with JavaScript here .

In our instance, the solutions are truly equivalent and while it'southward technically still possible, it is very difficult to spot the divergence. However, small changes like this will be crucial as your Shiny app grows in complication!

Shiny Arrows

These 3 simple tools – updateInput, CSS, and Javascript – will bring your Shiny projects to an entirely new level. Need assist with an enterprise Shiny dashboard? Reach out to us at [email protected]!

Learn More than

Appsilon engineer Krystian Igras'due south invitee post on RStudio'south blog: four Tips to Make Your R Shiny Dashboard Faster
Appsilon engineer Pedro Silva's Guide to SASS
Pedro Silva'due south Guide to using CSS with Shiny