feat: multiple file support for file_drop

[hkayabilisim]

Added multiple file support to file_drop component.
Same as the original component, directories are simply ignored. Multiple file support was actually embedded in the underlying VUE scripts. I've done minor changes.

Compatibility:
on_file callback function now accepts List[FileInfo] as opposed to single FileInfo object. This may bring some problems for existing codes. As a remedy, if the number of files is just one, we can return a single FileInfo. If not, we return list. I leave it up to you to decide.

This is related to: #260

[mariobuikhuizen]

Thanks for your contribution @hkayabilisim!

We would like to keep this component backward compatible. We could accomplish this by adding an argument multiple with a default value of False and have on_file also work with a single file (see this for an example of the typing, note the argument optional: Literal[False])

[hkayabilisim]

missing ';' at the end of the "padding:" line was causing CSS problem.

[hkayabilisim]

Changes required for backward compatibility:

1. multiple property is added to FileDrop
2. Two different on_file callback signature used: FileInfo and List[FileInfo]
3. FileDrop is overloaded to match two different on_file signatures.
4. FileDrop apidoc is updated
5. FileDrop example is updated
6. bullet list in VUE template is removed
7. isFile property is always set to True (this was a hidden bug)
8. app/scatter.py is reverted to original version

[hkayabilisim]

Comments of @mariobuikhuizen are handled in 7d44858ec65c103c299d9757c4ef169e5f5b9f9b

[maartenbreddels]

Looking good!
A few issues

• due to a large refactor, files have moved (see refactor: Uniting API, Docs, and Examples under Documentation on solara.dev #421)
• I think we need to pass 'multiple' to the frontend, because now you can still drag in multiple files and they render in the component, I think we should show only 1
• Some style issues (if you install pre-commit and run pre-commit install, those will be fixed for you - and we should document this on https://solara.dev/docs/howto/contribute )

Looking forward to see this green in CI, and get this merged 🥳

[hkayabilisim]

• Used "multiple" option in file_drop.vue to list single file in drop zone when multiple is not selected. However, I couldn't propogate "multiple" to further inside Vue to prevent processing multiple file when multiple is not selected. I don't think this is a big issue.
• I could select a wrong return type from FileDrop. I guess, it must have been reacton.core.something but couldn't find it properly.
• I used pre-commit to clean style issues but couldn't solve the following one. So, I had to disable pre-commit right before commit:

[hkayabilisim]

Hi @maartenbreddels

There is only one error I couldn't resolve. Help needed!

[maartenbreddels]

Hi Huseyin,

we had quite a long discussion internally on this PR.
For ToggleButton https://github.com/widgetti/solara/blob/master/solara/components/togglebuttons.py we had two different components

• ToggleButtonsSingle
• ToggleButtonsMultiple

This is because otherwise the typing becomes quite complex (as you can see now for FileDrop), and it only works for literals. So if you want to take advantage of the typing you need to do:

if multiple:
  FileDrop(..., multiple=True)
else:
  FileDrop(..., multiple=False)

Which is a bit odd. For this reason, it might be better to have
FileDrop and FileDropMultiple (they can call the same internal component btw, it's just the public API)

However, also that would be inconsistent in the naming, so either solution is not perfect.

Two questions:

1. What do you think about the typing and one vs two components
2. If you also prefer FileDropMultiple, are you willing to do the changes? If not, we're happy to help.

Let us know, and thanks you for your help on this.

Regards,

Maarten

[hkayabilisim]

Hi Maarten,

Getting rid of some complexity by creating two variants (FileDrop and FileDropMultiple) seems a good idea.

I've just created FileDropMultiple and commited to the branch and tested little bit (fa6cd23). It seems ok, and CI checks are green. Yet, you should revise my implementation in case if I missed some points.

Sincerely
Huseyin

[maartenbreddels]

Hi Huseyin,

whow, many thank for doing all this work!
CI looks green (ignore that failing one, that's not related to what you do)
Will review after the weekend probably. Have a good weekend.

Regards,

Maarten

[maartenbreddels]

Awesome work.
Let me know if you have the energy to do these last changes. I know we're asking a lot from you, so we are happy to do the last mile.

[hkayabilisim]

No problem Maarten! I've added _FileDrop to prevent code repetitions. I hope this is what you have in your mind!

[hkayabilisim]

It may not fit 100% to the code styling requirements but I think my last commit e5e6f40 solves most of the highlighted issues.

One of the checks keeps failing but I couldn't understand why.

[iisakkirotko]

Hi @hkayabilisim! Just wanted to let you know that the CI failure is still unrelated, it should be fixed by #574. We'll try to get this PR in soon™️ :)

[maartenbreddels]

This branch had some flakiness that we wanted to attack (see the last commit) before merging it. Thanks for your patience!