Реагируйте с Uppy FileInput - PullRequest
Новая
       20

Реагируйте с Uppy FileInput

0 голосов
/ 14 февраля 2020

У меня проблема с FileInput в библиотеке Uppy. Кажется, он работает без использования React, но при попытке реализовать его в React выдает ошибки.

В настоящее время я использую DragDrop, и он на самом деле работает нормально, но стилизация с этой областью перетаскивания не из легких. et c.

Я использую это так, и это работает: 

const uppy = Uppy({
  autoProceed: true
})

uppy.use(
  XHRUpload, {
  endpoint: `/endpoint`,
},
  ProgressBar, {
  target: '.UppyForm'
})

return(
  <DragDrop uppy={uppy} />
  <div style={{ marginTop: '50px' }}>
    <ProgressBar uppy={uppy} />
  </div>
)

Но я хотел бы использовать FileInput, так как он выглядит чище. Я пробовал что-то подобное: 

uppy.use(FileInput, {
  target: '.UppyForm',
  replaceTargetContent: true
})

uppy.use(XHRUpload, {
  endpoint: `/endpoint`,
  fieldName: 'files[]'
});

return (
  <div className="UppyForm">
      <input class="uppy-DragDrop-input" type="file" name="files[]" multiple />
  </div>
)

И я получаю ошибку, подобную этой, хотя у меня есть целевой div внутри рендера:

× Ошибка: недопустимая целевая опция, переданная FileInput. Убедитесь, что элемент существует на странице или установлен плагин, на который вы нацелены. Убедитесь, что тег, инициализирующий Uppy, находится внизу страницы, перед закрывающим тегом

Редактировать: я понял, что вы можете заставить его работать, включая тег внутри индекса. html, но, возможно, есть и другие способ

...