--- title: "Zona de soltar archivos" description: "Envuelve cualquier parte de una pantalla para que se puedan soltar archivos en cualquier punto de ella, mientras todo lo que contiene funciona como antes. No dibuja nada hasta que se arrastran archivos sobre ella; entonces cubre toda la zona con un único mensaje y entrega a tu producto los archivos que aceptó y los que rechazó." url: "https://tanrei.chnotchy.com/es/components/drop-zone/" last_updated: 2026-10-23T21:17:12.000Z --- # Zona de soltar archivos > Envuelve cualquier parte de una pantalla para que se puedan soltar archivos en cualquier punto de ella, mientras todo lo que contiene funciona como antes. No dibuja nada hasta que se arrastran archivos sobre ella; entonces cubre toda la zona con un único mensaje y entrega a tu producto los archivos que aceptó y los que rechazó. ## Descripción general Una zona de soltar archivos convierte una pantalla entera, o cualquier parte de ella, en un lugar donde se pueden soltar archivos. Envuelve con ella una lista de documentos, una biblioteca de videos, una conversación o la región principal de tu aplicación. Todo lo que hay dentro sigue funcionando como antes: los botones, las tablas y los campos se pulsan, se desplazan y se alcanzan con el teclado como si la zona no estuviera. La zona no añade paso del cursor, ni pulsación, ni parada de foco, ni rol. Mientras se arrastran archivos sobre ella, una única superposición cubre la zona: un oscurecimiento sobre el contenido, un borde a su alrededor y un panel con un glifo de subida y tu mensaje. Cuando se sueltan los archivos, la zona los juzga con la misma regla que el [selector de archivos](https://tanrei.chnotchy.com/es/components/file-picker/) y te los entrega: los archivos aceptados, con `select`; los rechazados, con `reject`. Pásalos a un [control de subida de archivos](https://tanrei.chnotchy.com/es/components/file-upload/), o a una lista tuya. > [!WARNING] > **Nunca la única forma** > > Arrastrar un archivo es un movimiento del puntero que un teclado, un lector de pantalla, el control por voz y la mayoría de las pantallas táctiles no pueden hacer. Una pantalla con una zona de soltar archivos ofrece siempre también un [selector de archivos](https://tanrei.chnotchy.com/es/components/file-picker/) o un [control de subida de archivos](https://tanrei.chnotchy.com/es/components/file-upload/): en una barra de herramientas, en una barra de la aplicación o en un estado vacío. Una compilación de depuración notifica una página que no tiene ninguno de los dos. Usa en su lugar la disposición con zona para soltar del selector de archivos cuando el lugar donde soltar es una zona delimitada dentro de un formulario, que además se pulsa para abrir el selector. En la web es ``. Las demás plataformas todavía no lo han implementado. ### Uso Envuelve el contenido y escucha `select`. **Web** ```html Subir videos …los videos del canal… ``` **React** ```tsx import { Button, DropZone, FileUpload } from '@tanrei/react'; uploads.current?.add(event.detail.files)} onReject={(event) => showRefused(event.detail.files)}> ``` La caja de la zona es la caja de diseño del contenido. Dale estilo como a cualquier envoltorio: una altura, `display: grid`, `overflow`. ## Especificaciones - Category: Selection - Level: base - Listing: default - Page: https://tanrei.chnotchy.com/components/drop-zone/ - Spec: https://github.com/chnotchy/tanrei/blob/main/specs/drop-zone.spec.json ### Availability | Design system | Has it | Notes | | --- | --- | --- | | Tanrei (`tanrei`) | Yes | — | | Cupertino (Apple HIG-inspired) (`cupertino`) | Yes | — | | M3 Expressive-like (Material 3 Expressive-inspired) (`m3-expressive-like`) | Yes | — | | M3-like (Material 3-inspired) (`m3-like`) | Yes | — | ### Platforms - Web: the element ``, registered by importing `@tanrei/web` (or only its own module, `@tanrei/web/components/drop-zone`). - React: `DropZone` from `@tanrei/react`. | Platform | Name | Status | | --- | --- | --- | | Web | `tanrei-drop-zone` | alpha | | SwiftUI | `TanreiDropZone` | planned | | Jetpack Compose | `TanreiDropZone` | planned | | Flutter | `TanreiDropZone` | planned | | React Native | `DropZone` | planned | Names a platform gives in its own idiom: | Spec | Web | SwiftUI | Jetpack Compose | Flutter | React Native | | --- | --- | --- | --- | --- | --- | | `multiple` (prop) | `multiple` | `allowsMultiple` | `multiple` | `multiple` | `multiple` | | `accept` (prop) | `accept` | `allowedContentTypes` | `mimeTypes` | `accept` | `accept` | | `silent` (prop) | `silent` | `isSilent` | `silent` | `silent` | `silent` | | `disabled` (prop) | `disabled` | `disabled` | `enabled` | `enabled` | `disabled` | | `select` (event) | `select` | `onSelect` | `onSelect` | `onSelect` | `onSelect` | | `reject` (event) | `reject` | `onReject` | `onReject` | `onReject` | `onReject` | Statuses: `planned` — In the inventory. Nothing shippable exists yet. `lagging` — An implementation of an earlier spec exists; it has not caught up with the current one. `alpha` — Implemented with tests. The API may still change. `beta` — Feature complete and at parity. Only fixes are expected. `stable` — Covered by semantic versioning. `deprecated` — Still shipped; scheduled for removal. ### Anatomy - `container`: The zone itself: a box around the product's content, of the size its layout gives it. It draws nothing of its own, carries no state and exposes nothing. - `content`: What the product places in the zone, in its default slot: laid out, styled and used as without the zone. - `overlay` (optional): Drawn only while files are dragged over the zone: one layer over the whole zone's box, above all its content — the scrim, and the edge drawn inside the box. It takes no press and no scroll. - `panel` (optional): The raised surface at the centre of the part of the zone that is in view, holding the glyph and the message. - `icon` (optional): The glyph in the panel: the icon set's upload glyph, or its block glyph while the zone refuses what is dragged. Decorative. - `label` (optional): The message in the panel: dropText, or refusingText while the zone refuses what is dragged. ### Props | Prop | Type | Default | Web attribute | Description | | --- | --- | --- | --- | --- | | `multiple` | `boolean` | `false` | `multiple` | Whether a drop may bring more than one file, as the File picker's multiple. False: a drop of several is refused whole (reject, reason count). True: any number, up to maxFiles. | | `accept` | `strings` | `` | `accept` | The kinds of file that are taken, as the File picker's accept: file name extensions with their dot (".pdf") and media types, a whole family as "image/*". A dropped file of another kind, or a folder, is refused (reject, reason type). Empty takes every kind. | | `maxSize` | `number` | — | `max-size` | The largest size of one file, in bytes, as the File picker's maxSize. A larger file is refused (reject, reason size). Null sets no limit. Judged from the size the platform reports; the file is not read. | | `maxFiles` | `number` | — | `max-files` | The most files one drop may bring while multiple is true, as the File picker's maxFiles: files beyond it are refused (reject, reason count). Null sets no limit; ignored while multiple is false; zero refuses every file — the room a full list has left. Nothing is counted across drops: a product that keeps a list sets this to the room that is left. | | `dropText` | `string` | `""` | `drop-text` | The message in the overlay while the zone will take what is dragged over it, in the product's words ("Drop files to upload them"). Empty reads the product's words; with neither, the panel draws the glyph alone and that is reported. | | `refusingText` | `string` | `""` | `refusing-text` | The message in the overlay while the zone will not take what is dragged over it ("These files cannot be added here"). Drawn only where the platform tells before the drop that nothing dragged can be taken (DRZ-5). Empty reads the product's words; with neither, the panel draws the block glyph alone and that is reported. | | `droppedText` | `string` | `""` | `dropped-text` | The sentence assistive technology is told after a drop in which files passed, with the place {count} filled by how many ("{count} files added"). Empty reads the product's words; with neither, nothing is said for them and that is reported (DRZ-11). | | `refusedText` | `string` | `""` | `refused-text` | The sentence assistive technology is told after a drop in which files were refused, with the place {count} filled by how many ("{count} files could not be added"). Empty reads the product's words; with neither, nothing is said for them and that is reported (DRZ-11). | | `silent` | `boolean` | `false` | `silent` | Whether the drop zone says nothing after a drop. Set it only where the product hands every dropped file to a component that says them itself — a File upload that keeps its own rows announces each file it keeps or refused — so that one drop is not said twice. It changes nothing that is drawn. | | `disabled` | `boolean` | `false` | `disabled` | Nothing can be dropped: no overlay is drawn and nothing is emitted. It concerns dropping alone — the content is neither disabled nor dimmed, and stays as usable as it was. | ### Events | Event | Description | | --- | --- | | `select` | Files were dropped on the zone and passed accept, maxSize and the count of one drop. Emitted once per drop, with those files as the platform's own handles, in the order the platform gave them — what the File picker's select carries (FPK-9). The drop zone keeps none of them and reads none: the product hands them to a File upload's way in, a list of its own, or a sending of its own. | | `reject` | Files of one drop were refused. Emitted once, after select where both happen, with each refused file and its reason — type (not among accept, or a folder), size (larger than maxSize) or count (more than one while multiple is false, or more than maxFiles in one drop) — what the File picker's reject carries (FPK-9). The reasons are names for the product's code: the product says what happened where a person sees it (a snackbar, a row of its list, a Field's errorText). | ### Slots | Slot | Description | | --- | --- | | `default` | The content: any part of the product's screen — a list, a table, a working view, the main region of an app shell. In fixtures the content is a sample screen: the fixture's content string as a paragraph above an outlined Button labelled "New video", on a surface 360 wide and 240 tall. | ### States `enabled`, `disabled`, `dragged` ### Accessibility - Role: `none` - Labeling: None. The drop zone has no role, no name and no description, and adds none to its content. The overlay — scrim, panel, glyph and message — is drawn for the person who drags and is kept from assistive technology; the result of a drop is said through the zone's one polite live region (DRZ-11). - Minimum target size: yes | Keys | Action | | --- | --- | | Tab / Shift+Tab | Moves through the content's own stops in their own order. The drop zone is not a stop and answers no key. | - A drop zone is never the only way to add a file (WCAG 2.1.1 Keyboard, 2.5.7 Dragging Movements): the screen it wraps also has a File picker or a File upload whose Button opens the platform's picker — in a toolbar, an app bar or an empty state — and the documentation always shows one beside the zone. A debug build reports a page that has none (DRZ-13). - The zone adds nothing a person operates. Unlike the File picker's drop area, it is not pressed to open the picker and takes no focus: the content under it — buttons, a table, fields — keeps every press, key and scroll (DRZ-2), so wrapping a screen in a zone changes nothing for a keyboard or a screen reader. - What is dragged over the zone is the pointer user's own act and is not announced. The overlay is told without color too: taking by its edge and its message, refusing by the block glyph and its own message, and under forced colors by a thicker edge in the highlight color (DRZ-5, DRZ-17). - The result of a drop is a status message (WCAG 4.1.3): one polite live region says how many files were handed over and how many were refused, in the product's words. Where the files go on to a component that says them itself — a File upload that keeps its own rows — the product sets silent, so that a drop is said once. - A refused file must be said where a person sees it too (WCAG 3.3.1): the zone's live region says that files were refused, and the product, on reject, shows which and why — a snackbar, a failed row of its list, a Field's errorText. - The overlay never takes a press or a scroll and disappears when the drag leaves, ends or drops, so it needs no dismissal, holds no focus and traps nothing (WCAG 2.1.2). ### Behaviour Requirements in EARS form, each with its stable id. - **DRZ-1** THE drop zone SHALL be a box of the size its layout gives it and SHALL lay out what the product places in it as the product's own styles say, as if the zone were not there. WHILE no drag of files is over it THE drop zone SHALL draw nothing of its own — no fill, no edge, no padding, no glyph, no text. THE drop zone SHALL add to what it holds no hovered, pressed, focused or selected state, no stop in the focus order, no role and no name, and SHALL change no role, name, state or focus order of its content. - **DRZ-2** WHILE a drag of files is over it and WHILE none is, THE drop zone SHALL leave every press, click, key, wheel, scroll, touch, text selection, drag of text or of an element, and focus inside it to its content and the platform. WHEN the zone is pressed THE drop zone SHALL do nothing — it opens no picker and moves no focus (unlike the File picker's drop area, FPK-12), because the zone is the content and every press in it is the content's. - **DRZ-3** THE drop zone SHALL answer a drag only WHERE the platform says the drag holds files (on the web, its types include Files). A drag of text, of a link, of a picture from a page or of an element SHALL be left wholly to the content and the platform: no overlay, no effect named, and nothing taken, so that a text field inside the zone still takes a drop of text. - **DRZ-4** WHILE a drag of files is over the zone, disabled is false and no drop target inside the zone has taken it (DRZ-8), THE drop zone SHALL draw the overlay over its whole box and tell the platform that letting go here copies. The overlay SHALL be the scrim, filled with comp.drop-zone.scrim.color over the whole box; an edge comp.drop-zone.outline.width wide in comp.drop-zone.outline.color, solid, drawn inside the box and following the corners the box has of its own; and a panel (DRZ-6) filled with comp.drop-zone.panel.container.color, lifted by comp.drop-zone.panel.elevation, with corners of comp.drop-zone.panel.shape eased by sys.shape.corner-smoothing, comp.drop-zone.panel.padding-block from its top and bottom and comp.drop-zone.panel.padding-inline from its sides, holding one column centred on the inline axis: the icon set's upload glyph at comp.drop-zone.icon.size in comp.drop-zone.icon.color, with sys.icon.family.unselected, sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, then comp.drop-zone.panel.gap below it dropText in comp.drop-zone.label.typescale and comp.drop-zone.label.color, centred, on as many lines as it needs and never cut. The panel SHALL be as wide as its message needs and no wider than comp.drop-zone.panel.max-width. - **DRZ-5** WHERE the platform tells before the drop that nothing dragged can be taken — every file is of a kind accept refuses, which can be known only where accept lists media types alone, or it holds more than one file while multiple is false, as the File picker's area judges it (FPK-13) — THE drop zone SHALL draw the overlay as refusing: the scrim and the panel as in DRZ-4, the edge in comp.drop-zone.refusing.outline.color, the icon set's block glyph in place of the upload glyph in comp.drop-zone.refusing.icon.color, and refusingText in place of dropText; and SHALL tell the platform that letting go here does nothing. Where the platform cannot tell (an extension, a size, a count that maxFiles limits), the zone SHALL draw it as taking and judge at the drop (DRZ-9). - **DRZ-6** THE drop zone SHALL draw the overlay inside its own box and above everything it holds: never outside the box, whatever the content's own stacking order; content that must stand above the overlay stands in the platform's top layer (a dialog, a popover, a menu). THE overlay SHALL take no press, pointer, wheel, touch or scroll: each SHALL reach the content or the scrolling area beneath it, as if the overlay were not there. THE drop zone SHALL draw the panel inside the part of its box that is in view — inside the window and inside every scrolling or clipping area around it — centred in that part and at least comp.drop-zone.panel.margin from its edges, so that a zone taller than the window (a whole page, the main region of an app shell) shows its message where the person is looking. WHERE the part in view is smaller than the panel, the panel SHALL be clipped at the zone's box and its glyph SHALL be kept before its message. - **DRZ-7** THE condition of DRZ-4 and DRZ-5 SHALL begin when a drag of files enters the zone's box and SHALL end when the drag leaves the box, is let go anywhere, is cancelled, or leaves the window — and SHALL NOT end, flicker or begin again when the drag crosses from one part of the content to another, onto the content's own children, or over content that appears, moves or is removed during the drag. - **DRZ-8** WHERE a drop target inside the zone takes the drag — another drop zone, a File picker's drop area, or a target of the product's own — the innermost target SHALL take it: while the drag is over that target THE drop zone SHALL draw no overlay, name no effect and take no drop, and SHALL take the drag again as soon as it leaves that target for the rest of the zone. A disabled drop zone inside it takes nothing, so the enclosing zone takes a drag over it. - **DRZ-9** WHEN files are let go over the zone WHILE disabled is false and no drop target inside the zone took them, THE drop zone SHALL end the condition at once, take the drop so that the platform does not open or navigate to a file, and judge what was dropped exactly as the File picker judges an arrival (FPK-9) — by multiple, accept, maxSize and maxFiles, a folder refused with the reason type, in the order the platform gave them — and SHALL then emit select once with the files that passed, where there are any, and reject once with the refused files and their reasons, where there are any, in that order. A drop over a refusing zone that the platform still delivers SHALL be judged the same way; a drop that holds no file SHALL emit nothing. THE drop zone SHALL NOT move focus because of a drop. - **DRZ-10** THE drop zone SHALL keep nothing and send nothing, as the File picker (FPK-7): it SHALL open no connection, SHALL NOT read a file's bytes, copy or store a file, SHALL NOT hold a file or any record of an earlier drop beyond the turn in which it hands one drop over, and SHALL take no part in a form — no name, no value, nothing submitted, reset or restored. What is known of a file SHALL be what the platform reports of it without opening it: its name, its size and its kind. - **DRZ-11** THE drop zone SHALL have exactly one live region, polite and never assertive, and WHEN a drop was judged WHILE silent is false SHALL say through it, once, as one message: droppedText with {count} filled by the number of files that passed, WHERE any passed; then refusedText with {count} filled by the number refused, WHERE any were refused. It SHALL NOT announce a drag over it, the overlay, or a drop that holds no file, and SHALL NOT move keyboard or screen-reader focus to announce. IF neither the instance nor the product's words give the sentence that is needed THE drop zone SHALL say nothing for it and in debug builds report the missing word once per page or screen. WHILE silent is true THE drop zone SHALL say nothing and need neither word. - **DRZ-12** THE drop zone SHALL have no words of its own: it SHALL take dropText, refusingText, droppedText and refusedText from the instance's prop and, WHILE that is empty, from the product's words of the keys dropZoneText, dropZoneRefusingText, filesDroppedText and filesRefusedText, and from nowhere else; and SHALL need a word only where the part that shows or says it is drawn or said. IF dropText or refusingText is not given where its panel is drawn THE drop zone SHALL draw the panel with its glyph alone and in debug builds report the missing word once per page or screen. THE drop zone SHALL build no sentence from accept, maxSize, maxFiles, a count of files or a size in bytes, other than filling {count}. - **DRZ-13** THE drop zone SHALL NOT be the only way to add the files it takes: dragging files is a movement that a keyboard, a switch, a screen reader, voice control and most touch screens cannot make (WCAG 2.1.1, 2.5.7). The product SHALL offer, on the same screen and while the zone takes drops, a File picker or a File upload — or a control of its own that opens the platform's picker — that adds the same files to the same place. WHEN a drag of files first enters a zone on a page or screen that holds no file picker of any kind, THE drop zone SHALL still take it and in debug builds report that files cannot be added without a pointer. - **DRZ-14** WHILE disabled is true THE drop zone SHALL draw no overlay, say nothing and emit neither select nor reject, and SHALL tell the platform that letting go here does nothing; WHERE no enabled drop zone encloses it, it SHALL still take a drop of files over its box, so that a file let go by mistake does not replace the page. THE drop zone SHALL NOT disable, dim or make inert its content: disabled concerns dropping alone. WHEN disabled becomes true during a drag THE drop zone SHALL end the condition at once. The way of DRZ-15 SHALL still answer: disabled stops the person, not the product. - **DRZ-15** THE drop zone SHALL offer the product, in the platform's idiom, a way to have files judged by its rule that did not arrive by a drop on it — files pasted, dropped elsewhere, or made by the product — as one arrival, answering with the files that passed and the refused files with their reasons, each in the order given, as the File picker's way does (FPK-31); it SHALL emit neither select nor reject for them, say nothing for them, and keep none of them. - **DRZ-16** WHEN the overlay appears THE drop zone SHALL fade it in, and WHEN it leaves SHALL fade it out, over comp.drop-zone.motion.duration with comp.drop-zone.motion.easing, and SHALL animate a change between taking and refusing over the same; where motion is reduced it SHALL show and hide the overlay at once. The fade SHALL NOT delay the end of the condition: a drop or a press made while the overlay fades out reaches what it would reach without it. - **DRZ-17** WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE drop zone SHALL draw the edge in the platform's highlight color, solid and twice comp.drop-zone.outline.width wide, so that it does not rest on the scrim the mode removes; the panel in the platform's background color with an edge comp.drop-zone.outline.width wide in its text color; the message in its text color; and the refusing overlay with its block glyph, so that refusing is told without color. - **DRZ-18** WHILE the text size is enlarged THE drop zone SHALL grow its panel with its message: the message wraps and is never cut, the glyph keeps its box, and the panel grows in height up to the part of the zone in view (DRZ-6). At 200 % in a width of 320 no word of the message SHALL be lost or lie over another part. - **DRZ-19** THE drop zone SHALL take its layout direction from where it is used and SHALL have no direction setting of its own. THE message SHALL be laid out as text of its own direction, isolated, taking the base direction of its first strong character, or the layout direction where it has none, and centred in the panel in either direction. WHERE the layout direction is right-to-left a glyph SHALL be mirrored exactly when the system's icon set marks its name as mirrored, by the icon helper; THE drop zone SHALL mirror no glyph itself. - **DRZ-20** WHEN a prop of the drop zone changes THE drop zone SHALL draw the new value at once, during a drag too, and SHALL announce nothing because of it; WHEN multiple, accept, maxSize or maxFiles changes it SHALL judge by the new value from the next drag and drop on. IF maxSize is not a number above zero THE drop zone SHALL set no limit of size; IF maxFiles is not a whole number of zero or more it SHALL set no limit of count; IF an entry of accept is neither an extension with its dot nor a media type it SHALL ignore that entry; in each case debug builds SHALL report it, as the File picker does (FPK-27). - **DRZ-21** WHILE the system's icon set cannot yet draw the overlay's glyph (its font is still loading) THE drop zone SHALL draw nothing in that glyph's place, never the glyph's name as text, SHALL keep the glyph's box, and SHALL draw the glyph once the set can. ### Tokens As written in the token documents (DTCG): an alias in braces names the token it takes its value from, which each design system resolves. On the web each token is a CSS custom property: `--tanrei` and the name after `tanrei`, joined by hyphens (`tanrei.comp.drop-zone.…` → `--tanrei-comp-drop-zone-…`). #### `tanrei.comp.drop-zone` | Token | Type | Value | | --- | --- | --- | | `comp.drop-zone.scrim.color` | `color` | `{tanrei.sys.color.scrim}` | | `comp.drop-zone.outline.width` | `dimension` | `{tanrei.sys.border.thick}` | | `comp.drop-zone.outline.color` | `color` | `{tanrei.sys.color.primary}` | | `comp.drop-zone.panel.container.color` | `color` | `{tanrei.sys.color.surface-container-high}` | | `comp.drop-zone.panel.elevation` | `shadow` | `{tanrei.sys.elevation.level2}` | | `comp.drop-zone.panel.shape` | `dimension` | `{tanrei.sys.shape.corner.large}` | | `comp.drop-zone.panel.padding-block` | `dimension` | `{tanrei.sys.space.space300}` | | `comp.drop-zone.panel.padding-inline` | `dimension` | `{tanrei.sys.space.space300}` | | `comp.drop-zone.panel.gap` | `dimension` | `{tanrei.sys.space.space150}` | | `comp.drop-zone.panel.max-width` | `dimension` | `360px` | | `comp.drop-zone.panel.margin` | `dimension` | `{tanrei.sys.space.space200}` | | `comp.drop-zone.icon.size` | `dimension` | `{tanrei.sys.icon.large}` | | `comp.drop-zone.icon.color` | `color` | `{tanrei.sys.color.primary}` | | `comp.drop-zone.label.typescale` | `typography` | `{tanrei.sys.typescale.body-large}` | | `comp.drop-zone.label.color` | `color` | `{tanrei.sys.color.on-surface}` | | `comp.drop-zone.refusing.outline.color` | `color` | `{tanrei.sys.color.error}` | | `comp.drop-zone.refusing.icon.color` | `color` | `{tanrei.sys.color.error}` | | `comp.drop-zone.motion.duration` | `duration` | `{tanrei.sys.motion.role.state.large}` | | `comp.drop-zone.motion.easing` | `cubicBezier` | `{tanrei.sys.motion.easing.state}` | ## Pautas ### Dónde ponerla | Envuelve | Cuándo | | --- | --- | | La región principal de tu aplicación | La tarea principal de la pantalla es conservar archivos: una biblioteca, una unidad de almacenamiento, una lista de documentos. Los archivos se pueden soltar en cualquier punto donde la persona esté trabajando. | | Un solo panel o una sola lista | Solo una parte de la pantalla recibe archivos: los adjuntos de un registro, una conversación. | | En su lugar, la zona para soltar de un [selector de archivos](https://tanrei.chnotchy.com/es/components/file-picker/) | El lugar donde soltar es una zona delimitada de un formulario, que además se pulsa para abrir el selector. | Una zona dentro de otra recibe ella misma lo que se suelta mientras el arrastre está sobre ella, y lo mismo hace la zona para soltar de un selector de archivos que está dentro de una zona. Siempre gana el lugar más interior. ### La superposición La superposición aparece solo mientras se arrastran archivos sobre la zona, y solo para archivos: el texto y los enlaces arrastrados se dejan al contenido, de modo que un campo de texto dentro de la zona los sigue recibiendo. Desaparece cuando el arrastre sale de la zona, se suelta o se cancela. Nunca recibe una pulsación ni un desplazamiento, así que nunca hace falta cerrarla. - El panel queda en el centro de la parte de la zona que está a la vista. Una zona más alta que la ventana sigue mostrando su mensaje donde la persona está mirando. - La superposición se queda dentro de la caja de la zona y por encima de todo lo que contiene. El contenido que debe quedar por encima de ella —un diálogo, un menú, un popover— está en la capa superior de la plataforma, como lo están las superposiciones de Tanrei. - Donde el navegador puede saber antes de soltar que nada de lo arrastrado se puede recibir —varios archivos donde se pide uno, o solo tipos que una lista de tipos de medio deja fuera—, la superposición lo rechaza: un glifo de bloqueo, un borde con el color de error y `refusingText`. Un navegador dice los tipos y un recuento, nunca nombres ni tamaños, así que un archivo demasiado grande, o con una extensión rechazada, se rechaza al soltarlo. ### Límites y mensajes `accept`, `maxSize`, `maxFiles` y `multiple` funcionan exactamente igual que en el selector de archivos. Di los límites con palabras junto al selector de archivos o al control de subida de archivos de la misma pantalla: es ahí donde una persona los lee. | Propiedad | Qué dice | Se lee de tus textos cuando está vacía | | --- | --- | --- | | `dropText` | El mensaje de la superposición: «Suelta archivos para subirlos». | `dropZoneText` | | `refusingText` | El mensaje mientras la zona rechaza lo que se arrastra. | `dropZoneRefusingText` | | `droppedText` | Lo que oye la tecnología de apoyo después de soltar, con `{count}`: «Se añadieron {count} archivos». | `filesDroppedText` | | `refusedText` | Lo que oye cuando se rechazaron archivos, con `{count}`. | `filesRefusedText` | Define estos textos una sola vez para todo el producto con `setWords()`. Tanrei no incluye textos propios. Si los archivos soltados van a un control de subida de archivos que tiene sus propias filas, define `silent`: el control de subida ya dice cada archivo que conservó o rechazó, y una acción de soltar debe decirse una sola vez. ### Deshabilitada `disabled` impide soltar y nada más: ni superposición ni evento, mientras el contenido sigue tan utilizable como antes. Una zona deshabilitada sin ninguna zona habilitada a su alrededor sigue impidiendo que el navegador abra un archivo que se suelte en ella por error. ### Recomendado - Ofrece siempre un selector de archivos o un control de subida de archivos en la misma pantalla. - Pasa lo que te da `select` al lugar que muestra los archivos, de inmediato. - Di cada rechazo donde la persona está mirando: un snackbar, una fila de tu lista. ### Evita - No hagas de la zona de soltar archivos la única forma de añadir archivos. - No pongas una zona de soltar archivos alrededor de un solo control pequeño. Usa la zona para soltar del selector de archivos. - No esperes que un formulario envíe lo que se soltó. La zona no conserva nada y no participa en ningún formulario. ## Accesibilidad ### De qué se encarga el componente - La zona no añade nada al contenido: ni rol, ni nombre, ni parada en el orden del foco, ni tecla. Quien usa el teclado o un lector de pantalla encuentra el contenido exactamente igual que sin ella. - La superposición se dibuja para la persona que arrastra y está oculta para la tecnología de apoyo. - Después de soltar, una única región activa dice de forma cortés cuántos archivos se aceptaron y cuántos se rechazaron, con tus palabras. - La superposición se distingue también sin color: el rechazo tiene su propio glifo y su propio mensaje, y en colores forzados el borde se dibuja más grueso con el color de resaltado. - Con el texto al 200%, el mensaje salta de línea y nunca se corta. Cómo está construido en la web: el contenido se queda en tu DOM, en el slot predeterminado. El host es `position: relative` y un contexto de apilamiento propio, así que no le pongas `position: static`. `select` y `reject` se propagan hacia arriba con los mismos detalles que en el selector de archivos. ### Qué debes hacer tú - Ofrece un [selector de archivos](https://tanrei.chnotchy.com/es/components/file-picker/) o un [control de subida de archivos](https://tanrei.chnotchy.com/es/components/file-upload/) en la misma pantalla, para todas las personas que no pueden arrastrar. - Da `droppedText` y `refusedText`, o define `silent` donde un control de subida de archivos dice los archivos. - Di cada rechazo con palabras que una persona pueda ver.