如何使用 Stimulus JS 创建自定义上传按钮？

Posted 2023-02-15

【中文标题】如何使用 Stimulus JS 创建自定义上传按钮？

【英文标题】：How to use StimulusJS to create a custom upload buttom?

【发布时间】：2022-01-19 20:04:10

【问题描述】：

这是我的 Rails 项目中的示例页面，我希望在其中添加以下行为：原始文件输入（最顶部）将被隐藏，文件名将替换 Nothing selected，如果以防万一，我点击上传按钮并选择一个文件，否则它将保持不变。

我正在考虑使用 Stimulus-Reflex，但我不确定如何进一步进行。

【参考方案1】：

您需要显示文本的目标、刺激控制器上的文件输入、隐藏文件输入的更改操作和按钮上的单击操作。当点击按钮时触发点击文件输入，这将在浏览器中打开浏览器提示。一旦用户选择了一个文件，它将触发文件输入上的更改事件，然后更新显示文本目标。

您的控制器可能如下所示：

import  Controller  from 'stimulus'

export default class extends Controller 
  static targets = ['fileInput',  'displayText']
  
  updateText (event) 
    this.displayTextTarget.innerText = event.target.files[0].name
  
  
  browse () 
    this.fileInputTarget.click()
  

使用 html 是这样的：

<div data-controller="upload-button">
  <input type="file" name="foo" data-upload-button-target="fileInput" data-action="change->upload-button#updateText" style="display:none;" />
  <div data-upload-button-target="displayText">Nothing Selected</div>
  <button data-action="click->upload-button#browse">Browse</button>
</div>

您需要对其进行一些调整以满足您的特定需求，但应该有助于您入门。