feat: add FileDropZone component #2487

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

src/hooks/useFileInput/useFileInput.ts

 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

src/hooks/useDropZone/useDropZone.ts

+    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

src/hooks/useDropZone/README.md

+```
+
+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

src/hooks/useDropZone/useDropZone.ts

+
+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

src/hooks/useDropZone/useDropZone.ts

+}
+
+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

src/components/FileDropZone/FileDropZone.tsx

+    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

src/components/FileDropZone/parts/FileDropZone.Button.tsx

+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

src/components/FileDropZone/parts/FileDropZone.Description.tsx

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


The same with the children property as in FileDropZoneButton

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

src/components/FileDropZone/parts/FileDropZone.Title.tsx

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


The same with the children property as in FileDropZoneButton

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

src/components/FileDropZone/FileDropZone.tsx

+
+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.

src/hooks/useDropZone/useDropZone.ts

src/components/FileDropZone/README.md

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

src/hooks/useDropZone/useDropZone.ts Show resolved Hide resolved

src/hooks/useDropZone/useDropZone.ts Show resolved Hide resolved

src/hooks/useDropZone/useDropZone.ts Outdated Show resolved Hide resolved

src/components/FileDropZone/README.md Show resolved Hide resolved

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

arsen-afaunov added 5 commits January 21, 2026 15:41

feat: add useDropZone hook

7d035ee

feat: add FileDropZone component

83645c6

fix: address code review comments

c1afddd

fix: fix nesting counter consistency issues

0e6f6b1

chore: ensure type consistency in useDropZone hook interface

0cda828

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

feat: add FileDropZone component #2487

Are you sure you want to change the base?

feat: add FileDropZone component #2487

Uh oh!

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!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 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