Response-dropzone - Как читать файлы через папку?

Я пытаюсь использовать React-Dropzone, и я пытаюсь прочитать все изображения папки, которая была перетащена в зону.

Я вижу, что у них есть пример.

const { getDroppedOrSelectedFiles } = require('html5-file-selector')

class FolderDropzone extends React.Component {
  constructor() {
    super()
    this.state = { files: [] }
  }

  onDrop(files) {
    this.setState({
      files
    })
  }

  render() {
    return (
      <section>
        <div className = "dropzone">
          <Dropzone
            getDataTransferItems = {evt => getDroppedOrSelectedFiles(evt).then(files => files)}
            onDrop = {this.onDrop.bind(this)}
          >
            <p>Drop a folder with files here.</p>
          </Dropzone>
        </div>
        <aside>
          <h2>Dropped files and folders</h2>
          <ul>
            {this.state.files.map(f => (
              <li key = {f.name}>
                {f.fullPath} - {f.size} bytes
              </li>
            ))}
          </ul>
        </aside>
      </section>
    )
  }
}

но, похоже, он не работает и не говорит, какой сторонний плагин используется.

Моя локальная копия получает эту ошибку

index.js:249 Failed to generate preview for file {fileObject: File(180093), fullPath: "1.jpeg", lastModified: 1538421964806, lastModifiedDate: Mon Oct 01 2018 12:26:04 GMT-0700 (Pacific Daylight Time), name: "1.jpeg", …} TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.
    at index.js:246
    at Array.forEach (<anonymous>)
    at index.js:243

        fileList.forEach(function (file) {
          if (!disablePreview) {
            try {
              file.preview = window.URL.createObjectURL(file); // eslint-disable-line no-param-reassign
            } catch (err) {
              if (process.env.NODE_ENV !== 'production') {
                console.error('Failed to generate preview for file', file, err); // eslint-disable-line no-console
              }
            }
          }

Покажите нам, пожалуйста, свой код.

Train 03.10.2018 18:00

@OrthoHomeDefense - Хорошо, но это буквально пример кода.

chobo2 03.10.2018 18:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
1 451
1

Ответы 1

У меня было это точное требование, которое было простым как торт, поскольку я использовал antd, который использует rc-upload. Работает как шарм, и вы также получаете относительный путь к разрешенным типам файлов.

Другие вопросы по теме