如何在R包开发场景下不依赖shinyjs重置Shiny应用中的FileInput组件

Since you can't rely on shinyjs for your R package, we can use Shiny's native custom messaging system to directly reset the fileInput's display state from the server. This approach works by sending a signal from R to the client-side JavaScript, which then manipulates the DOM elements of the fileInput to revert it to its initial state.

Here's the modified version of your app with this functionality:

library(shiny)
library(shinythemes)

ui <- fluidPage(
  titlePanel("Old Faithful Geyser Data"),
  # Add custom JavaScript to handle fileInput reset
  tags$script(HTML("
    Shiny.addCustomMessageHandler('reset_fileinput', function(inputId) {
      const fileInput = document.getElementById(inputId);
      if (fileInput) {
        // Reset the file input's value to clear the selected file
        fileInput.value = '';
        // Update the displayed text back to the placeholder
        const label = fileInput.nextElementSibling;
        if (label) {
          label.textContent = fileInput.placeholder;
        }
      }
    });
  ")),
  fileInput(
    inputId = "ABC", 
    label = "Input File", 
    multiple = FALSE, 
    accept = NULL, 
    width = "20%", 
    buttonLabel = "Browse...", 
    placeholder = "You didn't choose any files to test, so select beside"
  ),
  sidebarLayout(
    sidebarPanel(
      h4("Select the best number of bins"),
      br(),
      br(),
      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
      actionButton("reset", "Reset")
    ),
    mainPanel(plotOutput("distPlot"))
  )
)

server <- function(input, output, session) {
  output$distPlot <- renderPlot({
    x    <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
  
  observeEvent(input$reset, {
    # Reset the slider input
    updateSliderInput(session, "bins", value = 1)
    # Send custom message to reset the fileInput
    session$sendCustomMessage(
      type = "reset_fileinput",
      message = "ABC" # Pass the inputId of the fileInput to reset
    )
  })
}

shinyApp(ui = ui, server = server)

How this works: #

• We add a custom JavaScript handler using Shiny.addCustomMessageHandler that listens for a message named reset_fileinput. When this message is received, it:
  1. Finds the fileInput element by its ID.
  2. Clears the file input's value to remove the selected file reference.
  3. Updates the displayed text (the label next to the browse button) back to the original placeholder text.
• In the server, when the reset button is clicked, we send this custom message with the ID of the fileInput we want to reset using session$sendCustomMessage.

This method is fully compatible with standard Shiny and doesn't require any additional packages beyond what you're already using.

内容的提问来源于stack exchange，提问作者Antonio