Реагировать - разрешить пользователю добавлять файл из галереи или камеры

Question

У меня есть сайтact-redux, который позволяет перетаскивать файлы из файловой системы, Теперь я хочу позволить им сделать то же самое на мобильном телефоне. добавить скриншот с камеры или файл из галереи.

Для перетаскивания на рабочем столе я использую пакет Reaction-Dropzone .

Любая помощь будет оценена!

Answer 1

Правильный ответ заключается в том, что реагирующая дропзона работает хорошо (на момент ответа harish soni ) но это зависит от мобильной версии: Reaction-dropzone использует HTML-элемент input type = "file", который не поддерживается всеми мобильными устройствами.

для лучшего понимания мобильной поддержки см. здесь

Answer 2

Вы можете использовать этот код из документации: он позволяет пользователю нажать на DropZone и открывает средство выбора файлов:

class Basic extends React.Component {
  constructor() {
    super()
    this.state = {
      disabled: true,
      files: []
    }
  }
​
  onDrop(files) {
    this.setState({files});
  }
​
  toggleDisabled() {
    this.setState({
      disabled: !this.state.disabled
    })
  }
​
  render() {
    const files = this.state.files.map(file => (
      <li key={file.name}>
        {file.name} - {file.size} bytes
      </li>
    ))
​
    return (
      <section>
        <aside>
          <button
            type="button"
            onClick={this.toggleDisabled.bind(this)}
          >
            Toggle disabled
          </button>
        </aside>
        <div className="dropzone">
          <Dropzone
            onDrop={this.onDrop.bind(this)}
          >
            {({getRootProps, getInputProps}) => (
              <div {...getRootProps()}>
                <input {...getInputProps()} />
                 <p>Drop files here, or click to select files</p>
              </div>
            )}
          </Dropzone>
        </div>
        <aside>
          <h4>Files</h4>
          <ul>{files}</ul>
        </aside>
      </section>
    );
  }
}
​
<Basic />