Реагировать, Redux, Filepond - PullRequest
Новая
       10

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

0 голосов
/ 10 января 2019

Мой вопрос ... как мне загружать файлы с помощью 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, не вижу, как это сделать, щелкаю, нигде не вижу фактического файла.

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

1 Ответ

0 голосов
/ 10 января 2019

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/

...