Ручной запуск методов сервера в filepond с параметрами filepond - PullRequest
Новая
       8

Ручной запуск методов сервера в filepond с параметрами filepond

0 голосов
/ 06 января 2020

Я хочу вызвать метод fetch вручную в компоненте filepond-реагировать. Я упростила другие подпорки для упрощения. 

  // 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,
    }}
  />

Методы сервера 

// 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.
}

Поведение и запуск

Таким образом, загрузка и удаление запускаются, когда Я нажимаю значок загрузки и возврата соответственно. Я хочу вызвать fetch() вручную, и для этого я вызываю this.fileRef.current.props.server.fetch()

Почему a ccss не может задать параметры этой функции? (загрузить, ошибка и т. д. c.)
Я добавил объект filepond aka this.fileRef.current ниже для справки. 

```
{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 голос
/ 07 января 2020

Если вы вручную вызовете this.fileRef.current.props.server.fetch(), вы не передадите ни один из параметров в функцию. FilePond передает эти параметры url, load, error, progress, abort, headers, когда вызывает функцию, поэтому вам следует также использовать ее, если вы хотите использовать ее таким образом.

Функции не должны быть помечены как async, они могут быть обычными функциями.

...