如何在点击后更新Shiny中fileInput的按钮标签？

要实现点击自定义fileInput按钮后修改标签并添加图标，可通过shinyjs::runjs()直接操作DOM元素完成，以下是具体方案：

核心思路 #

自定义后的fileInput按钮，其实际按钮元素是与文件输入框并列的兄弟节点，我们可以通过jQuery选择器定位到该按钮，替换其HTML内容（支持同时添加文本和图标）。Shiny默认兼容Font Awesome图标，可直接调用。

修改后的完整代码 #

library(shiny)
library(shinyjs)

# 自定义fileInput，隐藏标签和文本框
fileInput2 <- function(..., label="") {
  temp <- fileInput(..., label=label)
  # 移除标签
  temp$children[[1]] <- NULL
  # 移除输入文本框
  temp$children[[1]]$children[[2]] <- NULL
  # 移除输入组样式类，简化按钮样式
  temp$children[[1]]$attribs$class <- NULL
  temp$children[[1]]$children[[1]]$attribs$class <- NULL
  temp
}

ui <- fluidPage(
  shinyjs::useShinyjs(),
  # 隐藏进度条
  tags$head(tags$style(".shiny-file-input-progress {display: none}")),
  fileInput2("file", label=NULL, buttonLabel="Get File", placeholder=NULL, width='175px'),
)

server <- function(input, output, session) {
  observeEvent(input$file,{
    # 此处编写数据加载及处理逻辑
    # ...
    
    # 禁用按钮并修改样式
    shinyjs::disable("file")
    runjs('$("#file").parents("span").addClass("disabled")')
    
    # 修改按钮标签并添加Font Awesome对勾图标
    runjs('$("#file").siblings(".btn").html("<i class=\'fa fa-check\'></i> Done")')
  })
}

shinyApp(ui,server)

关键代码说明 #

• $("#file").siblings(".btn"): 精准定位到fileInput对应的按钮元素，自定义结构中按钮是文件输入框的兄弟节点
• .html("<i class='fa fa-check'></i> Done"): 替换按钮的HTML内容，其中<i class='fa fa-check'></i>是Font Awesome的对勾图标，后面紧跟修改后的文本"Done"
• 保留原有禁用逻辑，确保按钮状态与视觉效果一致

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