80 lines
1.7 KiB
JavaScript
80 lines
1.7 KiB
JavaScript
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%",
|
|
};
|
|
|
|
export default function Dropzone(props) {
|
|
const [files, setFiles] = useState([]);
|
|
const { getRootProps, getInputProps } = useDropzone({
|
|
accept: "image/*,.dxf,.stp,.step,.pdf",
|
|
onDrop: (acceptedFiles) => {
|
|
props.setFieldValue(
|
|
`parts[${props.index}].files`,
|
|
props.files.concat(acceptedFiles)
|
|
);
|
|
setFiles(
|
|
props.files.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} />
|
|
</div>
|
|
</div>
|
|
));
|
|
|
|
useEffect(
|
|
() => () => {
|
|
// Make sure to revoke the data uris to avoid memory leaks
|
|
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>
|
|
);
|
|
}
|