如何更新闪亮的fileInput对象？

Question

我想创建一个输入文件对话框.这很简单,使用该fileInput功能.

shinyUI(pageWithSidebar(
  headerPanel(""),
  sidebarPanel(
    fileInput("file", "Select a file")  
  ),
  mainPanel()
))

上传后,它看起来像这样:

现在,我想将inputFile元素重置为上传前的状态.由于没有像updateFileInput我这样的JS/HTML菜鸟这样的功能,我无法弄清楚我是如何实现这一目标的.输出的代码fileInput("file", "Select a file")如下.

<label>Select a file</label>
<input id="file" type="file" accept="text/plain"/>
<div id="file_progress" class="progress progress-striped active shiny-file-input-progress">
  <div class="bar"></div>
  <label></label>
</div> 

有任何想法吗？

PS.我不想在renderUI这里使用反应来重新渲染文件输入元素.我宁愿去'更新方式'(如果有这样的事情)......

Answer 1

正如@Julien Navarre指出的那样,这归结为修改一些HTML/CSS.朱利安展示了如何从客户端那样做.还有待展示的是如何从服务器端执行此操作.即服务器将调用客户端上的一个函数,该函数将设置输入处理程序.您可以在此处找到有关在服务器和客户端之间传递数据的博客文章.

在服务器端,关键功能是在客户端session$sendCustomMessage调用处理函数resetFileInputHandler.文件输入对象的id传递给处理程序.

server.R

shinyServer(function(input, output, session) {

  observe({
    input$btn
    session$sendCustomMessage(type = "resetFileInputHandler", "file1") 
  })

})

现在,在客户端,我们需要注册一个处理程序函数,该函数将由服务器调用并执行Julien所述的必要更改.

ui.R

shinyUI(bootstrapPage(

  fileInput('file1', 'Choose File'),
  actionButton("btn", "Trigger server to reset file input"),

  tags$script('
    Shiny.addCustomMessageHandler("resetFileInputHandler", function(x) {      
        var id = "#" + x + "_progress";      # name of progress bar is file1_progress
        var idBar = id + " .bar";  
        $(id).css("visibility", "hidden");   # change visibility
        $(idBar).css("width", "0%");         # reset bar to 0%
    });
  ')
))

按下按钮现在将导致服务器调用resetFileInputHandler客户端(当然按钮仅用于演示目的).

你可以在这里找到上面的代码或像这样运行它

library(shiny)
runGist("8314905")

警告

此解决方案保持不变:在右侧显示闪亮对象的文件名

<input id="file1" type="file" class="shiny-bound-input">

没有改变.我想这意味着要深入挖掘它.欢迎提出建议.

Answer 2

也许现在为时已晚,但如果你还需要它,

当栏出现时,您会看到一个新的"样式"属性出现:

<div id="file1_progress" class="progress progress-striped shiny-file-input-progress" style="visibility: visible;">

所有与JS有关的方法是使用他的id("file1_progress")获取元素,并将"style"属性的参数"visibility"设置为"hidden".

我在Gist上放了一个例子,您可以通过运行以下命令来查看它(和代码):

shiny::runGist('8306992')

希望这有帮助.