Allow selecting both directories and files for upload

[mart-jansink]

Is your feature request related to a problem? Please describe.
My users need to be able to select both directories and files for uploads. This sadly can't be done with in one go because setting the webkitdirectory attribute disables the selection of single files (at least in Chrome on macOS). The best approach I found is providing the user with two buttons: a "upload files" and "upload directory" one. Then call .showFileUpload() from their click handler after setting the webkitdirectory attribute to respectively false or true on the file input. However, this is slightly complicated because there's no reference to this input available.

Describe the solution you'd like
Make the fileInputRef available in the UploadyContext.

Describe alternatives you've considered
Have .showFileUpload() apply the webkitdirectory option (and also e.g. the multiple one) before calling input.click(). Or even add a .showDirectoryUpload() method that does the same.

[yoavniran]

Hi @mart-jansink
This should be possible using the custom input setup. It was mostly documented under the useFileInput hook info.

To help make it clearer, I just published a new guide: Custom Input
Specifically the custom button code example there should help you.

Let me know if this answers your need or if you still need assistance.

[tacohiddink]

Hi @mart-jansink
Why not use the Drag & Drop component (this enables dragging of files and complete folders) and combine that with a button (to select files only)

[mart-jansink]

@tacohiddink Sadly drag&drop doesn't provide the files in nested directories, nor does it give it a webkitRelativePath that you do get using the webkitdirectory attribute on the file input. And for some of the content that my users can upload the directory structure is quite important to retain. At the same time, these directories can be really big (100GB+) so zipping them isn't always an option since these files are nearly incompressible anyway.

@yoavniran Thanks, that's exactly what I'm doing now. But I thought it'd be easier to be able to use a reference to the file input that's already being created and hoped that other people could benefit from this.

[tacohiddink]

@mart-jansink maybe I am missing something, but I am able to drag and drop complete nested directories onto the d&d component.
Did have to provide these settings:

htmlDirContentParams={{ recursive: true, withFullPath: true}}

[mart-jansink]

Thanks, I was the one that missed something because with that extra configuration it mostly works. There's still a difference regarding the full path between selecting a directory and drag-and-dropping one, but I can easily work around that.

[yoavniran]

@mart-jansink im conflicted over exposing a ref to the internal input.
Im not sure if in the long run it will be good to have that part of the public API.
That is why I allowed handing a custom input from the outside for advanced use-cases that are a small fraction of what users typically require.
I'll keep this in mind and think about whether its something to add in the future.

For now Ill move this issue to the discussions section for others to see.

[mart-jansink]

I understand your concern. But would you perhaps then consider having .showFileUpload() set the webkitdirectory attribute (and also e.g. the multiple one) as passed in its options, just before calling input.click()? I'd be happy to make a pull request for that.

[yoavniran]

Its an interesting idea. I need to think about it. The reason for my hesitation is that its not very "Reacty". Its means changing attributes outside of the render flow - since they are set when the <Uploady> component is rendered

[mart-jansink]

I totally understand your concern, it’s mine as well. But I would implement it such that I’d restore the element as it was immediately after the click. This is also necessary for it to handle drag-and-drops etc. like how it was configured in the first place.

And modifying elements directly is already being done by the drop-zone module that adds and removes classes.

I’ll make a pull request, shouldn’t be that much work, and you can decline that if you still feel it’s not right.

[yoavniran]

I dont like that at all (setting and resetting) :)
I think it will be better to hand over the internal ref as you suggested before.
The useFileInput hook can be used to return the ref. If its called without a custom input. It will return the one created by Uploady.

      const inputRef = useFileInput();

Then user-code can apply whatever logic on the dom element without going through Uploady (same as giving custom input)

This has the benefit of allowing Uploady to know when the ref was given to the outside if in the future the code will have to make decisions based on that.

[mart-jansink]

Ah, I hadn't seen your latest message, so this might be a bit superfluous then: I had something in mind like mart-jansink@aa7e21d.

Regardless, getting the ref from useFileInput would be perfect!

[yoavniran]

@mart-jansink 0.12.0 is now out with the updated useFileInput hook.
Calling it without params returns the internal input ref (#175)