Drag 'n drop

[jelly]

@tomasmatus interested?

One tricky thing here is we already have an upload-button component, so the eventlistener should be set up there instead so we don't have to pass files around.

---

Drag-and-Drop file upload

It is now possible to upload files by simply dragging them from your desktop or a file explorer and dropping them directly into Cockpit Files.

[jelly]

This works now, some pain points:

• We should disable dropping when an upload is in progress
• Chrome at least shows that one can drop everywhere which is not the case

Test on:

• Firefox
• Webkit

[tomasmatus]

ok so I think that broke uploading when it should work (when using drag & drop)

[tomasmatus]

oh right, tests won't work because I made some local changes to pkg/lib.

Also there's a bug I am currently trying to debug - drag&drop doesnt upload to pwd but to some old path? (maybe some old state/props, idk, debugging)

[tomasmatus]

@garrett I think we can now start talking about how to show that files can be dropped for upload. Right now I have this:

Take it as a concept screenshot, I needed something that "works" and is not a border-color: red.

The upload icon appears when user is dragging some file over the files card. Maybe it should instead work on the whole page.
You said you have some ideas how we could design this so I'd appreciate if we could discuss this next week.

[garrett]

So this is a quick attempt to mock up something.

Notes:

1. Not pixel perfect 😉 ... pixels will be off; sizes are probably off too; the font size is just some arbitrary one in Inkscape, not a PF size (and we should probably use a PF size)
2. Large drop area, over the folder view, so it's a big, easy to achieve drop target
3. 80% opaque background to provide a background contrast to the upload text, but transparent enough to show the files are still there
4. Directory path at the top and summary at the bottom are not obstructed, making it possible to identify where you're dropping it and that there are other files in that directory
5. Since the directory path and the status are not a drop target, they're a fine place to hover over to cancel the drop operation
6. Canceling the drop operation (not dropping on the target) should not load the file; it should prevent the default of browser dragging and dropping from loading the file... ideally this cancelling would also work when dropping on the shell, but I know there are probably technical reasons why this would be difficult
7. Singular vs. plural file/files depending on what's in the hover stack
8. This mockup doesn't show the cursor; I don't know if that's handled by default
9. The outline is dashed 3px PF link color
10. The overlay should have the same size as the card, so it probably needs to be a sibling that comes directly after the card's content and either have the same grid position... or be positioned absolutely.

I'll probably need to help with the CSS.

Source: drop-file-to-upload.svg

WDYT?

[tomasmatus]

I think that looks good, I like it! Thanks for the mockup

[tomasmatus]

7. Singular vs. plural file/files depending on what's in the hover stack

I'm afraid this is not possible, the DataTransfer object is added only on dragdrop event, for dragenter, dragover or dragleave it's set to null.

[jelly]

I would also suggest showing that you can't drop a file when an upload is in progress, to show a different backdrop which explains an upload is in progress.

[tomasmatus]

I would also suggest showing that you can't drop a file when an upload is in progress, to show a different backdrop which explains an upload is in progress.

Or we can not block the dropzone/upload button when there is another upload in progress

EDIT:
Before we actually go forward with never blocking the upload we'd need to look into it more closely. Discussed with @jelly and we'll probably postpone that for next year and for now keep the current blocking behavior

[cockpituous]

This added line is not executed by any test.

[tomasmatus]

Looks good, thanks! 🚀