如何仅保留Shiny fileInput的按钮功能，去除文本框和进度条？

我需要在Shiny仪表盘的自定义模态框里做一个仅保留按钮的文件上传控件，要求能打开文件资源管理器并限制只能选择.csv和.xlsx文件。目前用fileInput()实现了功能，但它自带的文件路径文本框和上传进度条是多余的，我已经用htmltools写出了仅保留按钮的版本，代码如下：

library(htmltools)
library(shiny)

fileInput_button <- fileInput("user_sent_data",
                              "Choose file...", 
                              accept = c(".csv", ".xlsx"))

fileInput_button <- htmltools::tagQuery(fileInput_button)$
  find(".input-group-btn.input-group-prepend")$
  selectedTags()

# We need to replace the text in the span, so we'll extract the unchanging part,
# empty the original (text + extracted part) and the fill it back with the extracted part
fileInput_text <- "Choose file..."

input_part <- htmltools::tagQuery(fileInput_button)$find("input")$
  selectedTags()

fileInput_button <- htmltools::tagQuery(fileInput_button)$
  find("span")$
  empty()$ # getting rid of the text and input_part
  append(fileInput_text, input_part)$
  allTags()

想知道有没有更优的实现方案，也欢迎推荐相关的R包。另外我之前认为纯HTML无法实现既能打开文件浏览器又能指定文件格式的需求，这个认知是否正确？

方案一：简化htmltools操作（最省心） #

不需要复杂的提取和拼接，直接用tagQuery移除fileInput自带的多余元素即可，代码更简洁：

library(shiny)
library(htmltools)

fileInput_button <- fileInput("user_sent_data", "Choose file...", accept = c(".csv", ".xlsx"))

# 移除不需要的文本框和进度条
fileInput_button <- tagQuery(fileInput_button) %>%
  find(".input-group-text, .progress") %>% # 定位文本框和进度条元素
  remove() %>%
  allTags()

# 直接在UI中使用
ui <- fluidPage(fileInput_button)
server <- function(input, output, session) {
  observeEvent(input$user_sent_data, {
    req(input$user_sent_data)
    # 这里处理上传的文件
    print(input$user_sent_data)
  })
}
shinyApp(ui, server)

这个方案保留了fileInput的原生上传逻辑，不需要额外JS，只做DOM元素的移除操作，维护成本低。

方案二：原生HTML实现（灵活性最高） #

你的认知有误，纯HTML完全可以实现打开文件浏览器+指定文件格式，通过input[type="file"]的accept属性就能限制文件类型。配合Shiny的input绑定，就能实现自定义按钮样式：

library(shiny)

ui <- fluidPage(
  # 隐藏原生文件选择框，用自定义按钮触发
  tags$input(
    type = "file",
    id = "user_sent_data",
    name = "user_sent_data", # 必须和id一致，Shiny才能识别上传内容
    accept = ".csv,.xlsx",
    style = "display: none;"
  ),
  # 自定义上传按钮
  tags$button(
    "选择文件",
    type = "button",
    onclick = "document.getElementById('user_sent_data').click();",
    class = "btn btn-default" # 套用Shiny默认按钮样式，也可以自定义CSS
  )
)

server <- function(input, output, session) {
  observeEvent(input$user_sent_data, {
    req(input$user_sent_data)
    # 处理上传文件，用法和原生fileInput完全一致
    print(input$user_sent_data)
  })
}
shinyApp(ui, server)

这个方案可以完全自定义按钮的样式、文案，甚至绑定其他交互逻辑，灵活性拉满。

方案三：用shinyWidgets实现美化版按钮 #

如果需要更美观的按钮样式，可以用shinyWidgets包的按钮组件配合文件输入：

library(shiny)
library(shinyWidgets)
library(shinyjs) # 用于执行JS代码

ui <- fluidPage(
  useShinyjs(), # 必须加载shinyjs
  tags$input(
    type = "file",
    id = "user_sent_data",
    name = "user_sent_data",
    accept = ".csv,.xlsx",
    style = "display: none;"
  ),
  # 用shinyWidgets的actionBttn做美化按钮
  actionBttn(
    inputId = "upload_btn",
    label = "选择文件",
    style = "fill", # 可选样式：fill、material、pill等
    color = "primary"
  )
)

server <- function(input, output, session) {
  # 点击按钮触发文件选择框
  observeEvent(input$upload_btn, {
    runjs("document.getElementById('user_sent_data').click();")
  })
  
  # 处理上传文件
  observeEvent(input$user_sent_data, {
    req(input$user_sent_data)
    print(input$user_sent_data)
  })
}
shinyApp(ui, server)

这个方案可以快速实现风格统一的美化按钮，适合注重UI美观度的场景。

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