In my React app users can select some image (s) with the Uppy drag and drop and dashboard plugins:
And then close the image selection modal, choose some image options and if they want to select more image (s) files before upload they can open the modal again, the previous selected images are stored in a useRef
and it contains the successfully
, failed
, etc, properties that I get in the event listener:
uppy.on('complete', files => {
data.current.files = files
})
How can I get the images from the data.current.files.successfully
reference and set then back when the user open the modal again, in a way that I can skip the “Drop files here” step and show the dashboard with the list of previous uploaded files?
I tried the options here but it didn’t work.
Here is the entire component:
const SelectImage = ({ data }) => {
const uppy = new Uppy({
id: 'uppy',
autoProceed: true,
restrictions: {
// maxFileSize: 10mb
maxFileSize: 10485760,
// minFileSize: null,
// maxTotalFileSize: 100mb
maxTotalFileSize: 104857600,
maxNumberOfFiles: 1000,
// minNumberOfFiles: null,
allowedFileTypes: ['.jpg', '.jpeg', '.png']
}
})
.use(DropTarget, { id: 'DropTarget', target: document.body })
.use(Compressor, { id: 'Compressor' })
uppy.on('complete', files => {
data.current.files = files
})
return (
<Dashboard
uppy={uppy}
disableStatusBar={true}
proudlyDisplayPoweredByUppy={false}
theme='light'
/>
)
}
Thanks.