File select

[worksofliam]

Feature/component description

A file select component: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

Use case

We have a web view where a user can select an SSH key from their file system. We use the file selector, then pass the value back from the panel to the extension for the extension to read the file.

Screenshots/references

Here is our existing UI:

[chrisdholt]

@daviddossett would love your thoughts/feedback here on a foundation ‘file’ component: https://github.com/microsoft/fast/issues/5269

[daviddossett]

Thanks @worksofliam! It's a reasonable ask—we have a few other input types waiting to be added to the toolkit as well. As Chris pointed out above we would need the underlying component to be added to fast as a first step.

@chrisdholt I'll follow up on the issue with some early thoughts. Thank you!

[daviddossett]

Doing some digging and have a couple of points for discussion:

• Should the component support multiple file values? Or is there a good reason to limit to a single selection?
• Should it be closely coupled with a label component? Could be optional for special cases.
• Are there other interactions that need to be considered? E.g. drag n' drop configurations

@worksofliam it would be great to get your input here too.

[worksofliam]

Should the component support multiple file values? Or is there a good reason to limit to a single selection?

This could probably just be a property on the component? <vscode-file id="x" multiple=bool />

Should it be closely coupled with a label component? Could be optional for special cases.

It should be coupled, but optional for sure.

I don't think drag and drop should be considered initially. Perhaps that could be looked into when asked for.

[yannickowow]

Hello, I was also looking on this and going deeper on this subject. It looks like HTMLInputElement does not throw a change event containing the directory path if it is empty (currently out of W3C spec...). Do you think that this component will strictly extend a input element or it will be able to load an empty directory (for example, through VS Code Dialog)?

Best Regards!

[chrisdholt]

Hello, I was also looking on this and going deeper on this subject. It looks like HTMLInputElement does not throw a change event containing the directory path if it is empty (currently out of W3C spec...). Do you think that this component will strictly extend a input element or it will be able to load an empty directory (for example, through VS Code Dialog)?

Best Regards!

If the VSCode team decides to leverage the FAST component class and template it'll be form associated, but I believe the current plan for the change event is to map to the proxy element. You can take a look here at the progress: https://github.com/microsoft/fast/pull/5336/files

Could you elaborate on your need and possible implementation regarding your expectations above w/ loading an empty directory?

[yannickowow]

My current webview implementation uses a input with non-standard webkitdirectory attribute. It allows to select a folder instead of a file. However, it does not work if this one is empty. I use this input component to select a folder to run a CLI in a given working directory.

But I guess that is out-of-spec, since W3C does not support directory selection yet

[chrisdholt]

My current webview implementation uses a input with non-standard webkitdirectory attribute. It allows to select a folder instead of a file. However, it does not work if this one is empty. I use this input component to select a folder to run a CLI in a given working directory.

But I guess that is out-of-spec, since W3C does not support directory selection yet

Technically the FAST class can be extended to include non-standard attributes and behaviors such as this; it's a benefit of the approach we take. I don't think we would include this attribute out of the gate as it's not standard, but it certainly could be included here if the VSCode team saw value in that specific non-standard attr. Alternatively, you could also extend yourself and depending on what the team decides to expose, you could recompose a custom file component with the vscode styles and your attr...all comes down to what gets built where :).

[worksofliam]

@daviddossett Hope you are having a good end of the year so far - jealous of your long time off!

My idea for work around:

1. I have a button and text
   • Button label: Chose file
   • Text label: ...
2. Click on the button -> vscode.postMessage which calls scode.window.showOpenDialog
3. When file is chosen, send back to frontend with webview.postMessage
4. Handle chosen file with window.addEventListener and update Text label with chosen path
   • Also update any internal variables

[worksofliam]

Hey folks, any update on this?

[daviddossett]

@worksofliam things have been on hold for a bit—we're just getting back up to speed on all things toolkit-related so I'll check back in soon.

[worksofliam]

@daviddossett Hey there. Just poking about this feature again.

[hawkticehurst]

Hey @worksofliam!

No updates on this yet, unfortunately. We've become really tightly resourced during the last year and David and I have to split our time between the toolkit and a handful of other projects these days.

There is a chance I'll start to get some more time to work on toolkit stuff by the end of spring/early summer but it's still very TBD, so I'll try to circle back once I know more :)