Is it possible to make a div clickable and allow drag and drop?

[EduVencovsky]

In the drag and drop example you either have a div with drag and drop or a hidden clickable input with drag and drop.

Is there a way to make a div clickable too?

[Tewr]

Hello! No!

For a clickable element, an input is always necessary. The native file chooser dialog only appears from clicking on an input type=file.

Either as a hidden underlying, or hidden somewhere else and raise the click event on the input during some arbitrary click event.

[EduVencovsky]

hidden somewhere else and raise the click event on the input during some arbitrary click event.

@Tewr Could you be more clear on how this would work ?

The thing is I think I can't do that, because if I do, I will need two ElementReference.

I'm not sure how to simulate a clickable div that will click on the input (with js) and also allow drag and drop because of the need to call RegisterDropEventsAsync on the div ref, but also have the input's ref, which will need two ElementReference.

[EduVencovsky]

The issue I'm facing here is that I don't want to make everything inside a div clickable because of the hidden input all around it, but I also want to make the container div to support drag and drop.

One example of this feature can be found in youtube when you are going to upload a video.

[Tewr]

If I would do this, I would create a div as in the first example. Once that works, add two inputs, as in the second example. Manage a common stream reference (or a common list of streams, if you want to support multiple files) using the drop event on the div, and the change event on the inputs. You would call createReference three times, one for the div and one for each input type=file.

An alternative, that I haven't really tried, would be to keep a single large input as in the second example, and add an element on top of it that doesn't bubble down the clicks. And then on the two buttons you do allow bubble down of the clicks. On the top of my head I'm not sure if that solution involves additional JavaScript though, might be a bit tricky.

[thopdev]

I have something alike and i just handle the click event on the div and trigger a js function that clicks the invisible file upload button.

[arivera12]

@Tewr the short answer I think it's yes but is not straight forward.

He would need to make a div element trigger the input file click event.

I already did this using this library.

[cwinland]

I did something similar with a clickable div. In my case, I used a button to trigger the click on a hidden input. <Button title="Click to open selection dialog" Disabled="Disabled" Clicked="OpenDialog" Color="Color.Primary"> Open Dialog will basically run javascript to click the input. elt is the inputElement and b is the boolean if the dialog will support webkitdirectory.

window.inputClick = (elt, b) => { elt.webkitdirectory = b; elt.click(); }

In order to trigger the input to upload, I bound the input control like this: <input @ref="inputElement" multiple disabled="@Disabled" @bind-value:event="onchange" @bind-value="FileList"/>

then the filelist can run a method to do something like this: var files = (await reference.EnumerateFilesAsync()).ToList();

In my PR, I have included a way to drag/drop multiple files and folders at the same time and it will track the relative paths of the tree. https://github.com/Tewr/BlazorFileReader/pull/190

The GUI is my own gui, but you can see I have a button that says select files and a drag/drop area. I could have made the div clickable in this case instead of the button.