在文件加载 FilePond 时禁用表单提交

Question

我在表单中使用 FilePond 作为图像文件。我希望表单提交为 disabled，而 image/file 正在加载。并在加载图像后重新启用。

我搜索了他们的文档，但找不到可能有帮助的内容

当 Submit 按钮应该被禁用时

Answer 1

通过使用这些回调，您可以在加载文件时禁用提交按钮。

onaddfilestart(file) – 开始加载文件

onaddfileprogress(file, progress) 加载文件取得进展

onaddfile(error, file)如果没有错误，文件加载成功

function App() {
  const [files, setFiles] = useState([]);
  const [loading,setLoading] = useState(false);

  return (
    <div className="App">
      <FilePond
        files={files}
        allowReorder={true}
        allowMultiple={true}
        onupdatefiles={setFiles}
        onaddfilestart={()=> setLoading(true)}
        onaddfile={()=> setLoading(false)}
      />
      <button disabled={loading}>Submit</button>
    </div>
  );
}

参考 - https://pqina.nl/filepond/docs/api/instance/properties/#callbacks

在文件加载 FilePond 时禁用表单提交

Disable form submit while file is loading FilePond

html

javascript

reactjs

filepond