如何更新闪亮的fileInput对象？ [英] how can I update a shiny fileInput object?

问题描述

我要创建一个输入文件对话框。使用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来重新呈现文件输入元素。我宁愿走"更新之路"(如果有的话)……

HTML

正如@Julien Navarre指出的那样，这归结为修改一些推荐答案/CSS。朱利安从客户端展示了如何做到这一点。有待展示的是如何从服务器端做到这一点。即服务器将调用客户端上的函数，该函数将使输入处理程序倒退。您可以找到一篇关于使用SHINYhere在服务器和客户端之间传递数据的博客文章。

在服务器端，关键函数是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(当然该按钮仅用于演示发布)。

您可以找到上面的代码here或像这样运行它

library(shiny)
runGist("8314905")

注意事项

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

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

未更改。我想这意味着要更深入地挖掘它。欢迎提出建议。

这篇关于如何更新闪亮的fileInput对象？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！