react-dropzone: Cannot opening file dialog programmatically on Ipad, Iphone (ios 9, 8.3) with fastclick

Hello. I have this code in my button:

<button className="btn btn-attach" title="Прикрепить изображение" onClick={e => this.openDropzone(e)}>
	<em className="icon material-icons">wallpaper</em>
</button>

and method:

openDropzone(e) {
	e.preventDefault();
	console.log('openDropzone');
	this.dropzone.open();
}

Dropzone ref is ref={(node) => { this.dropzone = node; }} My button place inside Dropzone.

<Dropzone ref={(node) => { this.dropzone = node; }}
	  accept={this.state.dropzone.accept}
	  maxSize={this.state.dropzone.maxSize}
	  multiple={this.state.dropzone.multiple}
	  disableClick={this.state.dropzone.disableClick}
	  name="files"
	  className={dropZoneClasses}
	  onDrop={e => this.onDrop(e)}
	  onDropRejected={e => this.onDropRejected(e)}
	  onDragEnter={e => this.onDragEnter(e)}
	  onDragLeave={e => this.onDragLeave(e)}>
	<div className="content-control__textarea">
		...
		<div className="content-control__panel">
			<button type="submit" className={submitClasses} disabled={!this.state.valid}>Отправить</button>
			<button className="btn btn-attach" type="button" title="Прикрепить изображение" onClick={e => this.dropzone.open()}>
				<em className="icon material-icons">wallpaper</em>
			</button>
			<button className="btn btn-attach" type="button" title="Прикрепить файлы" onClick={e => this.dropzone.open()}>
				<em className="icon icon-paper-clip"/>
			</button>
		</div>
	</div>
</Dropzone>

But dialog not opening on mobile devices. How I can fix it?

"react": "^15.3.2",
"react-dropzone": "^3.13.0",
"react-fastclick": "^3.0.2-alpha.1",

update: If I disable react-fastclick - all work properly

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 16

Most upvoted comments

@rkmarks It corresponds to the code in the example. The issue is that it does not work in my webview android application. It seems that the refDropzone.open does not work.

const FileUploadZone = ({onUpload, accept, ...props}) => {
  let refDropzone;

  return (
    <DropzoneWrapper {...props}>
      <Dropzone
        className='pa3'
        onDrop={files => onUpload(files[0])}
        multiple={false}
        disableClick
        ref={(node) => { refDropzone = node; }}
        accept={accept}
      >
        <div>{i18next.t('button.dragDrop')}</div>
        <SimpleButton onClick={() => refDropzone.open()}>{i18next.t('button.orSelect')}</SimpleButton>
      </Dropzone>
    </DropzoneWrapper>
  );
};

fredehh on Sep 29, 2017