feat: add FileDropZone component by arsen-afaunov · Pull Request #2487 · gravity-ui/uikit

arsen-afaunov · 2025-11-06T14:10:13Z

No description provided.

gravity-ui · 2025-11-06T14:12:04Z

Preview is ready.

gravity-ui · 2025-11-06T14:14:01Z

Visual Tests Report is ready.

korvin89 · 2025-11-12T17:01:33Z

The state of the component is not reset with such a case:

Screen.Recording.2025-11-12.at.17.59.06.mov

korvin89 · 2025-11-12T17:08:57Z

 export type UseFileInputProps = {
    onUpdate?: (files: File[]) => void;
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    multiple?: boolean;


The multiple prop was not initially added, as the hook gives the basic configuration for the native input. That is, if the consumer needs multiple, then you need to add it yourself, otherwise it turns out to be a strange proxy that passes the prop through and returns it in the same form without using it in any way in calculations.

korvin89 · 2025-11-12T17:14:42Z

+    role: 'button',
+};
+
+export interface DroppableProps extends Required<typeof DROP_ZONE_BASE_ATTRIBUTES> {


We usually name props according to this logic <ComponentOrHookName> + details. This is necessary so that all types have their own name space + it improves DX when working with lib types

korvin89 · 2025-11-12T17:19:31Z

+```
+
+The `useDropZone` hook provides props for an element to act as a drop zone and also gives access to the dragging-over state.
+Additionally, the hook supports a more imperative approach: it can accept a `ref` for cases where you don't have direct access to the HTML element you want to make a drop zone.


Can you describe the minimum usage examples?

korvin89 · 2025-11-12T20:05:48Z

+
+export interface UseDropZoneState {
+    isDraggingOver: boolean;
+    getDroppableProps: () => DroppableProps;


There seems to be no reason to make this as function

I think the function will scale better in case parameterization is needed: you can just add optional arguments instead of overloading the type and turning it into a union. In my view, the function is a better fit here.

korvin89 · 2025-11-12T20:26:45Z

+}
+
+function typeMatchesPattern(actualMimeType: string, expectedMimeTypePattern: string): boolean {
+    const actualMimeTypeParts = actualMimeType.split('/');


Are we assuming that only files will be used?

I didn’t quite understand the question. MIME types allow specifying arbitrary data. For instance, in the Storybook example, text/plain is used, which enables you to drag and drop HTML elements. Moreover, this way you can add custom MIME types like application/x-my-custom-type to make sure that only permitted elements are drag-n-dropped —this can be useful, for example, for a Kanban board app.

korvin89 · 2025-11-12T20:58:34Z

+    description?: string;
+    buttonText?: string;
+    icon?: IconData | null;
+    errorIcon?: IconData | null;


Do we really need more than one icon property?

It seemed to me that since the base icon and the “error” icon are semantically different, it makes sense to allow them to be customized separately. If we don't want to give the component user this flexibility in order to maintain visual consistency, that's not a problem—we can just remove this prop.

korvin89 · 2025-11-12T21:06:23Z

+import i18n from '../i18n';
+
+type FileDropZoneButtonProps = {
+    className?: string;


It seems to me that it would be convenient to have the children property so that explicitly using the button in the component layout, you can explicitly define the text in the button itself and not in its parent

buttonText is convenient to use as a parent зкщзукен if you don't explicitly use FileDropZoneButton

The motivation was as follows. First, I wanted to eliminate redundancy in the component's interface and make the parent's props the single source of truth in this regard. This way, the cognitive load on the component user is reduced, as they no longer need to keep two sets of props with the same meaning in mind. Second, this approach allows for the encapsulation of the logic related to text handling, ensuring consistency between the displayed texts and the component's internal states—for example, the user of the component won't need to handle error messages or grammatical pluralization themselves if the multiple prop is provided.

More generally, the compound component pattern here was intended solely to allow arbitrary layouts of elements, while fully hiding their internal implementation and their relationships.

korvin89 · 2025-11-12T21:08:31Z

+import {useFileZoneContext} from '../FileDropZone.Provider';
+
+type FileDropZoneDescriptionProps = {
+    className?: string;


The same with the children property as in FileDropZoneButton

korvin89 · 2025-11-12T21:09:44Z

+import i18n from '../i18n';
+
+type FileDropZoneTitleProps = {
+    className?: string;


The same with the children property as in FileDropZoneButton

korvin89 · 2025-11-12T21:11:31Z

+
+export interface FileDropZoneProps extends Pick<BaseInputControlProps, 'validationState'> {
+    accept: UseDropZoneAccept;
+    onAdd: (files: File[]) => void;


We usually use the name onUpdate for such callbacks, this is a familiar pattern for users of our library

gravity-ui · 2025-12-01T07:52:07Z

Preview is ready.

gravity-ui · 2025-12-01T07:54:42Z

🎭 Component Tests Report is ready.

arsen-afaunov · 2025-12-01T10:29:52Z

The state of the component is not reset with such a case:

Screen.Recording.2025-11-12.at.17.59.06.mov

Thank you for finding that! I’ll fix it.

arsen-afaunov · 2025-12-24T13:17:35Z

The state of the component is not reset with such a case:

Screen.Recording.2025-11-12.at.17.59.06.mov

Fixed the nesting counter consistency when transitioning between states.

arsen-afaunov requested review from ValeraS, amje and korvin89 as code owners November 6, 2025 14:10

arsen-afaunov changed the title ~~feat: add useDropZone hook~~ feat: add FileDropZone component Nov 6, 2025

arsen-afaunov force-pushed the DATAUI-3438-add-FileDropZone-component branch from e93907d to 8173352 Compare November 10, 2025 15:26

korvin89 reviewed Nov 12, 2025

View reviewed changes

arsen-afaunov force-pushed the DATAUI-3438-add-FileDropZone-component branch from 8173352 to b9fb7a6 Compare December 1, 2025 07:50

arsen-afaunov commented Dec 1, 2025

View reviewed changes

Comment thread src/hooks/lab/useDropZone/useDropZone.ts

Comment thread src/hooks/lab/useDropZone/useDropZone.ts

Comment thread src/hooks/useDropZone/useDropZone.ts Outdated

Comment thread src/components/lab/FileDropZone/README.md

arsen-afaunov force-pushed the DATAUI-3438-add-FileDropZone-component branch from b9fb7a6 to dd99072 Compare December 1, 2025 10:36

arsen-afaunov force-pushed the DATAUI-3438-add-FileDropZone-component branch from 41621aa to 0cda828 Compare January 21, 2026 12:46

arsen-afaunov added 6 commits February 2, 2026 12:36

feat: add useDropZone hook

0580ac5

feat: add FileDropZone component

d04493e

fix: address code review comments

4b77d92

fix: fix nesting counter consistency issues

cc6ea90

chore: ensure type consistency in useDropZone hook interface

7a57e22

chore: move FileDropZone to lab

7c83f09

arsen-afaunov force-pushed the DATAUI-3438-add-FileDropZone-component branch from 0cda828 to 7c83f09 Compare February 2, 2026 10:24

korvin89 approved these changes Feb 2, 2026

View reviewed changes

arsen-afaunov merged commit 97a78af into main Feb 2, 2026
5 checks passed

arsen-afaunov deleted the DATAUI-3438-add-FileDropZone-component branch February 2, 2026 10:36

gravity-ui Bot mentioned this pull request Feb 2, 2026

chore(main): release 7.31.0 #2559

Merged

Conversation

arsen-afaunov commented Nov 6, 2025

Uh oh!

gravity-ui Bot commented Nov 6, 2025

Uh oh!

gravity-ui Bot commented Nov 6, 2025

Uh oh!

korvin89 commented Nov 12, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

korvin89 Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

korvin89 Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

korvin89 Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gravity-ui Bot commented Dec 1, 2025

Uh oh!

gravity-ui Bot commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

arsen-afaunov commented Dec 1, 2025

Uh oh!

arsen-afaunov commented Dec 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

korvin89 Nov 12, 2025 •

edited

Loading

korvin89 Nov 12, 2025 •

edited

Loading

korvin89 Nov 12, 2025 •

edited

Loading

gravity-ui Bot commented Dec 1, 2025 •

edited

Loading