在Shiny中摆脱文件上传中的状态栏

时间:2016-11-15 21:41:36

标签: r file-upload shiny

我正在使用R shiny,我的应用程序是为了读取用户的文件以便稍后进行操作而构建的。我想尝试使用fileInput()命令,但我不想看到浏览选项旁边的加载栏。有没有办法摆脱它或隐藏它,使它看起来像一个按钮?此外,我可以重命名默认"浏览"对其他事情,比如"加载"?

或者,我想我会感兴趣的是有一个被推动的动作按钮,然后调用inputFile()命令,但我很难实现它。

最终目标是我希望用户能够按下一个显示加载的按钮然后触发某种窗口弹出,允许用户上传文件,但我只想看到一个输入首页上的按钮。

1 个答案:

答案 0 :(得分:3)

“文件”类型的输入由您的浏览器控制和定义,因此您无法从Shiny端修改外观,但您可以隐藏它。

文件输入也会对Label作出反应,因此您可以根据需要修改标签的外观。

第一步是创建自己的fileinput功能版本。此新功能将使用CSS隐藏tags$input并自定义标签并可选择删除进度条。

下面是带有两个文件输入的代码作为带有自定义文本和图标的按钮,也有进度条和没有进度条。

library(shiny)

# based on the Shiny fileInput function
fileInput2 <- function(inputId, label = NULL, labelIcon = NULL, multiple = FALSE, 
                       accept = NULL, width = NULL, progress = TRUE, ...) {
  # add class fileinput_2 defined in UI to hide the inputTag
  inputTag <- tags$input(id = inputId, name = inputId, type = "file", 
                         class = "fileinput_2")
  if (multiple) 
      inputTag$attribs$multiple <- "multiple"
  if (length(accept) > 0) 
      inputTag$attribs$accept <- paste(accept, collapse = ",")

  div(..., style = if (!is.null(width)) paste0("width: ", validateCssUnit(width), ";"), 
    inputTag,
    # label customized with an action button
    tags$label(`for` = inputId, div(icon(labelIcon), label, 
                class = "btn btn-default action-button")),
    # optionally display a progress bar
    if(progress)
      tags$div(id = paste(inputId, "_progress", sep = ""), 
        class = "progress shiny-file-input-progress", 
        tags$div(class = "progress-bar")
      )
  )
}          


ui <- fluidPage(
  # define class fileinput_2 to hide inputTag in fileInput2
  tags$head(tags$style(HTML(
    ".fileinput_2 {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
    }"
  ))),
  sidebarLayout(
    sidebarPanel(
      h3("Without progress bar"),  
      fileInput2("file1", "Load File 1", labelIcon = "folder-open-o", 
          accept = c("text/csv",
            "text/comma-separated-values,text/plain",
            ".csv"), progress = FALSE),
      h3("With progress bar"),
      fileInput2("file2", "Load File 2", labelIcon = "file-code-o", 
          accept = c("text/csv",
            "text/comma-separated-values,text/plain",
            ".csv"), progress = TRUE)
    ),
    mainPanel(
       verbatimTextOutput("content1"),
       verbatimTextOutput("content2")
    )
  )
)

server <- function(input, output) {
  output$content1 <- renderPrint({
    inFile <- input$file1
    if (is.null(inFile))
      return(NULL)
    paste("File name 1:", inFile$name)
  })
  output$content2 <- renderPrint({
    inFile <- input$file2
    if (is.null(inFile))
      return(NULL)
    paste("File name 2:", inFile$name)
  })
}

shinyApp(ui, server)

enter image description here