重用fileInput中的闪亮进度栏，并上传大量文件

如何解决重用fileInput中的闪亮进度栏，并上传大量文件

问题

我正在使用library(shinybulma)设置Shiny up。

为了保持一致，我使用bulma类手工制作了一个文件输入窗口小部件。为了获得视觉反馈，我需要进度条，该进度条会在ulpoad过程中进行更新。

从fileInput widget看源代码，我发现我需要一个容器，其中id等于我的小部件的id，并附加_progress并带有类shiny-file-input-progress和progress-bar。

通过这种方式，我可以方便地依靠Shiny更新进度条。

但是，魔鬼在于细节。我的窗口小部件可以选择在bulma旁边最多包含两个2个span.file-name按钮。进度条应始终占据div.file中的元素所定义的宽度（即包括可选按钮）。

为了完成这项工作，我不得不在这里和那里对widths和min-widths进行硬编码，在我看来，这是一种无法与常规bulma框架配合使用的变通方法。 / p>

生成的HTML（带有两个可选按钮）

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.1/css/bulma.min.css" rel="stylesheet"/>
<div class="field" style="width:440px">
  <label class="label">Label</label>
  <div class="file has-name">
    <label class="file-label">
      <input id="a" name="a" type="file" class="file-input"/>
      <span class="file-cta" style="min-width: 160px">
        <span class="file-icon">
          <i class="fa fa-upload"></i>
        </span>
        <span class="file-label">Choose a file...</span>
      </span>
      <span class="file-name" style="width:100%; min-width:200px;">No file selected</span>
    </label>
    <a class="button    reset-file-form">
      <span class="icon  is-small">
        <i class="fa fa-undo"></i>
      </span>
    </a>
    <a class="button is-primary   remove-file-form">
      <span class="icon  is-small">
        <i class="fa fa-minus-circle"></i>
      </span>
    </a>
  </div>
  <!-- normally the is-hidden class is added in this div and the color class would be has-background-light !-->
  <div id="a_progress" class="progress shiny-file-input-progress has-background-info"> 
    <div class="progress-bar has-background-info" style="padding-left:10px; font-size: 10px"></div>
  </div>
</div>

在此代码段中，进度条（在此代码段中显示，但是通常仅在上载时显示）跨越正确的宽度，而我必须对widths和{{1 }}，具体取决于是否有min-widths。

当我们上传文件名非常短的文件时，buttons还应保证min-width不会太短。

问题

如何在不定义span.file-name的情况下使进度条跨越div.file的整个宽度？理想情况下，这应该本着width/min-width的精神，即使用现有的类而不是定义内联CSS。

解决方法

根据代码库上显示的内容，如果动作的行和进度条的行具有同级父容器，则它们将容纳宽度的约束，并且进度条的同级将屈曲为这种容器约束，那么您可能可以删除每个同级的所有内部宽度样式，并将其全部放置在父级上。

我运行了代码的本地POC，它缺少您正在使用的精美样式，因为我不确定您的CSS到底在做什么，但是我能够删除所有width硬编码样式，并仅在顶根设置一个初始width，以反映其对子元素的约束。

      <div class="field" style={{ width: "500px" }}>
        <label class="label">Label</label>
        <div>
          <div class="file has-name">
            <label class="file-label">
              <input id="a" name="a" type="file" class="file-input" />
              <span class="file-cta">
                <span class="file-icon">
                  <i class="fa fa-upload"></i>
                </span>
                <span class="file-label">Choose a file...</span>
              </span>
              <span class="file-name">No file selected</span>
            </label>
            <a class="button    reset-file-form">
              <span class="icon  is-small">
                <i class="fa fa-undo"></i>
              </span>
            </a>
            <a class="button is-primary   remove-file-form">
              <span class="icon  is-small">
                <i class="fa fa-minus-circle"></i>
              </span>
            </a>
          </div>
          <div
            id="a_progress"
            class="progress shiny-file-input-progress has-background-info"
            style={{ padding: "15px",backgroundColor: "blue" }}
          >
            <div
              class="progress-bar has-background-info"
              // style="padding-left:10px; font-size: 10px"
            ></div>
          </div>
        </div>
      </div>

请随时告诉我您是否希望这样做，或者我是否可以为解决方案提供其他指导。