如何在Shiny应用中实现动态新增文件上传字段及重置功能

需求说明 #

默认显示2个文件上传字段，支持点击按钮新增上传字段，点击重置按钮恢复到初始的2个字段状态。

完整实现代码 #

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "动态上传组件"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("图表", tabName = "plot", icon = icon("chart-bar")),
      menuItem("表格", tabName = "table", icon = icon("table"))
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "plot"),
      tabItem(tabName = "table",
              box(width = NULL, status = "primary", solidHeader = TRUE, 
                  title = "Upload",
                  # 动态生成上传组件的容器
                  uiOutput("upload_fields"),
                  br(),
                  # 添加和重置按钮
                  actionButton("add_btn", "新增上传字段"),
                  actionButton("reset_btn", "重置为初始状态")
              )
      )
    )
  )
)

server <- function(input, output, session) {
  # 用响应式变量跟踪上传字段的数量，初始为2
  upload_count <- reactiveVal(2)
  
  # 监听新增按钮，增加计数
  observeEvent(input$add_btn, {
    upload_count(upload_count() + 1)
  })
  
  # 监听重置按钮，恢复计数为2
  observeEvent(input$reset_btn, {
    upload_count(2)
  })
  
  # 动态生成上传字段
  output$upload_fields <- renderUI({
    num <- upload_count()
    lapply(1:num, function(i) {
      tagList(
        fileInput(paste0("classe", i),
                  label = paste0("Class ", i),
                  multiple = TRUE, accept = c(".jpg", ".jpeg",".png",".tif")),
        br()
      )
    })
  })
}

shinyApp(ui, server)

关键实现点 #

• 响应式变量跟踪数量：用reactiveVal(2)维护当前显示的上传字段数量，初始值设为2。
• 动态生成组件：通过renderUI结合lapply，根据当前计数生成对应数量的fileInput，每个组件的ID用classe1、classe2...这样的格式命名，方便后续获取上传文件。
• 按钮事件监听：分别为新增按钮和重置按钮添加observeEvent，修改响应式变量的值，触发UI的动态更新。

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