29

入力ファイル ダイアログを作成したい。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ここでは、ファイル入力要素を再レンダリングするためにリアクティブを使用したくありません。私はむしろ「更新方法」に行きたいと思います（そのようなものがある場合）...

4

5 に答える 5

9

@Julien Navarre が指摘したように、これは HTML/CSS の変更に要約されます。Julien は、クライアント側からそれを行う方法を示しました。表示されていないのは、サーバー側からそれを行う方法です。つまり、サーバーは、入力ハンドラーを戻すクライアント側の関数を呼び出します。Shiny を使用してサーバーとクライアント間でデータを渡す方法に関するブログ記事は、こちら にあります。

サーバー側で重要な機能は、クライアント側でsession$sendCustomMessageハンドラー関数を呼び出すことです。resetFileInputHandlerファイル入力オブジェクトの ID がハンドラーに渡されます。

サーバー.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">

変更されません。より深く掘り下げていくということだと思います。提案は大歓迎です。

于 2014-01-08T11:05:03.043 に答える
5

手遅れかもしれませんが、それでも必要な場合は、

バーが表示されると、新しい「スタイル」属性が表示されます。

<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')

この助けを願っています。

于 2014-01-07T22:14:17.923 に答える
4

ファイル入力 UI (進行状況バーと表示される名前の両方) をリセットする 2 つの方法があります。1 つ目は JavaScript を使用し、2 つ目は renderUI を使用します。

例には、「クリア」ボタンと、選択が変更されたときにファイル入力 UI をリセットするオプションのドロップダウン メニューの両方が含まれています。

例 1 - JavaScript の使用

ui.R

shinyUI(bootstrapPage(

    tags$head(
        tags$style(".clearButton {float:right; font-size:12px;}")
    ),

    headerPanel("Reset file input example"),

    sidebarPanel(
        HTML("<button id='clearFile1' class='action-button clearButton'>Clear</button>"),
        fileInput('file1', NULL, width="80%"),

        selectInput('uploadFormat', label = "Select upload format", 
            choices = c(
                "Option 1" = 'f1',
                "Option 2" = 'f2',
                "Option 3" = 'f3'),
            selected = 'f1')
    ),

    mainPanel(
        h4("Summary"),
        verbatimTextOutput("summary")
    ),
    singleton(includeScript("active.js"))
))

サーバー.R

shinyServer(function(input, output, session) {

    values <- reactiveValues(
        file1 = NULL
    )

    observe({
        input$clearFile1
        input$uploadFormat
        values$file1 <- NULL
    })

    observe({
        values$file1 <- input$file1
    })

    output$summary <- renderText({
        return(paste("Uploaded file: ", values$file1$name))
    })

})

アクティブ.js

$(document).ready(function() {

    /* clear file button control */
    var fileControl = $("#file1");

    $("#clearFile1").on("click", function () {
        fileControl.replaceWith( fileControl = fileControl.clone( true ) );
        $("#file1_progress").hide();
    });

    $("#uploadFormat").on("change", function () {
        fileControl.replaceWith( fileControl = fileControl.clone( true ) );
        $("#file1_progress").hide();
    });

    /* file input progress bar control */
    $( "#file1" ).change(function() {
      document.getElementById("file1_progress").setAttribute('style', "height:20px; margin-top:5px;");
    });

});

例 2 - renderUI の使用

上記と同じですが、(1) active.js と関連する include ステートメントを取り除きます。(2) ui.R で置き換えます。

fileInput('file1', NULL, width="80%"),

と

uiOutput('resettableInput'),

(3) server.R に以下を追加します。

    output$resettableInput <- renderUI({
        input$clearFile1
        input$uploadFormat

        fileInput('file1', NULL, width="80%")
    })

ここで list() ステートメントに複数の UI 要素を含めることができ、それらはすべて再レンダリングされることに注意してください。ここを参照してください。

これらの例のコードはこちらとこちらで見つけることができ、次のように実行できます。

library(shiny)
shiny::runGist('0c2a98a0236f1257fd45')
shiny::runGist('bc09d77fa92457e094c8')
于 2015-10-21T23:36:35.763 に答える