Реагировать, Redux, Filepond

Question

Мой вопрос... как я могу загружать файлы, используя FilePond, но по клику, а не автоматически, как это происходит из коробки? Кроме того, поскольку мне нужно выполнить ряд других действий с изображениями тезисов (например, отобразить их для просмотра перед загрузкой) и добавить другие данные в отправляемые данные FormData (плюс действия по отправке в Redux).

Обычно я бы создал FormObject, добавив к нему файлы и другие значения, прежде чем отправлять его в какую-либо конечную точку (с любыми необходимыми пользовательскими заголовками). Однако, когда я проверял экземпляр FilePond, мне показалось, что единственное, к чему у меня есть доступ, - это большой двоичный объект, а не реальные файлы. Это точно? Нужно ли мне следовать какой-то специальной методике, специфичной для FilePond, чтобы загрузить файл на работу?

Документы FilePond имеют настраиваемое значение конфигурации, называемое "сервер", которое, по-видимому, имеет доступ к реальному файлу в более сложных примерах, поэтому так ли это должно быть сделано? Я не могу просто взять файлы (откуда-то, чего я сейчас не вижу в экземпляре FilePond) и добавить их к объекту для использования в моем обычном "сервисе"?

Любые советы приветствуются. В приложении React я хочу загружать переменное количество файлов по клику после добавления других данных формы и установки заголовков (в идеале, используя Axios) и помещать эти файлы в API.

Пример из их документации использует проп:

server="/api"

Я хочу что-то вроде (поддельный код):

server={submitImages} <-- this should only happen onclick of some button

где:

submitImages = (fieldName, file) => {
  const formData = new FormData()
  formData.append(fieldName, file, file.name)
  formData.append('foo', this.props.foo)
  const docuploadresult = this.props.uploadDocs(formData) <-- a service that lives elsewhere and actually does the POST
  docuploadresult.then(result => {
        // success
      }, error => {
        // error
      })
}

и мои проблемы в том, что я не понимаю, почему это должно происходить в каком-то особом объекте конфигурации, как server, не вижу, как это сделать, щелкнуть, нигде не увидеть фактический файл.

Может быть, я думаю об этом?

Answer 1

FilePond предлагает server свойство, чтобы он мог обрабатывать загрузки для вашего. Но это не обязательно, вы можете использовать getFiles легко запросить все элементы файла (и File объекты) в FilePond и загрузите их самостоятельно.

Добавьте свою собственную кнопку отправки в форму и используйте submitImages ниже, чтобы отправить файлы.

submitImages = (fieldName) => {

  const formData = new FormData();

  this.filepondRef.getFiles()
    .map(fileItem => fileItem.file)
    .forEach(file => {
      formData.append(fieldName, file, file.name);
    });

  // upload here

}

Если вы хотите показать предварительный просмотр изображений, вы можете добавить плагин предварительного просмотра изображений. https://pqina.nl/filepond/docs/patterns/plugins/image-preview/