英文:
Manual Triggering of server methods in filepond with filepond params
问题
我想手动触发filepond-react
组件中的fetch
方法。我已经简化了其他属性。
// FileUpload包装器
<div className="file-upload">
<FilePond
ref={this.props.innerref}
files={this.state.files}
onupdatefiles={this.updateFiles}
{...this.props}
/>
</div>
// 在父组件中调用包装器
<FileUpload
innerref={this.fileRef}
server={{
fetch: this.onFileFetch,
process: this.onUpload,
revert: this.onFileRevert,
}}
/>
服务器方法
// fetch
onFileFetch = async (url, load, error, progress, abort, headers) => {
// 该函数触发,但无法在此处访问load、progress等参数
}
// upload
onUpload = async (fieldName, file, metadata, load, error, progress, abort) => {
// 该函数触发,可以访问load、error等参数
}
// delete/revert
onFileRevert = async (uniqueFileId, load, error) => {
// 该函数触发,可以访问load、error等参数
}
行为和触发
因此,当我点击上传和还原图标时,会触发上传和删除操作。我想手动触发fetch()
,为此我调用this.fileRef.current.props.server.fetch()
。
为什么无法访问该函数的参数?(load、error等)
我已经在下面提供了FilePond对象的引用,即this.fileRef.current
。
{current: FilePond}
current: FilePond
// 省略其它属性...
英文:
I want to trigger the fetch
method manually in the filepond-react component. I've trimmed down other props for simplification.
// FileUpload Wrapper
<div className="file-upload">
<FilePond
ref={this.props.innerref}
files={this.state.files}
onupdatefiles={this.updateFiles}
{...this.props}
/>
</div>
// Calling the wrapper in the parent component
<FileUpload
innerref={this.fileRef}
server={{
fetch: this.onFileFetch,
process: this.onUpload,
revert: this.onFileRevert,
}}
/>
Server methods
// fetch
onFileFetch = async (url, load, error, progress, abort, headers) => {
// function triggers but cannot access load, progress etc. here
}
// upload
onUpload = async (fieldName, file, metadata, load, error, progress, abort) => {
// function triggers and can access load, error etc.
}
// delete/revert
onFileRevert = async (uniqueFileId, load, error) => {
// function triggers and can access load, error etc.
}
Behaviour and Triggering
So the upload and delete are triggered when I click the upload and revert icon respectively. I want to trigger fetch()
manually and for that I call this.fileRef.current.props.server.fetch()
Why can't the accss the params of that function? (load, error etc.)
I've added the filepond object aka this.fileRef.current
below for reference.
```
{current: FilePond}
current: FilePond
isMounted: (...)
replaceState: (...)
props:
ref: (...)
files: []
instantUpload: false
oninit: undefined
labelIdle: "Drag file(s) here<br> or <br><br><span class="filepond--label-action">Browse</span>"
onupdatefiles: ƒ (fileItems)
innerref: {current: FilePond}
className: "in-block s3-bucket-file-input"
server:
fetch: ƒ (url, load, error, progress, abort, headers)
load: ƒ (source, load, error, progress, abort, headers)
process: ƒ (fieldName, file, metadata, load, error, progress, abort)
revert: ƒ (uniqueFileId, load, error)
restore: ƒ (uniqueFileId, load, error, progress, abort, headers)
remove: ƒ (source, load, error)
__proto__: Object
get ref: ƒ ()
__proto__: Object
context: {}
refs: {}
updater: {isMounted: ƒ, enqueueSetState: ƒ, enqueueReplaceState: ƒ, enqueueForceUpdate: ƒ}
allowFilesSync: true
_reactInternalFiber: FiberNode {tag: 1, key: null, stateNode: FilePond, elementType: ƒ, type: ƒ, …}
_reactInternalInstance: {_processChildContext: ƒ}
state: null
_element: input.in-block.s3-bucket-file-input
_pond: {on: ƒ, onOnce: ƒ, off: ƒ, setOptions: ƒ, addFile: ƒ, …}
addFile: ƒ addFile(source)
addFiles: ƒ addFiles()
getFile: ƒ getFile(query)
processFile: ƒ processFile(query)
prepareFile: ƒ prepareFile(query)
removeFile: ƒ removeFile(query)
moveFile: ƒ moveFile(query, index)
getFiles: ƒ getFiles()
processFiles: ƒ processFiles()
removeFiles: ƒ removeFiles()
prepareFiles: ƒ prepareFiles()
sort: ƒ sort(compare)
browse: ƒ browse()
__proto__: Component
__proto__: Object
```
答案1
得分: 1
如果您手动调用this.fileRef.current.props.server.fetch()
,则不会传递任何参数给该函数。FilePond在调用该函数时会传递这些参数:url,load,error,progress,abort,headers
,所以如果您想要像这样使用它,也应该传递这些参数。
这些函数不必标记为async
,它们可以是普通函数。
英文:
If you manually call this.fileRef.current.props.server.fetch()
you're not passing any of the parameters to the function. FilePond passes these parameters url, load, error, progress, abort, headers
when it invokes the function so you should too if you want to use it like that.
The functions don't have to be marked as async
they can be normal functions.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论