Is it possible to drag and drop directly on UploadButton

[jacob-minca]

I wanted to see if it was possible to allow dragging and dropping on the UploadButton. To my understanding, I thought you would be able since the UploadButton is inside the UploadDropZone. Every time I drag a file over the UploadButton, the file gets opened in my browser. It seems like the UploadButton isn't considered the drop zone.

return (
<UploadDropZone
    className={`p-4 sm:p-24 w-full ${uploading ? "hidden" : ""}`}
    onDragOverClassName="bg-gray-200"
>
    <UploadButton
        text={uploading ? "Uploading..." : buttonText}
    />
</UploadDropZone>)

[yoavniran]

hey @jacob-minca
Without resorting to complicated and probably buggy javascript. I'd solve this using CSS.
Specifically, hide the button when the drag is over the drop-zone.

simple example with styled-components:

const StyledDropZoneWithButton = styled(UploadDropZone)`
  &.drag-over {
      button {
          display: none;
      }
  }
`;

const WithUploadButtonInside = () => {
    return (
        <Uploady>
            <StyledDropZoneWithButton
                onDragOverClassName="drag-over"
            >
                <UploadButton />
            </StyledDropZoneWithButton>
        </Uploady>
     );
}

[MikeiLL]

Hey, @yoavniran.

Amazing work. Thank you.

Hope I'm not incurring on your SciFi writing here with my spam.

Ultimate, I would love to have a DropZone which supports Drag or Click, like in React DropZone.

Current approach, following your suggestion here, is to include a <UploadButton> and a <span>, toggling between them on dropzone.drag-over:

<Uploady
    destination={{ url: upload_url + "&doctype=" + selectedDocType }}
>
    <UploadDropZone
        className="dropzone"
        onDragOverClassName="drag-over"
    >
        <UploadButton>Drag files or click here to upload.</UploadButton>
        <span>Drag files or click here to upload.</span>
    </UploadDropZone>
</Uploady>

.dropzone {
    align-items: center;
    padding: 20px;
    border-width: 2px;
    border-radius: 6px;
    margin: 0 2em;
    border-color: #898989;
    border-style: dashed;
    background-color: #fafafa;
    color: #898989;
    outline: none;
    transition: border .24s ease-in-out;
}

.dropzone button {
    border: none;
    background: none;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
}

.dropzone.drag-over button {
    display: none;
}

.dropzone:not(.drag-over) span {
    display: none;
}

Would this be the approach you'd recommend?

[yoavniran]

hey @MikeiLL
thanks! Always happy to answer Uploady questions 😄

Without running your code, I'd say it looks good. 👍

I like to change the drop-zone style a bit when the drag is over it to mark it "ready" for drop, but that's entirely a cosmetic option.

[MikeiLL]

I like to change the drop-zone style a bit when the drag is over it to mark it "ready" for drop, but that's entirely a cosmetic option.

Nice suggestion!

[jacob-minca]

thank you for the help @MikeiLL @yoavniran