How can I get the list of selected files from an UploadButton?

[A-Baji]

The UploadDropzone has a onDrop callback that can be used to get the file list, but I don't see anything similar for the UploadButton. I also can't set the htmlDirContentParams for the UploadButton.

[yoavniran]

@A-Baji The html-dir-content library isnt used by the upload-button package. There's usually no need for that.
Notice that when you use the webkitdirectory flag for the file input element, you do get the webkitRelativePath property in all browsers (at least chrome & firefox) per the spec.

You can get the list of files in various ways using Uploady's API.
One way is the file filter method
Another can be the useBatchAddListener hook, and then inspecting the batch.items array.

Hopefully this helps.

[A-Baji]

Thank you for answering in both SO and here. I managed to get the button working, but now the drag and drop from my previous question is double selecting...

I have the button wrapped in the drag zone, and now the button seems to also be handling drag and drop events (but incorrectly). Any way to disable this?

interface webkitFile extends File {
    webkitRelativePath: string
}
interface addFiles {
    addFilesToState: (files: File[]) => void
}
const MyUploadButton = ({ addFilesToState }: addFiles) => {
    useBatchAddListener((batch) => {
        addFilesToState(
            batch.items.map((item) => {
                return new File(
                    [item.file as File],
                    (item.file as webkitFile).webkitRelativePath
                        .split('/')
                        .slice(1)
                        .join('/'),
                    {
                        type: item.file.type
                    }
                )
            })
        )
    })

    return <UploadButton>Browse</UploadButton>
}

<Uploady autoUpload={false} accept={'*'} webkitdirectory={true}>
    <UploadDropZone
        onDragOverClassName='drag-over'
        htmlDirContentParams={{ recursive: true, withFullPath: true }}
        dropHandler={async (e, getFiles) => {
            let fileList = await getFiles()
            props.setFileList(
                fileList.map((file) => {
                    return new File(
                        [file],
                        file.name.split('/').slice(2).join('/'),
                        {
                            type: file.type
                        }
                    )
                })
            )
            return fileList
        }}
    >
        <Dragger
            openFileDialogOnClick={false}
            customRequest={() => {}}
            onRemove={(file: UploadFile) => {
                const index = props.fileList.indexOf(file as unknown as File)
                const newFileList = [...props.fileList]
                newFileList.splice(index, 1)
                props.setFileList(newFileList)
            }}
            fileList={
                props.fileList.slice(
                    fileListIndex,
                    fileListIndex + 10
                ) as unknown as UploadFile[]
            }
        >
            <p className='ant-upload-text'>
                <b>Uploading to:</b> {S3_BUCKET.split('/').slice(1).join('/')}
            </p>
            <br></br>
            <p className='ant-upload-drag-icon'>
                <InboxOutlined />
            </p>
            <p className='ant-upload-text'>
                <>
                    Browse or drag folder to upload
                    <br />
                    <MyUploadButton
                        addFilesToState={(files: File[]) =>
                            props.setFileList(files)
                        }
                    />
                    <br />
                    <strong>Uploading {props.fileList.length} files</strong>
                    <br />
                    Showing files{' '}
                    {props.fileList.length
                        ? fileListIndex + 1 > props.fileList.length
                            ? setFileListIndex(fileListIndex - 10)
                            : fileListIndex + 1
                        : 0}
                    -{Math.min(fileListIndex + 10, props.fileList.length)}
                </>
            </p>
        </Dragger>
    </UploadDropZone>
</Up

It is wrapped in the drop zone so that it can look like this:

[A-Baji]

It's kind of messy, but I managed to get it working by disabling the onDrop callback for the dropzone and then handling it in the batch add hook conditionally depending on whether or not the file has a webkitRelativePath value. No webkit path means use the withFullPath value.