91 lines
2.7 KiB
Markdown
91 lines
2.7 KiB
Markdown
|
You can programmatically invoke the default OS file prompt; just use the `open` method returned by the hook.
|
|||
|
|
|
|||
|
|
**Note** that for security reasons most browsers require popups and dialogues to originate from a direct user interaction (i.e. click).
|
|||
|
|
|
|||
|
|
If you are calling `open()` asynchronously, there’s a good chance it’s going to be blocked by the browser. So if you are calling `open()` asynchronously, be sure there is no more than *1000ms* delay between user interaction and `open()` call.
|
|||
|
|
|
|||
|
|
Due to the lack of official docs on this (at least we haven’t found any. If you know one, feel free to open PR), there is no guarantee that **allowed delay duration** will not be changed in later browser versions. Since implementations may differ between different browsers, avoid calling open asynchronously if possible.
|
|||
|
|
|
|||
|
|
```jsx harmony
|
|||
|
|
import React from 'react';
|
|||
|
|
import {useDropzone} from 'react-dropzone';
|
|||
|
|
|
|||
|
|
function Dropzone(props) {
|
|||
|
|
const {getRootProps, getInputProps, open, acceptedFiles} = useDropzone({
|
|||
|
|
// Disable click and keydown behavior
|
|||
|
|
noClick: true,
|
|||
|
|
noKeyboard: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const files = acceptedFiles.map(file => (
|
|||
|
|
<li key={file.path}>
|
|||
|
|
{file.path} - {file.size} bytes
|
|||
|
|
</li>
|
|||
|
|
));
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="container">
|
|||
|
|
<div {...getRootProps({className: 'dropzone'})}>
|
|||
|
|
<input {...getInputProps()} />
|
|||
|
|
<p>Drag 'n' drop some files here</p>
|
|||
|
|
<button type="button" onClick={open}>
|
|||
|
|
Open File Dialog
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<aside>
|
|||
|
|
<h4>Files</h4>
|
|||
|
|
<ul>{files}</ul>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
<Dropzone />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Or use the `ref` exposed by the `<Dropzone>` component:
|
|||
|
|
|
|||
|
|
```jsx harmony
|
|||
|
|
import React, {createRef} from 'react';
|
|||
|
|
import Dropzone from 'react-dropzone';
|
|||
|
|
|
|||
|
|
const dropzoneRef = createRef();
|
|||
|
|
const openDialog = () => {
|
|||
|
|
// Note that the ref is set async,
|
|||
|
|
// so it might be null at some point
|
|||
|
|
if (dropzoneRef.current) {
|
|||
|
|
dropzoneRef.current.open()
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// Disable click and keydown behavior on the <Dropzone>
|
|||
|
|
<Dropzone ref={dropzoneRef} noClick noKeyboard>
|
|||
|
|
{({getRootProps, getInputProps, acceptedFiles}) => {
|
|||
|
|
return (
|
|||
|
|
<div className="container">
|
|||
|
|
<div {...getRootProps({className: 'dropzone'})}>
|
|||
|
|
<input {...getInputProps()} />
|
|||
|
|
<p>Drag 'n' drop some files here</p>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={openDialog}
|
|||
|
|
>
|
|||
|
|
Open File Dialog
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<aside>
|
|||
|
|
<h4>Files</h4>
|
|||
|
|
<ul>
|
|||
|
|
{acceptedFiles.map(file => (
|
|||
|
|
<li key={file.path}>
|
|||
|
|
{file.path} - {file.size} bytes
|
|||
|
|
</li>
|
|||
|
|
))}
|
|||
|
|
</ul>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}}
|
|||
|
|
</Dropzone>
|
|||
|
|
```
|