如何通过Stimulus控制器重置表单提交后的file_field字段

清空file字段已选文件的实现方式 #

原生file类型input的选中值直接通过重置value属性即可清空，单/多文件模式通用，兼容性覆盖所有主流浏览器：

this.inputTarget.value = ''

注意：不要在触发表单提交的同步代码中直接执行清空逻辑，否则会在提交发送前清除文件引用，导致后端收不到上传内容。

Turbo场景下的正确执行时机 #

由于表单使用Turbo驱动提交，需要等提交流程完全结束后再执行清空，监听turbo:submit-end事件即可，控制器完整参考代码如下：

// dropzone_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["input"]

  submit() {
    // 绑定一次性提交完成回调
    const handleSubmitEnd = () => {
      this.inputTarget.value = ''
      this.form.removeEventListener('turbo:submit-end', handleSubmitEnd)
    }
    this.form.addEventListener('turbo:submit-end', handleSubmitEnd)

    // 原有提交逻辑保持不变
    Rails.fire(this.form, "submit")
  }
}

如果页面上有文件选中后的预览UI，清空input后同步移除对应的预览DOM节点即可。

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