UploadPreview won't render inside of a modal (or conditionally rendered pane)

[asibilia]

My file upload component with custom UploadPreview works great when loaded in the main content area of the page. The problem is that whenever I put my component inside a conditionally rendering element like a dialog modal or drawer (I'm using MUI's components). Only my UploadPreview list won't render. I'm able to click upload and select files and I see the network requests being made but I don't get any onPreviewsChanged events firing and the elements are actually missing from the DOM.

Any thoughts on how to track this down would be greatly appreciated. Thanks!

[yoavniran]

hey @asibilia
I believe this is most likely related to the fact that the UploadPreview isnt mounted when the upload start events are fired and therefore the event-handler the preview relies on isnt fired. In this case the preview wont be aware of the uploads and you will experience the behavior you described.

MUI perhaps can help with this by ensuring the drawer is kept mounted.
I suggest giving this a try.

If this doesnt help you will need to either find a different way to keep the preview mounted when upload begins, no way around that i'm afraid. Or you will need to handle the life-cycle events on your own and render your own preview component to show the uploads based on your app's state.

Hope this helps

[asibilia]

Gotcha... okay so unfortunately keepMounted doesn't fix the issue (even though the MUI component does stay mounted). I'll keep playing around to see what I can do. When is upload start fired so that I can try to make sure that it's not fired when UploadPreview isn't mounted?

Another issue i'm seeing is that my preview items only render if there's more than 2 items being uploaded... or if i upload individual files twice consecutively, the second item will be uploaded. (This is when testing with the component in the page, not in the drawer / modal)

Here's what my Preview / QueueItem components look like:

// FileUpload.tsx
export const FileUpload: React.FunctionComponent<UploadyProps> = ({
    accept,
    debug,
    destination,
    ...uploadyProps
}) => {
    return (
        <Uploady
            {...uploadyProps}
            accept={accept}
            debug={debug}
            destination={destination}
            enhancer={composeEnhancers(retryEnhancer, mockSenderEnhancer)}
        >
            <Stack spacing={2}>
                <Card
                    sx={(theme) => ({
                        minWidth: '100%',
                        [theme.breakpoints.up('md')]: {
                            minWidth: '300px',
                        },
                    })}
                >
                    <ClassNames>
                        {({ cx, css }) => (
                            <DropZone
                                onDragOverClassName={cx(
                                    css`
                                        background-color: rgba(0, 0, 0, 0.04);
                                        cursor: 'copy';
                                    `
                                )}
                            >
                                <CardContent
                                    sx={{
                                        p: 3,
                                    }}
                                >
                                    <Stack alignItems="center" spacing={2}>
                                        <UploadButton />
                                        <Typography>
                                            Drag &amp; drop files to upload
                                        </Typography>
                                    </Stack>
                                </CardContent>
                            </DropZone>
                        )}
                    </ClassNames>
                </Card>

                <Stack spacing={1} width="100%">
                    <UploadPreview
                        PreviewComponent={QueueItem}
                        rememberPreviousBatches
                    />
                </Stack>
            </Stack>
        </Uploady>
    )
}

// QueueItem.tsx
export const QueueItem = memo<PreviewComponentProps>(({ id, name, type }) => {
    const [progress, setProgress] = useState(0)
    const [itemState, setItemState] = useState<FileState>(FileState.INITIAL)

    useItemProgressListener((item) => {
        if (item.completed > progress) {
            setProgress(() => item.completed)
            setItemState(() =>
                item.completed === 100 ? FileState.DONE : FileState.PROGRESS
            )
        }
    }, id)

    useItemAbortListener((_item) => {
        setItemState(FileState.ABORTED)
    }, id)

    useItemErrorListener((_item) => {
        setItemState(FileState.ERROR)
    }, id)

    return (
        <FileItem
            state={itemState}
            id={id}
            name={name}
            type={type}
            progress={progress}
        />
    )
})

[asibilia]

Okay, looks like I found the issue. My FileUpload component was too low in my render tree and was being re-rendered multiple times which would cause the UploadPreview to get into a weird state with multiple Uploady instances being initiated. I moved Uploady further up my JSX tree and now the keepMounted prop works as expected.

[yoavniran]

nice! indeed, its advisable to place the Uploady provider as high in the tree as possible to avoid this kind of issue. And to memoize the props passed to it as well