87 lines
2.0 KiB
Markdown
87 lines
2.0 KiB
Markdown
Starting with version 7.0.0, the `{preview}` property generation on the [File](https://developer.mozilla.org/en-US/docs/Web/API/File) objects and the `{disablePreview}` property on the `<Dropzone>` have been removed.
|
|
|
|
If you need the `{preview}`, it can be easily achieved in the `onDrop()` callback:
|
|
|
|
```jsx harmony
|
|
import React, {useEffect, useState} from 'react';
|
|
import {useDropzone} from 'react-dropzone';
|
|
|
|
const thumbsContainer = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
marginTop: 16
|
|
};
|
|
|
|
const thumb = {
|
|
display: 'inline-flex',
|
|
borderRadius: 2,
|
|
border: '1px solid #eaeaea',
|
|
marginBottom: 8,
|
|
marginRight: 8,
|
|
width: 100,
|
|
height: 100,
|
|
padding: 4,
|
|
boxSizing: 'border-box'
|
|
};
|
|
|
|
const thumbInner = {
|
|
display: 'flex',
|
|
minWidth: 0,
|
|
overflow: 'hidden'
|
|
};
|
|
|
|
const img = {
|
|
display: 'block',
|
|
width: 'auto',
|
|
height: '100%'
|
|
};
|
|
|
|
|
|
function Previews(props) {
|
|
const [files, setFiles] = useState([]);
|
|
const {getRootProps, getInputProps} = useDropzone({
|
|
accept: {
|
|
'image/*': []
|
|
},
|
|
onDrop: acceptedFiles => {
|
|
setFiles(acceptedFiles.map(file => Object.assign(file, {
|
|
preview: URL.createObjectURL(file)
|
|
})));
|
|
}
|
|
});
|
|
|
|
const thumbs = files.map(file => (
|
|
<div style={thumb} key={file.name}>
|
|
<div style={thumbInner}>
|
|
<img
|
|
src={file.preview}
|
|
style={img}
|
|
// Revoke data uri after image is loaded
|
|
onLoad={() => { URL.revokeObjectURL(file.preview) }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
));
|
|
|
|
useEffect(() => {
|
|
// Make sure to revoke the data uris to avoid memory leaks, will run on unmount
|
|
return () => files.forEach(file => URL.revokeObjectURL(file.preview));
|
|
}, [files]);
|
|
|
|
return (
|
|
<section className="container">
|
|
<div {...getRootProps({className: 'dropzone'})}>
|
|
<input {...getInputProps()} />
|
|
<p>Drag 'n' drop some files here, or click to select files</p>
|
|
</div>
|
|
<aside style={thumbsContainer}>
|
|
{thumbs}
|
|
</aside>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
<Previews />
|
|
```
|