Shiny自定义文件输入组件选中文件后文件名不更新如何解决

• 自定义Shiny文件输入组件点击可正常唤起文件选择器，但选中文件后，组件仍显示默认占位符，不会更新为所选文件名
• 自定义传入的placeholder参数不生效，始终显示浏览器默认的"No file selected"文本
  

原R端组件代码 #

browse_only_fileinput <- function(inputId,
                                  label = NULL,
                                  placeholder = "No file selected",
                                  width = NULL
                                  ) {
  restoredValue <- shiny::restoreInput(id = inputId, default = NULL)

  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }

  if (!is.null(restoredValue)) {
    restoredValue <- jsonlite::toJSON(restoredValue, strict_atomic = FALSE)
  }

  inputTag <- tags$input(
    id = inputId,
    name = inputId,
    type = "file",
    `data-restore` = restoredValue,
    class = "form-control",
    placeholder = placeholder
  )

  labelInput <- if (!is.null(label)) {
    tags$label(label,
               class = "form-label browse-only-fi",
               id = paste0(inputId, "-label"),
               `for` = inputId)
  } else {
    NULL
  }

  tagList(
    singleton(
      tags$head(
        tags$script(src = "browse_only_fi.js")
      )
    ),
    div(
      class = "form-group shiny-input-container",
      style = htmltools::css(width = validateCssUnit(width)),
      labelInput,
      inputTag
    )
  )
}

原JS绑定代码 #

$(document).ready(function() {
    var browseOnlyFileInput = new Shiny.InputBinding();
    $.extend(browseOnlyFileInput, {
      find: function(scope) {
        return $(scope).find(".browse-only-fi");
      },
      getValue: function(el) {
          var file = el.files[0];
          if (file) {
              read = new FileReader();
              read.readAsDataURL(file);
          }
          return read.result;
      },
      setValue: function(el, value) {
        $(el).val(value);
      },
      subscribe: function(el, callback) {
          $(el).on("change.browse-only-fi", function (e) {
              callback();
          });
      },
      unsubscribe: function(el) {
          $(el).off(".browse-only-fi");
      }
    });

    Shiny.inputBindings.register(browseOnlyFileInput);
});

代码存在4个核心问题：

1. InputBinding绑定元素错误：find方法查找的.browse-only-fi类被加在了label标签上，而非实际的file input元素，导致整个绑定逻辑作用在错误的DOM节点上，既拿不到文件信息，也监听不到input的文件选择变化事件。
2. 原生file input不支持placeholder属性：浏览器对原生文件选择框的渲染有安全限制，内置的"No file selected"文本是浏览器默认行为，直接在input标签上加placeholder属性不会被识别，这是自定义占位符不生效的根本原因。
3. 缺少文件名更新逻辑：Bootstrap本身不会自动监听file input的变化更新文本，需要手动写JS监听change事件，拿到选中文件名后更新到对应展示节点，原代码完全没有这段逻辑，选完文件自然不会更新显示。
4. getValue逻辑错误：FileReader是异步API，调用readAsDataURL后立即返回read.result时文件还没读取完成，会返回undefined；且如果仅需要展示文件名、给Shiny传基础文件信息，不需要读取文件base64内容，会造成不必要的性能开销。另外出于浏览器安全限制，file input的value不能通过JS手动赋值，原代码的setValue方法没有实际作用。

修改思路 #

• R端：给file input添加专属class用于JS绑定定位，移除input上无效的placeholder属性，新增独立的文件名展示节点，配套少量样式隐藏原生file input的默认文本
• JS端：修正绑定的目标元素，初始化时存储占位符文本用于清空后恢复，监听change事件时同步更新文件名展示，修正getValue返回逻辑，移除无效的setValue方法

修复后完整代码 #

R端 #

browse_only_fileinput <- function(inputId,
                                  label = NULL,
                                  placeholder = "No file selected",
                                  width = NULL
) {
  restoredValue <- shiny::restoreInput(id = inputId, default = NULL)

  if (!is.null(restoredValue) && !is.data.frame(restoredValue)) {
    warning("Restored value for ", inputId, " has incorrect format.")
    restoredValue <- NULL
  }

  if (!is.null(restoredValue)) {
    restoredValue <- jsonlite::toJSON(restoredValue, strict_atomic = FALSE)
  }

  inputTag <- tags$input(
    id = inputId,
    name = inputId,
    type = "file",
    `data-restore` = restoredValue,
    class = "form-control browse-only-fi-input"
  )
  
  # 自定义文件名/占位符展示节点
  fileTextTag <- tags$span(
    class = "browse-only-fi-text",
    placeholder,
    style = "position: absolute; left: 0; top: 0; z-index: -1; background: transparent; border: none; color: #6c757d; pointer-events: none; padding: 0.375rem 0.75rem; width: calc(100% - 85px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
  )

  labelInput <- if (!is.null(label)) {
    tags$label(label,
               class = "form-label",
               id = paste0(inputId, "-label"),
               `for` = inputId)
  } else {
    NULL
  }

  tagList(
    singleton(
      tags$head(
        tags$script(src = "browse_only_fi.js"),
        tags$style(HTML("
          .browse-only-fi-wrapper { position: relative; }
          .browse-only-fi-input::file-selector-button {
            float: right;
          }
        "))
      )
    ),
    div(
      class = "form-group shiny-input-container",
      style = htmltools::css(width = validateCssUnit(width)),
      labelInput,
      div(
        class = "browse-only-fi-wrapper",
        fileTextTag,
        inputTag
      )
    )
  )
}

JS端（browse_only_fi.js） #

$(document).ready(function() {
    var browseOnlyFileInput = new Shiny.InputBinding();
    $.extend(browseOnlyFileInput, {
      find: function(scope) {
        return $(scope).find(".browse-only-fi-input");
      },
      initialize: function(el) {
        // 初始化时存储占位符文本
        var textEl = $(el).siblings(".browse-only-fi-text");
        textEl.attr("data-placeholder", textEl.text());
      },
      getValue: function(el) {
          var file = el.files[0];
          if (!file) return null;
          // 返回文件基础信息，需要读取文件内容可在此处扩展FileReader异步逻辑
          return {
            name: file.name,
            size: file.size,
            type: file.type
          };
      },
      subscribe: function(el, callback) {
          $(el).on("change.browse-only-fi", function (e) {
              var file = el.files[0];
              var textEl = $(el).siblings(".browse-only-fi-text");
              // 更新展示文本
              if (file) {
                textEl.text(file.name).css("color", "#212529");
              } else {
                textEl.text(textEl.attr("data-placeholder")).css("color", "#6c757d");
              }
              callback();
          });
      },
      unsubscribe: function(el) {
          $(el).off(".browse-only-fi");
      }
    });

    Shiny.inputBindings.register(browseOnlyFileInput);
});

修复后组件可正常显示自定义占位符，选中文件后会自动更新展示为对应文件名，R端可通过input$[inputId]拿到选中文件的基础信息。

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