手动触发FilePond中的服务器方法,使用FilePond参数

huangapple go评论63阅读模式
英文:

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
  &lt;div className=&quot;file-upload&quot;&gt;
    &lt;FilePond
      ref={this.props.innerref}
      files={this.state.files}
      onupdatefiles={this.updateFiles}
      {...this.props}
    /&gt;
  &lt;/div&gt;

  // Calling the wrapper in the parent component
  &lt;FileUpload
    innerref={this.fileRef}
    server={{
      fetch: this.onFileFetch,
      process: this.onUpload,
      revert: this.onFileRevert,
    }}
  /&gt;

Server methods

// fetch
onFileFetch = async (url, load, error, progress, abort, headers) =&gt; {
  // function triggers but cannot access load, progress etc. here
}

// upload
onUpload = async (fieldName, file, metadata, load, error, progress, abort) =&gt; {
  // function triggers and can access load, error etc.
}

// delete/revert
onFileRevert = async (uniqueFileId, load, error) =&gt; {
  // 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: &quot;Drag file(s) here&lt;br&gt; or &lt;br&gt;&lt;br&gt;&lt;span class=&quot;filepond--label-action&quot;&gt;Browse&lt;/span&gt;&quot;
      onupdatefiles: ƒ (fileItems)
      innerref: {current: FilePond}
      className: &quot;in-block s3-bucket-file-input&quot;
      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.

huangapple
  • 本文由 发表于 2020年1月6日 21:04:38
  • 转载请务必保留本文链接:https://go.coder-hub.com/59612648.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定