fix: `FluentInputFile` cannot accept dragged files when nested inside a `FluentDropZone` about fluentui-blazor HOT 5 CLOSED

That's what I've done as a work-around. I've got a toggle for "Edit Mode", and "Display Mode".

Some observations / brain dump:

You can combine Drop Zones to the point that you can create cells within a grid, with the FluentDropZones. I have three columns, and different amounts of items within each column. Each column is a drop zone, and each cell is a draggable DropZone within a droppable DropZone. Each cell is given a column/row assignment. The cells drop zones take precedence over the column drop zones, so I can move the contents of each cell around by dragging them. I have a gap between each cell, and dropping into the gaps will drop into the column.

This shows, at least, that the drop zones do have a hierarchy between them. But this hierarchy doesn't seem to translate to the file uploader within the cell. The file uploader doesn't currently use a FluentDragContainer; it uses the vanilla attributes:

<div class="@ClassValue"
     style="@StyleValue"
     drop-files="@DropOver"
     disabled="@Disabled"
     @ondragenter="@(e => DropOver = true)"
     @ondragenter:stopPropagation
     @ondragover="@(e => DropOver = true)"
     @ondragover:stopPropagation
     @ondragleave="@(e => DropOver = false)"
     @ondragleave:stopPropagation
     @ondragend="@(e => DropOver = false)">

I'm wondering whether changing this to use the Fluent drag and drop system would put it into the hierarchy that already exists.

Failing all of that, it would still be useful to add the limitations to the docs for both the drag and drop system, and for any component that has a drag and drop capability that gets disabled by the drop zones.

from fluentui-blazor.

Hi Peter,

Please supply us with ready to run reproduction code in the form of a project or repository.

We do not have capacity to craft or compose a reproduction for every issue that gets raised.

If no code or repository is provided, this issue will get closed automatically in 3 days

Help us to help you. Thanks

from fluentui-blazor.

Added: minimal reproduction

<FluentDragContainer TItem="object">
    <FluentDropZone Draggable="false" Droppable="true">
        <FluentInputFile Mode="InputFileMode.Stream"
                         Multiple="false"
                         DragDropZoneVisible="true"
                         Style="border: dotted 1px; padding: 1rem;"
                         OnCompleted="args => { Console.WriteLine(args.Single().Name); }">
            <ChildContent>
                <label for="file-uploader">
                    <FluentIcon Value="new Icons.Regular.Size24.ArrowUpload()" />
                </label>
                <div>
                    Drag a file here to upload or
                    <label for="file-uploader">browse</label>
                    for them
                </div>
            </ChildContent>
        </FluentInputFile>
    </FluentDropZone>
</FluentDragContainer>

from fluentui-blazor.

I don't think it's possible to combine the two Drop zones easily.
Perhaps you could add an Edit button that would activate the FluentDragContainer mode?

from fluentui-blazor.

I experimented a bit with trying to get this to work and succeeded. What I dis is I added a ``FluentInputFileDropZone which is basically a copy of the standard dropzone but with all the preventDefault's removed.

As this is a bit of a niche/edge case, I won't be adding this as a component to the library, but you can use it as a solution in your own project.

from fluentui-blazor.