Upload whole folders, preserving the nested structure with FileSelector

[JosuaCarl]

Description

When I want to process MS data, some manufacturers provide the output as folders, with which I want my application to interact. I can however not upload folders as a whole with the file_selector. This limits my ability to integrate my pipeline.

Solution Proposed

• Add webkitdirectory support for File Selector that mimics the folder structure that is given to it

Impact of Solution

The ability to exclude subfolders (for example via a regular expression or glob) could be important for use cases that want to upload parts of projects.

Additional Context

The folder structure is defined here:
https://github.com/Avaiga/taipy/blob/26e11259c7bce1e04d050460d91323805f4498c9/taipy/gui/gui.py#L1010C1-L1011C4

The FileSelector is implemented here:

taipy/frontend/taipy-gui/src/components/Taipy/FileSelector.tsx

Lines 61 to 73 in a131486

	const FileSelector = (props: FileSelectorProps) => {
	const {
	id,
	onAction,
	defaultLabel = "",
	updateVarName = "",
	multiple = false,
	extensions = ".csv,.xlsx",
	dropMessage = "Drop here to Upload",
	label,
	notify = true,
	withBorder = true,
	} = props;

and the HTML Element is defined here:
https://github.com/Avaiga/taipy/blob/a131486fbe938acff9de2b0b3961158117b37458/frontend/taipy-gui/src/components/Taipy/FileSelector.tsx#L189C1-L199C13

Acceptance Criteria

• If applicable, a new demo code is provided to show the new feature in action.
• Integration tests exhibiting how the functionality works are added.
• Any new code is covered by a unit tested.
• Check code coverage is at least 90%.
• Related issue(s) in taipy-doc are created for documentation and Release Notes are updated.

Code of Conduct

• I have checked the existing issues.
• I am willing to work on this issue (optional)

[JosuaCarl]

I think I might need some help. I can get the folder structure with webkitdirectory, use uploadFile from fileupload.worker.ts to pass it to __upload_files in gui.py and in case it is not empty, construct the directories as needed with the files landing in the right place. But the problem is, that webkitdirectory is not in React's InputHTMLAttributes, so i tried to extend the module with

declare module "react" {
    interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
      // extends React's HTMLAttributes
      webkitdirectory?: string;
    }
};

This works fine, but when I declare webkitdirectory with

const FileSelector = (props: FileSelectorProps) => {
    const {
        ...
        webkitdirectory = "",
        ...
    } = props;

, as ssuggested here: facebook/react#3468 (comment), the folder selector stays activated in the final HTML, regardless, whether webkitdirectory is present in my markdown or not.

If I declare it like so:

const FileSelector = (props: FileSelectorProps) => {
    const {
        ...
        webkitdirectory,
        ...
    } = props;

the folder selector never appears, even when present in the markdown command chain. I initially tried to set the property to a boolean, but it seems this does not work with React, as it never appears.

A workaround I could picture would be the creation of a separate uploader, but this seems overkill to me.

[JosuaCarl]

Ok, I think I got it handled now. It seems I can make a string argument disappear by giving it nothing (like not even None).

[FredLL-Avaiga]

webkitdirectory is supposed to be a boolean
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory
so you can declare the corresponding property as boolean

[JosuaCarl]

webkitdirectory is supposed to be a boolean https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory so you can declare the corresponding property as boolean

Yes it is supposed to be like that, but React will not accept it as such. Believe me, I've tried, and I don't know whether I missed something, but others have seemingly failed as well: facebook/react#3468 (comment)
It is claimed, that it is an issue with it not being whitelisted (whatever that means, I'm not really deep into React).

[FredLL-Avaiga]

you can do it like this for now

const directoryProps = props.allowFolder ? {webkitdirectory: "", directory: "", mozdirectory: "", nwdirectory: ""}: undefined
<input type=file  {...directoryProps } />