set images in grid of react dropzone uploaders - reactjs

Question

I am confused in setting custom preview as like
image set in grid
I want to do this in react-dropzone-uploader custom preview, where I can upload multiple files.
Current scenario: my normal uploaded images
Code snippet:
const Preview = ({ meta }: IPreviewProps) => {
const { name, percent, status, previewUrl } = meta ;
return (
<Grid item xs={6}>
<div className="preview-box">
<img src={previewUrl} /> <span className="name">{name}</span> - <span className="status">{status}</span>{status !== "done" && <span className="percent"> ({Math.round(percent)}%)</span>}
</div>
</Grid>
)
}
<Dropzone
getUploadParams={getUploadParams}
onSubmit={handleSubmit}
PreviewComponent={Preview}
inputContent="Drop Files"
/>
I am using MUI V4
We don't have any index for images, how can I set images in grid view of 2-2 images using material UI?

Answer 1

You need to wrap the Grid items inside the Grid container.
Please have a look at the guide. https://mui.com/components/grid/
// Parent PreviewContainer.js
...
<Grid container spacing={2}>
{
images.map((image, i) => (
<PreviewItem key={i} meta={meta} />
))
}
</Grid>
...
// Child PreviewItem.js
...
<Grid item xs={4}>
// You can update the item size as you expect, but it seems like it should be 4 regarding the image attached
// Your preview component
</Grid>
...