फ़ाइल पिकर

अवलोकन

link

Web

tanrei-file-picker

schedule

SwiftUI

TanreiFilePicker

radio_button_unchecked

Jetpack Compose

TanreiFilePicker

radio_button_unchecked

Flutter

TanreiFilePicker

radio_button_unchecked

React Native

FilePicker

radio_button_unchecked

इससे जनरेट किया गया: docs/status/status.json, specs/file-picker.spec.json

दोनों लेआउट में एक-एक फ़ाइल पिकर। यहाँ फ़ाइल चुनने से कुछ नहीं बदलता: पेज कोई फ़ाइल नहीं रखता।

फ़ाइल चुनेंफ़ोटो चुनेंimage

फ़ाइल पिकर फ़ाइलें चुनने का तरीक़ा है, और कुछ नहीं। आपका अपना बटन प्लैटफ़ॉर्म का फ़ाइल पिकर खोलता है। उसके चारों ओर एक ड्रॉप एरिया हो सकता है, जो उस पर ड्रैग करके छोड़ी गई फ़ाइलें भी लेता है। सीमाएँ उसके पास आपके शब्दों में लिखी रहती हैं। जो चुना गया, वह सीमाओं के हिसाब से परखा जाता है और आपको सौंपा जाता है: स्वीकार की गई फ़ाइलें select के साथ, और अस्वीकार की गई फ़ाइलें reject के साथ।

यह एक ऐडवांस्ड कंपोनेंट है: सिर्फ़ कंट्रोल, उस प्रॉडक्ट के लिए जो फ़ाइलें ख़ुद रखता है। वह कोई फ़ाइल नहीं रखता, कोई लिस्ट नहीं बनाता और फ़ॉर्म के साथ कुछ सबमिट नहीं करता। ज़्यादातर प्रॉडक्ट को फ़ाइल अपलोड चाहिए, जो यही पिकर है और उसके नीचे फ़ाइल आइटम की लिस्ट, फ़ॉर्म में इस्तेमाल के लिए तैयार।

कहाँ इस्तेमाल होता है: फ़ाइल अपलोड में। इसे फ़ाइल अपलोड के बिना, अकेले तब इस्तेमाल करें जब फ़ाइलें ऐसी जगह जाती हैं जो फ़ाइल अपलोड की लिस्ट नहीं है:

• एक फ़ाइल तुरंत पढ़ी जाती है और रखी नहीं जाती: सेटिंग की फ़ाइल, पंक्तियों वाली स्प्रेडशीट या क्रॉप की जाने वाली तस्वीर इंपोर्ट करना।
• फ़ाइलें कहीं और दिखाई जाती हैं: लिखे जा रहे संदेश के भीतर अटैचमेंट के रूप में, किसी कैनवस पर, आपकी अपनी किसी टेबल में।
• टूलबार में अटैच करने का बटन, जिसके साथ न एरिया है, न टेक्स्ट।

पूरी स्क्रीन पर कहीं भी ड्रॉप की गई फ़ाइलें लेने के लिए स्क्रीन को ड्रॉप ज़ोन से घेरें, और उस स्क्रीन पर एक फ़ाइल पिकर रखें, ताकि बिना ड्रैग किए भी फ़ाइलें चुनी जा सकें।

यह कुछ नहीं रखता

select के बाद फ़ाइल पिकर फ़ाइलों को भूल चुका होता है। दूसरा चुनाव ऐसे परखा जाता है जैसे वह पहला हो। अगर आपका प्रॉडक्ट वह नहीं रखता जो select उसे देता है, तो उसे कोई नहीं रखता।

वेब पर यह <tanrei-file-picker> है। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।

इस्तेमाल

link

trigger स्लॉट में एक बटन रखें और select को सुनें।

<tanrei-field label="लेयर फ़ाइल" supporting-text="यह लेयर उस लेयर की जगह लेगी जिसे आप संपादित कर रहे हैं।">
  <tanrei-file-picker id="layer" accept=".json" constraints-text="एक JSON फ़ाइल"
                      selection-text="कोई फ़ाइल नहीं चुनी गई">
    <tanrei-button slot="trigger" variant="outlined">फ़ाइल चुनें</tanrei-button>
  </tanrei-file-picker>
</tanrei-field>

<script type="module">
  import '@tanrei/web/components/field';
  import '@tanrei/web/components/file-picker';
  import '@tanrei/web/components/button';

  const picker = document.querySelector('#layer');
  picker.addEventListener('select', async ({ detail }) => {
    const [file] = detail.files;
    // पिकर कुछ नहीं रखता। क्या चुना गया है, यह ख़ुद बताएँ, और फ़ाइल के साथ वह करें जो आपको करना है।
    picker.selectionText = file.name;
    importLayer(JSON.parse(await file.text()));
  });
  // अस्वीकार की गई फ़ाइल का कारण एक नाम है, वाक्य नहीं। उसे अपने शब्दों में कहें।
  picker.addEventListener('reject', ({ detail }) => {
    const field = picker.closest('tanrei-field');
    field.errorText = detail.files[0].reason === 'type' ? 'कोई JSON फ़ाइल चुनें।' : 'सिर्फ़ एक फ़ाइल चुनें।';
    field.error = true;
  });
</script>

// उन्नत कंपोनेंट, जिससे दूसरे कंपोनेंट बनते हैं, advanced एंट्री से इम्पोर्ट होता है।
import { Button, Field } from '@tanrei/react';
import { FilePicker } from '@tanrei/react/advanced';

<Field label="लेयर फ़ाइल" error={!!problem} errorText={problem}>
  <FilePicker accept={['.json']} constraintsText="एक JSON फ़ाइल"
    selectionText={chosen?.name ?? 'कोई फ़ाइल नहीं चुनी गई'}
    onSelect={(event) => importLayer(event.detail.files[0])}
    onReject={(event) => explain(event.detail.files)}>
    <Button slot="trigger" variant="outlined">फ़ाइल चुनें</Button>
  </FilePicker>
</Field>

जो फ़ाइलें आपके प्रॉडक्ट तक किसी और रास्ते से पहुँचती हैं, जैसे पेस्ट की गई या पेज के किसी दूसरे हिस्से पर ड्रॉप की गई, उन्हें judge() उसी नियम से परखता है। वह जवाब देता है और कुछ एमिट नहीं करता:

const { accepted, refused } = picker.judge(event.clipboardData.files);

React में judge() ref पर होता है: ref.current.judge(files)।

स्पेक

link

अकेला ट्रिगर; चुनी गई फ़ाइल और सीमाओं के साथ; त्रुटि की अवस्था में ड्रॉप एरिया; अक्षम

फ़ाइल अटैच करेंफ़ाइल चुनेंफ़ाइलें चुनेंफ़ाइलें चुनें

संरचना

भाग	विवरण
1 group	The whole component: the trigger with its texts, or the drop area. Exposed as a named group while it has a name; it draws nothing of its own.
2 trigger	The product's own Button in the trigger slot. Activating it opens the platform's own file picker. It is the one way to choose by keyboard, by touch and with assistive technology, in both layouts.
3 container · वैकल्पिक	The drop area, in the drop-area layout: a bounded place around the glyph, the prompt, the trigger and the line of limits, which takes files dragged onto it and opens the picker when pressed. It carries the state answer.
4 outline · वैकल्पिक	The drop area's edge, dashed or solid as the system says.
5 icon · वैकल्पिक	The glyph at the top of the drop area: the icon set's upload glyph, or the one in the icon slot. Decorative.
6 label · वैकल्पिक	The drop area's prompt (dropText): the words that say files can be dragged here.
7 supporting-text · वैकल्पिक	The line that states the limits in words (constraintsText): which kinds of file, how large, how many. In the area, or below the trigger.
8 selection-text · वैकल्पिक	In the button layout, the text beside the trigger that says what is chosen now (selectionText). Whoever holds the files writes it.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
layout	button | drop-area	"button"	How choosing is offered. button: the trigger alone, with the line of limits below it; for a form among other fields, a narrow place, a phone, a toolbar. drop-area: a bounded place around the trigger that also takes files dragged onto it and opens the picker when pressed; for a screen whose main task is to hand over files, where a pointer is likely. Both open the same picker from the same trigger.
multiple	boolean	false	Whether more than one file can be chosen at a time. False: the picker offers one file, and a drop of several is refused whole. True: the picker offers several. The file picker keeps nothing, so whether a second choice adds to the first or takes its place is decided by whoever keeps the files.
accept	strings		The kinds of file that are taken: file name extensions with their dot (".pdf") and media types, a whole family as "image/*". The picker is asked to offer these, and a file of another kind — dropped, or chosen in a picker that did not filter — is refused (reject, reason type). Empty takes every kind. It enforces the limit; constraintsText says it.
maxSize	number	null	The largest size of one file, in bytes. A larger file is refused (reject, reason size). Null sets no limit. It is judged from the size the platform reports; the file is not read.
maxFiles	number	null	The most files one choice or one drop may bring, while multiple is true. Files beyond it are refused (reject, reason count). Null sets no limit; ignored while multiple is false. The file picker counts nothing across choices: a product that keeps a list sets this to the room that is left — zero once the list is full, which refuses every file — or judges the room itself.
label	string	""	The accessible name of the file picker as a group ("Photo"). It is not drawn. Leave it empty inside a Field, whose label names the group and is drawn, and inside a component that names the whole; left empty elsewhere, no group is exposed and the trigger stands as the button it is.
constraintsText	string	""	The limits, in the product's words, shown before the choice ("PDF or PNG, up to 10 MB each, 5 files at most"). Drawn in the area, or below the trigger, and given to assistive technology as the trigger's description. Tanrei builds no such sentence from accept, maxSize and maxFiles: it has no words.
dropText	string	""	The drop area's prompt, in the product's words ("Drag files here, or choose them"). Drawn above the trigger in the drop-area layout; ignored in the button layout.
selectionText	string	""	What stands beside the trigger in the button layout: what is chosen now, in the product's words or the file's own name ("No file chosen", "brief.pdf", "3 files"). Read with the trigger, as part of its description. The file picker keeps nothing and so never writes or changes it: whoever holds what was chosen says it, and leaves it empty where a list below already does. Ignored in the drop-area layout.
disabled	boolean	false	Nothing can be chosen or dropped: the trigger is disabled and the area answers nothing. Inside a Field, disable the Field.
error	boolean	false	Puts the file picker in the error condition: the drop area's edge is drawn in the error role and the trigger is exposed as invalid. A Field sets it with its own error; the words are the Field's errorText. The file picker never sets it itself.
required	boolean	false	Exposes the trigger as required, where the platform's button has such a state. A Field that is required sets it. It draws nothing — the mark beside the label is the Field's — and it validates nothing: the file picker has no value that could be missing.

स्लॉट

स्लॉट	विवरण
trigger	The product's own Button that opens the picker, with the product's own label ("Choose files"), variant and size. Exactly one. The file picker gives it the behaviour and never restyles it.
icon	A glyph in place of the upload glyph at the top of the drop area (a picture for a photo, a table for a spreadsheet). Decorative; ignored in the button layout.

इवेंट

इवेंट	विवरण
select	Files were chosen in the picker or dropped on the area, and passed accept, maxSize and the count of one choice. Emitted once per choice, with those files as the platform's own handles, in the order the platform gave them. The file picker keeps none of them and reads none: the product, or the component that holds the file picker, does with them what it means to.
reject	Files of one choice or 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 choice). The reasons are names for the product's code, not words: the product says what happened, in its own words and in a place of its own — a Field's errorText, a row of its list, a message it has announced. The file picker draws and says nothing for a refusal.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
FPK-1	THE file picker SHALL lay out one part, from its start edge: the trigger with its texts WHILE layout is button (FPK-2), the drop area WHILE layout is drop-area (FPK-3). It SHALL be as wide as its layout gives it and as tall as its parts, SHALL draw no container, fill or edge around the whole, SHALL draw no list and no row for what was chosen, and SHALL draw no label, no help, no error text and no requirement mark of its own: those are the Field's (FPK-21).
FPK-2	WHILE layout is button THE file picker SHALL draw the trigger at its start edge at the size the product gave it and, WHILE selectionText is not empty, selectionText after it on the trigger's line, comp.file-picker.trigger.gap from it and centred on it, in comp.file-picker.selection-text.typescale and comp.file-picker.standard.selection-text.color, wrapping below the trigger where the line is too short; and WHILE constraintsText is not empty SHALL draw it comp.file-picker.supporting-text.gap below that line, from the start edge, in comp.file-picker.supporting-text.typescale and comp.file-picker.standard.supporting-text.color, on as many lines as it needs and never cut. WHILE layout is button THE file picker SHALL draw no area, edge or glyph, SHALL ignore dropText and the icon slot, and SHALL take no drop (FPK-13). THE file picker SHALL NOT write selectionText itself and SHALL NOT change it because of a choice: it keeps nothing (FPK-7), so what is chosen now is said by whoever holds it.
FPK-3	WHILE layout is drop-area THE file picker SHALL draw the drop area across its whole width: a container with corners of comp.file-picker.container.shape, filled with comp.file-picker.standard.container.color, with an edge comp.file-picker.outline.width wide in comp.file-picker.standard.outline.color drawn inside its size, and inside it — comp.file-picker.container.padding-block from its top and bottom and comp.file-picker.container.padding-inline from its sides — one column, each part centred on the inline axis and comp.file-picker.container.gap from the next: the glyph (FPK-4), dropText WHILE it is not empty in comp.file-picker.label.typescale and comp.file-picker.standard.label.color, the trigger at the size the product gave it, and constraintsText WHILE it is not empty in comp.file-picker.supporting-text.typescale and comp.file-picker.standard.supporting-text.color. Each text SHALL be centred, wrap onto as many lines as it needs and never be cut. The area SHALL be as tall as its parts and paddings and have no height of its own. WHILE layout is drop-area THE file picker SHALL NOT draw selectionText: what was dropped on a place is shown below it, by whoever holds it.
FPK-4	THE file picker SHALL draw the drop area's edge as comp.file-picker.outline.style names: dashed, as dashes comp.file-picker.outline.dash-length long with gaps of the same length, following the corners; solid, as one unbroken line. It SHALL draw at the top of the area the icon set's upload glyph, or the glyph in the icon slot WHILE that slot holds one, at comp.file-picker.icon.size in comp.file-picker.standard.icon.color, with sys.icon.family.unselected and sys.icon.fill.unselected, sys.icon.weight and an optical size clamped between sys.icon.optical-size.min and sys.icon.optical-size.max, and SHALL keep it from assistive technology. A platform that cannot draw a dashed edge along eased corners SHALL draw it solid and state that in its README.
FPK-5	THE file picker SHALL take as its trigger the one element in the trigger slot — a Button of the product's, with the product's label, variant and size — and SHALL leave it what it is: drawn from the Button's own tokens, answering hover, focus and press itself, named by its own label. WHEN the trigger is activated, by any input the Button takes, THE file picker SHALL open the platform's own file picker (FPK-6). IF the trigger slot is empty THE file picker SHALL still render and still take drops and presses on its area, and in debug builds SHALL report that files cannot be chosen by keyboard, by touch or with assistive technology, which is a functional failure; IF it holds more than one element THE file picker SHALL use the first and report the others.
FPK-6	WHEN the picker is asked for THE file picker SHALL open the platform's own file picker — never a list of files it draws itself — asking it for one file WHILE multiple is false and for any number WHILE multiple is true, and to offer the kinds accept lists WHILE accept is not empty. WHEN the person chooses, THE file picker SHALL judge what was chosen (FPK-9) and leave focus on the trigger; WHEN the person leaves the picker without choosing THE file picker SHALL emit nothing, change nothing and leave focus on the trigger. WHILE a picker it opened is still open THE file picker SHALL NOT open a second.
FPK-7	THE file picker SHALL keep nothing and send nothing: it SHALL open no connection and send no file or part of one to anyone, SHALL NOT read a file's bytes — not to check its kind, not to measure it, not to draw a picture of it — SHALL NOT copy or store a file, and SHALL NOT hold a file, or any record of an earlier choice, beyond the turn in which it hands the files of one choice over (FPK-9): a second choice SHALL be judged as if it were the first. What is known of a file SHALL be what the platform reports of it without opening it: its name, its size and its kind. THE file picker SHALL take no part in a form: it has no name and no value, submits nothing, reports no missing value, and has nothing to reset or to restore. The files of a form are submitted by the component that keeps them, or sent by the product.
FPK-8	WHEN the drop area of the file picker is pressed by pointer or touch THE file picker SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner. The area answers no key (FPK-12): Enter and Space press the trigger, which answers as a Button does (BTN-8).
FPK-9	WHEN files arrive — chosen in the picker or dropped on the area — THE file picker SHALL judge them in the order the platform gave them, by what the platform reports without opening them, and keep none: WHILE multiple is false and more than one arrived, it SHALL refuse them all with the reason count, choosing none for the person; otherwise it SHALL refuse with the reason type a file whose kind matches no entry of a non-empty accept — an extension compared with the end of its name without regard to case, a media type with the kind the platform reports, a family such as image/* with every kind of that family — and anything that is a folder; SHALL refuse with the reason size a file larger than maxSize WHILE maxSize is a number; and, WHILE multiple is true and maxFiles is a number, SHALL refuse with the reason count each remaining file beyond the first maxFiles of them. It 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. THE file picker SHALL judge each arrival by itself: it knows of no earlier choice, so the room that is left in a list is judged by whoever keeps the list. THE file picker SHALL draw no row and no error and say no word because of a choice.
FPK-10	WHILE the drop area is pressed THE file picker SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact; dim applies the pressed opacity to the whole area and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; outline, glyph, texts, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.file-picker.motion.feedback-duration with comp.file-picker.motion.state-easing, fades over comp.file-picker.motion.state-duration with comp.file-picker.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
FPK-11	THE file picker SHALL ease the corners of its drop area by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README. THE file picker SHALL draw no focus indicator of its own: keyboard focus is on the trigger, which shows it as sys.behavior.focus-style names, as every Button does (BTN-10).
FPK-12	WHEN the person presses the drop area outside the trigger, by pointer or touch, WHILE disabled is false THE file picker SHALL do what activating the trigger does (FPK-6) and move focus to the trigger, so that the whole area is one large target for the one action. The area SHALL NOT be a stop in the focus order, SHALL have no role and no name of its own, and SHALL answer no key: Enter and Space are the trigger's. A press that begins on the trigger SHALL be the trigger's alone and open the picker once.
FPK-13	WHILE something is dragged over the drop area and disabled is false THE file picker SHALL draw the area as receiving — filled with comp.file-picker.receiving.container.color, its edge in comp.file-picker.receiving.outline.color, its glyph, its prompt and its line of limits in comp.file-picker.receiving.content.color — and tell the platform that letting go here copies; or, WHERE the platform tells before the drop that nothing dragged can be taken — it holds no file, every file is of a kind accept refuses, or it holds more than one file while multiple is false — as refusing: the fill and the texts as at rest, the edge in comp.file-picker.refusing.outline.color, and the icon set's block glyph in the glyph's place in comp.file-picker.refusing.icon.color, telling the platform that letting go here does nothing. The condition SHALL begin when the drag enters the area's bounds and end when it leaves them or ends, not when it crosses a part inside the area; the trigger and the texts SHALL NOT answer the drag themselves; and a drag elsewhere on the page or the screen SHALL change nothing: the file picker watches no more than its own area. WHILE layout is button THE file picker SHALL take no drop and SHALL leave a drag over it to the platform and the product.
FPK-14	WHEN files are let go over the drop area WHILE disabled is false THE file picker SHALL end the condition of FPK-13 at once, take the drop so that the platform does not open or navigate to the file, and judge what was dropped exactly as a choice in the picker (FPK-9): a drop over a refusing area SHALL emit reject with what it holds and no select, and a drop that holds no file SHALL emit nothing. It SHALL NOT move focus because of a drop. WHILE disabled is true THE file picker SHALL draw neither condition, tell the platform that letting go here does nothing, and still take a drop over its area so that a file let go by mistake does not replace the page.
FPK-15	WHILE the pointer is over the drop area, or the area is pressed (FPK-12), THE file picker SHALL render the area's container, edge, glyph, prompt, line of limits and opacity from the component tokens of the highest-precedence active state, with precedence pressed over hovered, and the pointer over the trigger counts as over the area. THE drop area SHALL have no focused state: keyboard focus is on the trigger, which shows its own indicator. Among conditions, disabled SHALL win over refusing and receiving, which win over hovered and pressed; the error condition (FPK-16) SHALL change the edge alone and combine with every state.
FPK-16	WHILE error is true THE file picker SHALL draw the drop area's edge in comp.file-picker.standard.error.outline.color, in every state, and every other part as without the error; SHALL expose the trigger as invalid; and WHILE layout is button SHALL draw nothing for it, because the error is said by the words of the Field around it. THE file picker SHALL never set error itself: not for a refused file and not for a picker that was left without a choice. WHILE something is dragged over the area the conditions of FPK-13 SHALL be drawn in the error edge's place.
FPK-17	WHILE label is not empty, or a Field names it (FPK-21), THE file picker SHALL expose itself to assistive technology as a group of that name holding the trigger; WHILE neither gives a name THE file picker SHALL expose no group and no role of its own, and SHALL report nothing: its trigger is a button with a name of its own, and a component that holds the file picker names the whole itself. It SHALL give the trigger, after any description the trigger has of its own, a description made of constraintsText, then selectionText WHILE it is drawn (FPK-2), then what a Field or the component that holds it gives (FPK-21), and SHALL expose the trigger as required WHILE required is true and as invalid WHILE error is true. It SHALL NOT expose the drop area, its glyph or dropText as controls: dropText is read as the text it is, before the trigger. THE file picker SHALL have no live region and SHALL announce nothing: a choice is said by whoever keeps it.
FPK-18	THE file picker SHALL have no words of its own: it SHALL take every word it draws or says — the trigger's label, label, constraintsText, dropText and selectionText — from the product alone, by the trigger and the props of the instance, and SHALL read none of them from the product's words by a key, because none is said the same way wherever a file picker stands. IF dropText or selectionText is not given THE file picker SHALL draw nothing in its place. IF accept is not empty, or maxSize or maxFiles is a number, WHILE constraintsText is empty THE file picker SHALL still render and in debug builds report that a limit is enforced and not said. THE file picker SHALL build no sentence from accept, maxSize, maxFiles, a count of files or a size in bytes.
FPK-19	WHILE disabled is true THE file picker SHALL disable its trigger as that Button's own disabled does and give it back as it was WHEN disabled becomes false, never enabling a trigger the product disabled itself; SHALL render the drop area's container, edge, glyph, prompt and line of limits, and selectionText, from their disabled tokens; SHALL NOT answer a press on the area (FPK-12) or a drag over it (FPK-14); and SHALL emit neither select nor reject. The way of FPK-31 SHALL still answer: disabled stops the person, not the product.
FPK-20	WHEN the colors of the drop area change between states or conditions THE file picker SHALL animate the change over comp.file-picker.motion.state-duration with comp.file-picker.motion.state-easing, and SHALL change them at once where motion is reduced. WHEN selectionText appears, changes or leaves THE file picker SHALL draw that at once, without a motion of its own.
FPK-21	WHILE the file picker is the control of a Field THE file picker SHALL take from it what a Field gives its control (FLD-8, FLD-10, FLD-11, FLD-14): the Field's label as its group's name WHILE its own label is empty; the Field's supporting text with, in error, the error text after it and optional text as the last part of the trigger's description; the invalid state as its own error condition (FPK-16); the required state as required; and the disabled state as disabled. WHEN the label of the Field is pressed THE file picker SHALL move focus to its trigger and open nothing. WHILE another component holds the file picker as its member THE file picker SHALL take the same from that component by the same exchange — a name or none, a description, and the three states, each as a value — so that it is tied inside a component exactly as it is tied by hand.
FPK-22	WHILE the text size is enlarged THE file picker SHALL grow with its texts: the prompt, the line of limits and selectionText wrap and are never cut; the glyph keeps its box; the area grows in height; and the trigger grows as the Button says. At 200 % in a width of 320 no text SHALL be lost or lie over another part, and nothing SHALL need scrolling in two directions.
FPK-23	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 file picker SHALL draw the drop area's edge and its texts in the platform's text color and no fill; SHALL draw the receiving area with an edge twice comp.file-picker.outline.width wide, solid, in the platform's highlight color, and the refusing area with its block glyph, so that neither rests on a fill the mode removes; and SHALL draw disabled parts in the platform's disabled text color.
FPK-24	WHERE the layout direction is right-to-left THE file picker SHALL mirror its layout: the trigger at the right, selectionText after it toward the left, and the line of limits from the right edge. The drop area's column stays centred. A ripple SHALL still grow from the point of contact.
FPK-25	THE file picker SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the file picker is shown THE file picker SHALL draw itself for the new direction at once, without a motion of its own, keeping its focus.
FPK-26	THE file picker SHALL lay out each text it draws — the prompt, the line of limits and selectionText — as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a file's name given as selectionText keeps its order, its dot and its extension in a right-to-left layout. 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 or the product forces it, by the icon helper and inside its own box; THE file picker SHALL mirror no glyph itself.
FPK-27	WHEN layout names a value the file picker does not know THE file picker SHALL behave as button; IF maxSize is not a number above zero THE file picker SHALL set no limit of size; IF maxFiles is not a whole number of zero or more THE file picker SHALL set no limit of count; IF an entry of accept is neither an extension with its dot nor a media type THE file picker SHALL ignore that entry; and in each case debug builds SHALL report it. WHILE maxFiles is zero and multiple is true THE file picker SHALL refuse every file that arrives with the reason count and report nothing: zero is the room a full list has left, and to read it as no limit would open the list when it is full.
FPK-28	WHEN a prop of the file picker changes while it is shown THE file picker SHALL draw and expose the new value at once, keeping its focus, and SHALL announce nothing. WHEN accept, maxSize, maxFiles or multiple changes THE file picker SHALL judge by the new value from the next arrival on. WHEN layout changes while something is dragged over the area THE file picker SHALL end the condition.
FPK-29	WHILE the system's icon set cannot yet draw a glyph of the file picker (its font is still loading) THE file picker 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.
FPK-30	IF the trigger slot holds an element that is not a Button THE file picker SHALL still open the picker when that element is activated by a press or a click, and in debug builds report it; IF the file picker holds a child that is neither its trigger nor its glyph THE file picker SHALL NOT draw it and in debug builds report it. A platform that cannot inspect its content SHALL state the rule in its README and docs page.
FPK-31	THE file picker SHALL offer the product, and a component that holds it, a way in the platform's idiom to have files judged that came neither through its picker nor onto its area — files pasted, dropped on another part of the product's screen, or made by the product: it SHALL judge them as one arrival by the rule of FPK-9 and answer with the files that passed and with the refused files and their reasons, each in the order given; SHALL emit neither select nor reject for them, as a control's events tell what a person did; and SHALL keep none of them (FPK-7).
FPK-32	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE file picker SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on its group (FPK-17), which it SHALL be WHILE it has a name: its label or its Field's, or one given so — an id reference by the elements it names in the host's tree or a tree around it, a description after its own. WHILE label, or the Field's label, is not empty it is the group's name, over a name given so. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE file picker SHALL take it off that element.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-file-picker	TanreiFilePicker	TanreiFilePicker	TanreiFilePicker	FilePicker
layout · प्रॉपर्टी	layout	layout	layout	layout	layout
multiple · प्रॉपर्टी	multiple	allowsMultipleSelection	multiple	multiple	multiple
accept · प्रॉपर्टी	accept	allowedContentTypes	mimeTypes	accept	accept
maxSize · प्रॉपर्टी	maxSize	maxSize	maxSize	maxSize	maxSize
maxFiles · प्रॉपर्टी	maxFiles	maxFiles	maxFiles	maxFiles	maxFiles
label · प्रॉपर्टी	label	label	contentDescription	semanticLabel	accessibilityLabel
constraintsText · प्रॉपर्टी	constraintsText	constraintsText	constraintsText	constraintsText	constraintsText
dropText · प्रॉपर्टी	dropText	dropText	dropText	dropText	dropText
selectionText · प्रॉपर्टी	selectionText	selectionText	selectionText	selectionText	selectionText
disabled · प्रॉपर्टी	disabled	disabled	enabled	enabled	disabled
error · प्रॉपर्टी	error	isError	isError	isError	error
required · प्रॉपर्टी	required	isRequired	required	required	required
select · इवेंट	select	onSelect	onSelect	onSelect	onSelect
reject · इवेंट	reject	onReject	onReject	onReject	onReject
टिप्पणियाँ	The shadow-root form: a control whose parts and states are its own. <tanrei-file-picker accept=".json" constraints-text="…"><tanrei-button slot="trigger" variant="outlined">Choose a file</tanrei-button></tanrei-file-picker>. Attributes are kebab-case (max-size, max-files, constraints-text, drop-text, selection-text); accept is a comma-separated list, the form a native file input takes. The trigger and the glyph stay in the product's light DOM (the trigger and icon slots); the area and the texts are in the shadow root. The picker is a real <input type="file"> in the shadow root — hidden from sight, from the focus order and from assistive technology — carrying multiple and accept, whose click() the trigger's click and a press on the area call (both are user activations); its change and the area's drop feed FPK-9, and its value is cleared after each choice so that the same file can be chosen twice. The area listens for dragenter, dragover, dragleave and drop on itself only, counts enters and leaves so that a child does not end the condition, sets dropEffect to copy or none, and during a drag knows what the browser tells: kinds and a count (DataTransfer.items), never names or sizes, so a file that is too large is refused at the drop. select and reject are CustomEvents that bubble: detail.files is a File[], and reject's detail.files is { file, reason }[]. judge(files: Iterable<File>): { accepted: File[], refused: { file: File, reason: 'type' | 'size' | 'count' }[] } is FPK-31 and dispatches nothing. **Not form-associated**: no name, no value, no validity (FPK-7). It is a Field's control: it asks for the Field's connection as every Tanrei control does and takes the name, the description and the three states as values; a component that holds it gives the same values through the same connection. The description, aria-invalid and disabled are written on the slotted trigger's host — which a tanrei-button carries to its native button — and taken back when the trigger leaves the slot; the group's role and name are on an element of the shadow root, present only while there is a name (FPK-17). A button's role has no required state, so required is said only by a Field's required text in that description. Parts: container, icon, label, supporting-text, selection-text. Custom properties: --<namespace>-comp-file-picker-…. Without script, and until the element is defined, the trigger is a button that opens nothing. Class TanreiFilePicker. React: FilePicker, with onSelect, onReject, and a ref with judge().	TanreiFilePicker(layout: .dropArea, onSelect: { urls in … }) { TanreiButton("Choose files") { } }. The picker is fileImporter(isPresented:allowedContentTypes:allowsMultipleSelection:); accept is a list of UTType (an extension or a media type is resolved to one), and the files are security-scoped URLs the product opens and releases — the view holds none after onSelect returns (FPK-7). The drop area is dropDestination(for: URL.self) with its isTargeted binding for the receiving condition; SwiftUI tells the kinds before the drop, not sizes. With VoiceOver the area is a drop point named by dropText. disabled follows .disabled(_:) and the environment; a Field's name, description and states arrive through the environment, and a view that holds the picker sets the same environment values. FPK-31 is TanreiFilePicker.judge(_:accept:maxSize:maxFiles:multiple:), a static function of the limits, since a view has no instance to call. No form.	TanreiFilePicker(onSelect = { uris -> … }, trigger = { TanreiButton(onClick = {}) { Text("Choose files") } }). The picker is rememberLauncherForActivityResult with OpenDocument or OpenMultipleDocuments; accept is given as MIME types (an extension is resolved through MimeTypeMap), and the files are content Uris whose name and size come from the resolver's metadata, not from reading them. The drop area is Modifier.dragAndDropTarget, which is meaningful on large screens and with a pointer; on a phone the drop-area layout is still drawn and still pressed. disabled is the inverse flag enabled. The group is semantics(mergeDescendants = false) { contentDescription }, set only while there is a name. FPK-31 is rememberTanreiFilePickerState().judge(uris), or the top-level judgeFiles(uris, limits) it calls. No form.	The framework has no file picker and no drop target for files; both are plugins, and the package depends on none. TanreiFilePicker(trigger: TanreiButton(…), onPick: (request) async => …, onSelect: …): onPick is the product's function that opens whatever picker it uses with the request's multiple and accept and returns the files as TanreiPickedFile(name, size, mimeType, handle); the file picker judges them by FPK-9 and emits. Drops arrive the same way: the product's drop plugin calls TanreiFilePickerController.dragEntered / dragExited / dropped(files), and without it the drop-area layout is drawn and pressed and takes no drop — the README says so. TanreiFilePickerController.judge(files) is FPK-31. disabled is the inverse flag enabled. No form: it is no FormField.	React Native has no file picker of its own; the package depends on no picker library. <FilePicker trigger={<Button label="Choose files" />} onPick={async ({ multiple, accept }) => files} onSelect={…} />: onPick is the product's function that opens its picker and returns { name, size, type, uri }[]; the file picker judges them by FPK-9 and emits. No drop of files on phones: the drop-area layout is drawn and pressed and takes no drop, and the README says so. A ref holds judge(files) (FPK-31). No form.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-file-picker-container-gap	sys.space.space150	12px
--tanrei-comp-file-picker-container-padding-block	sys.space.space400	32px
--tanrei-comp-file-picker-container-padding-inline	sys.space.space200	16px
--tanrei-comp-file-picker-container-shape	sys.shape.corner.medium	8px
--tanrei-comp-file-picker-disabled-opacity	—	1
--tanrei-comp-file-picker-focused-opacity	—	1
--tanrei-comp-file-picker-hovered-opacity	—	1
--tanrei-comp-file-picker-icon-size	sys.icon.large	32px
--tanrei-comp-file-picker-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-file-picker-motion-state-duration	sys.motion.role.state.large	250ms
--tanrei-comp-file-picker-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-file-picker-outline-dash-length	sys.space.space50	4px
--tanrei-comp-file-picker-outline-style	—	0
--tanrei-comp-file-picker-outline-width	sys.border.hairline	1px
--tanrei-comp-file-picker-pressed-opacity	—	1
--tanrei-comp-file-picker-receiving-container-color	sys.color.secondary-container	#eeeeee
--tanrei-comp-file-picker-receiving-content-color	sys.color.on-secondary-container	#262626
--tanrei-comp-file-picker-receiving-outline-color	sys.color.on-secondary-container	#262626
--tanrei-comp-file-picker-refusing-icon-color	sys.color.error	#cd262f
--tanrei-comp-file-picker-refusing-outline-color	sys.color.error	#cd262f
--tanrei-comp-file-picker-standard-container-color	—	#000000 · 0%
--tanrei-comp-file-picker-standard-disabled-container-color	—	#1b1b1b · 12%
--tanrei-comp-file-picker-standard-disabled-error-outline-color	—	#1b1b1b · 38%
--tanrei-comp-file-picker-standard-disabled-icon-color	—	#1b1b1b · 38%
--tanrei-comp-file-picker-standard-disabled-label-color	—	#1b1b1b · 38%
--tanrei-comp-file-picker-standard-disabled-outline-color	—	#848484
--tanrei-comp-file-picker-standard-disabled-selection-text-color	—	#1b1b1b · 38%
--tanrei-comp-file-picker-standard-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-file-picker-standard-disabled-supporting-text-color	—	#1b1b1b · 38%
--tanrei-comp-file-picker-standard-error-outline-color	sys.color.error	#cd262f
--tanrei-comp-file-picker-standard-focused-container-color	—	#1b1b1b · 10%
--tanrei-comp-file-picker-standard-focused-error-outline-color	—	#cd262f
--tanrei-comp-file-picker-standard-focused-icon-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-focused-label-color	—	#1b1b1b
--tanrei-comp-file-picker-standard-focused-outline-color	—	#848484
--tanrei-comp-file-picker-standard-focused-selection-text-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-focused-state-layer-color	—	#1b1b1b
--tanrei-comp-file-picker-standard-focused-supporting-text-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-hovered-container-color	—	#1b1b1b · 8%
--tanrei-comp-file-picker-standard-hovered-error-outline-color	—	#cd262f
--tanrei-comp-file-picker-standard-hovered-icon-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-hovered-label-color	—	#1b1b1b
--tanrei-comp-file-picker-standard-hovered-outline-color	—	#848484
--tanrei-comp-file-picker-standard-hovered-selection-text-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-hovered-state-layer-color	—	#1b1b1b
--tanrei-comp-file-picker-standard-hovered-supporting-text-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-icon-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-file-picker-standard-label-color	sys.color.on-surface	#1b1b1b
--tanrei-comp-file-picker-standard-outline-color	sys.color.outline	#848484
--tanrei-comp-file-picker-standard-pressed-container-color	—	#1b1b1b · 10%
--tanrei-comp-file-picker-standard-pressed-error-outline-color	—	#cd262f
--tanrei-comp-file-picker-standard-pressed-icon-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-pressed-label-color	—	#1b1b1b
--tanrei-comp-file-picker-standard-pressed-outline-color	—	#848484
--tanrei-comp-file-picker-standard-pressed-selection-text-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-pressed-state-layer-color	—	#1b1b1b
--tanrei-comp-file-picker-standard-pressed-supporting-text-color	—	#4b4b4b
--tanrei-comp-file-picker-standard-selection-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-file-picker-standard-state-layer-color	comp.file-picker.standard.label.color	#1b1b1b
--tanrei-comp-file-picker-standard-supporting-text-color	sys.color.on-surface-variant	#4b4b4b
--tanrei-comp-file-picker-supporting-text-gap	sys.space.space100	8px
--tanrei-comp-file-picker-trigger-gap	sys.space.space150	12px
--tanrei-comp-file-picker-label-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-file-picker-selection-text-typescale	sys.typescale.body	400 14px/1.5714
--tanrei-comp-file-picker-supporting-text-typescale	sys.typescale.body-small	400 13px/1.5385

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

button

accept: [".pdf"] maxSize: 10000000 label: Attachment constraintsText: PDF, up to 10 MB selectionText: No file chosen slots: trigger

button-chosen

accept: [".pdf"] maxSize: 10000000 label: Attachment constraintsText: PDF, up to 10 MB selectionText: brief.pdf slots: trigger

button-constraints

multiple: true label: Attachments constraintsText: PDF or PNG, up to 10 MB each slots: trigger

button-bare

slots: trigger

button-disabled

label: Attachment constraintsText: PDF, up to 10 MB selectionText: No file chosen disabled: true slots: trigger

drop-area

layout: drop-area multiple: true accept: [".pdf","image/png"] maxSize: 10000000 label: Attachments constraintsText: PDF or PNG, up to 10 MB each dropText: Drag files here, or choose them slots: trigger

drop-area-error

layout: drop-area multiple: true label: Attachments constraintsText: PDF or PNG, up to 10 MB each dropText: Drag files here, or choose them error: true slots: trigger

drop-area-disabled

layout: drop-area multiple: true label: Attachments constraintsText: PDF or PNG, up to 10 MB each dropText: Drag files here, or choose them disabled: true slots: trigger

drop-area-icon

layout: drop-area accept: ["image/jpeg","image/png"] label: Photo constraintsText: JPEG or PNG, up to 5 MB dropText: Drag a photo here, or choose one slots: trigger, icon

drop-area-trigger-only

layout: drop-area multiple: true label: Attachments slots: trigger

long-text

layout: drop-area multiple: true label: Attachments constraintsText: PDF, PNG, JPEG, TIFF or a spreadsheet, u… dropText: Drag the signed forms and every supporti… slots: trigger

button-long-text

label: Attachment constraintsText: PDF, PNG, JPEG, TIFF or a spreadsheet, u… selectionText: municipal-planning-application-supportin… slots: trigger

button-rtl

label: Attachment constraintsText: PDF, up to 10 MB selectionText: brief.pdf direction: rtl slots: trigger

drop-area-rtl

layout: drop-area multiple: true label: Attachments constraintsText: PDF or PNG, up to 10 MB each dropText: Drag files here, or choose them direction: rtl slots: trigger

इससे जनरेट किया गया: specs/file-picker.spec.json, tokens/comp/file-picker.tokens.json, design/tokens/

दिशानिर्देश

link

दो लेआउट

link

लेआउट	किसके लिए	क्या दिखाता है
button (डिफ़ॉल्ट)	ऐसा फ़ॉर्म जिसमें दूसरे फ़ील्ड भी हैं, सँकरी जगह, फ़ोन, टूलबार।	ट्रिगर, उसके बग़ल का वह टेक्स्ट जो बताता है कि क्या चुना गया है, और नीचे सीमाएँ। इस पर कुछ ड्रॉप नहीं किया जा सकता।
drop-area	वह स्क्रीन जिसका मुख्य काम फ़ाइलें सौंपना है, और जहाँ पॉइंटर होने की संभावना है।	उसी ट्रिगर के चारों ओर एक घिरा हुआ एरिया, एक ग्लिफ़ और एक संकेत के साथ। वह उस पर ड्रैग करके छोड़ी गई फ़ाइलें लेता है, और उस पर कहीं भी दबाने से पिकर खुलता है।

दोनों एक ही बटन से एक ही पिकर खोलते हैं। ड्रैग करना एक अतिरिक्त तरीक़ा है, कभी अकेला तरीक़ा नहीं: कीबोर्ड से, टच से और सहायक तकनीक के साथ फ़ाइलें ट्रिगर से ही चुनी जाती हैं।

ट्रिगर

link

ट्रिगर आपका अपना बटन है, आपके लेबल, वेरिएंट और साइज़ के साथ। trigger स्लॉट में ठीक एक बटन रखें। फ़ाइल पिकर उसे व्यवहार देता है और उसकी स्टाइल कभी नहीं बदलता।

• ट्रिगर के बिना भी फ़ाइल पिकर ड्रॉप एरिया वाले लेआउट में ड्रॉप लेता है, और डीबग बिल्ड इसे विफलता के रूप में रिपोर्ट करता है।
• ट्रिगर और icon स्लॉट के ग्लिफ़ के अलावा आप भीतर जो कुछ भी रखते हैं, वह नहीं दिखाया जाता। डीबग बिल्ड इसकी रिपोर्ट करता है।
• icon स्लॉट ड्रॉप एरिया के ऊपर वाले अपलोड ग्लिफ़ की जगह लेता है: फ़ोटो के लिए तस्वीर का ग्लिफ़, स्प्रेडशीट के लिए टेबल का। वह सजावटी है, और बटन वाले लेआउट में अनदेखा किया जाता है।

क्या चुना गया है

link

selectionText बटन वाले लेआउट में ट्रिगर के बग़ल का टेक्स्ट है: “कोई फ़ाइल नहीं चुनी गई”, फिर “brief.pdf”, फिर “3 फ़ाइलें”। फ़ाइल पिकर कोई फ़ाइल नहीं रखता, इसलिए वह यह टेक्स्ट नहीं लिख सकता। इसे वही लिखता है जो फ़ाइलें रखता है: आप, या फ़ाइल अपलोड, जो इसे आपके लिए भर देता है।

इसे ख़ाली छोड़ दें, तो वहाँ कुछ नहीं दिखता। यह उस अटैच बटन के लिए ठीक है जिसकी फ़ाइलें कहीं और दिखती हैं।

सीमाएँ बताएँ

link

accept, maxSize, maxFiles और multiple सीमाएँ लागू करते हैं। constraintsText उन्हें शब्दों में बताता है। दोनों दें।

प्रॉपर्टी	सीमा	जो फ़ाइल इसे तोड़ती है
accept	वे प्रकार जो लिए जाते हैं: बिंदु के साथ फ़ाइल एक्सटेंशन (.pdf) और मीडिया टाइप, और पूरा समूह image/* के रूप में।	type कारण के साथ अस्वीकार होती है। फ़ोल्डर भी type के साथ अस्वीकार होता है।
maxSize	एक फ़ाइल का सबसे बड़ा साइज़, बाइट में।	size कारण के साथ अस्वीकार होती है।
multiple	क्या एक चुनाव में एक से ज़्यादा फ़ाइलें आ सकती हैं।	इसके बिना, साथ आने वाली कई फ़ाइलें सब की सब count कारण के साथ अस्वीकार होती हैं। फ़ाइल पिकर व्यक्ति की ओर से उनमें से कोई एक नहीं चुनता।
maxFiles	multiple के साथ, एक चुनाव या एक ड्रॉप में ज़्यादा से ज़्यादा कितनी फ़ाइलें आ सकती हैं।	इससे आगे की फ़ाइलें count कारण के साथ अस्वीकार होती हैं। शून्य हर फ़ाइल को अस्वीकार करता है।

• सीमाएँ वैसे लिखें जैसे कोई व्यक्ति उन्हें पढ़ेगा: “PDF या PNG, हर फ़ाइल 10 MB तक”। Tanrei accept से या बाइट की संख्या से कोई वाक्य नहीं बनाता, क्योंकि वह अपना कोई शब्द साथ नहीं देता।
• सीमाएँ फ़ाइल पिकर में दिखाई जाती हैं, फ़ील्ड की सहायता में नहीं। फ़ील्ड की सहायता अपनी जगह उसके त्रुटि टेक्स्ट को दे देती है, और ठीक तभी व्यक्ति को सीमाएँ दोबारा पढ़नी होती हैं।
• select हर चुनाव पर एक बार एमिट होता है, स्वीकार की गई फ़ाइलों के साथ; फिर reject एक बार, हर अस्वीकार की गई फ़ाइल और उसके कारण के साथ। अस्वीकृति के लिए फ़ाइल पिकर न कुछ दिखाता है, न कुछ कहता है। क्या हुआ, यह अपने शब्दों में बताएँ: फ़ील्ड के त्रुटि टेक्स्ट से, अपनी लिस्ट की किसी पंक्ति से, या ऐसे संदेश से जिसे आप पढ़कर सुनाते हैं।
• सीमाएँ एक चुनाव की हैं। फ़ाइल पिकर नहीं जानता कि आपने पहले क्या रखा था: maxFiles में उतनी ही संख्या दें जितनी फ़ाइलों की जगह बची है, या कुल गिनती ख़ुद परखें। फ़ाइल अपलोड यह करता है।
• जब तक कोई चीज़ एरिया के ऊपर ड्रैग की जा रही है, ब्राउज़र उसके प्रकार और गिनती बताता है, नाम या साइज़ कभी नहीं। इसलिए बहुत बड़ी फ़ाइल ड्रॉप होने पर अस्वीकार होती है, तब नहीं जब वह अभी पकड़ी हुई है।

फ़ील्ड में

link

जब फ़ॉर्म लेबल, सहायता, त्रुटि या ज़रूरी का निशान दिखाता है, तब फ़ाइल पिकर को किसी फ़ील्ड में रखें। फ़ील्ड उन्हें दिखाता है और फ़ाइल पिकर को देता है, और तब पिकर के ट्रिगर का नाम और विवरण उन्हीं से आता है।

<tanrei-field label="अटैचमेंट" required required-text="ज़रूरी"
              error error-text="10 MB या उससे छोटी PDF चुनें।">
  <tanrei-file-picker accept=".pdf" max-size="10000000"
                      constraints-text="PDF, 10 MB तक" selection-text="कोई फ़ाइल नहीं चुनी गई">
    <tanrei-button slot="trigger" variant="outlined">फ़ाइल चुनें</tanrei-button>
  </tanrei-file-picker>
</tanrei-field>

फ़ाइल पिकर कुछ सबमिट नहीं करता। उसका न name है, न कोई मान, और required सिर्फ़ सहायक तकनीक को बताता है। कोई फ़ाइल छूटी है या नहीं, यह बताना उस कंपोनेंट का काम है जो फ़ाइलें रखता है: आपका कोड, या फ़ाइल अपलोड, जो एक फ़ॉर्म कंट्रोल है। required, जैसा फ़ील्ड कहता है, required के बराबर है।

दाएँ से बाएँ

link

दाएँ से बाएँ वाले लेआउट में ट्रिगर दाईं ओर रहता है और चुनी गई फ़ाइल का टेक्स्ट उसके बाईं ओर, और सीमाएँ दाएँ किनारे से शुरू होती हैं। ड्रॉप एरिया का कॉलम बीच में ही रहता है। selectionText के रूप में दिया गया फ़ाइल का नाम अपना क्रम बनाए रखता है, अपने बिंदु और अपने एक्सटेंशन के साथ। ग्लिफ़ सिर्फ़ वहाँ मिरर होता है जहाँ आइकन सेट उसे चिह्नित करता है।

करें

link

• select जो देता है, उसे तुरंत रख लें।
• बताएँ कि क्या चुना गया है: selectionText से, या उस जगह पर जहाँ आपका प्रॉडक्ट फ़ाइलें दिखाता है।
• हर अस्वीकृति शब्दों में बताएँ, वहाँ जहाँ व्यक्ति देख रहा है।
• जब फ़ाइलें पिकर के नीचे लिस्ट में दिखती हैं और फ़ॉर्म के साथ भेजी जाती हैं, तब फ़ाइल अपलोड इस्तेमाल करें।

न करें

link

• ड्रॉप एरिया को चुनने का अकेला तरीक़ा न बनाएँ। उसमें हमेशा ट्रिगर रहता है।
• यह उम्मीद न करें कि फ़ॉर्म चुनी गई फ़ाइलें सबमिट करेगा। फ़ाइल पिकर किसी फ़ॉर्म का हिस्सा नहीं बनता।
• सिर्फ़ इस एक जगह के लिए ट्रिगर के भीतर पहुँचकर उसकी स्टाइल न बदलें। वह आपका बटन है: उसका वेरिएंट और साइज़ चुनें।
• इसके भीतर फ़ाइलों की लिस्ट न बनाएँ। फ़ाइल आइटम इसके नीचे रखें, या फ़ाइल अपलोड इस्तेमाल करें।

सुलभता

link

रोल

group

लेबलिंग

A group named by label, or by the label of the Field around it; with neither, no group — the trigger alone, a button named by its own label. The trigger is described by constraintsText, by selectionText while it is drawn, and by what the Field or the component that holds the file picker gives; it is exposed as required, invalid and disabled as the props say. The drop area and its glyph are not exposed; dropText is read as text.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
Tab / Shift+Tab	Moves focus to the trigger. The drop area is not a stop.
Enter / Space	On the trigger: opens the platform's file picker, as the Button's own activation.
The picker's own keys	Inside the platform's picker everything is the platform's; leaving it without choosing returns focus to the trigger and changes nothing.

टिप्पणियाँ

• Dragging is never the only way (WCAG 2.5.7): the trigger opens the same picker in both layouts and is the path for keyboard, touch, switch and voice. A drop area without a trigger is reported as a functional failure (FPK-5). The area adds a larger pointer target and takes drops; it adds no role, no stop and no key (FPK-12).
• Without script, and until the component is defined, on the web: the trigger is a button that opens nothing. A custom element cannot open the platform's picker by markup alone, and the file picker does not pretend to: a page that must take files where script does not run writes a native file input in its own form, as it would without Tanrei, and loses only the drawing.
• The limits are words before the choice (WCAG 3.3.2): constraintsText is drawn and is the trigger's description. accept, maxSize and maxFiles enforce what it says; a product that sets them and writes no words is told so in debug builds (FPK-18).
• A refused file must be said (WCAG 3.3.1), and only the product has the words and the place. On reject the product sets the errorText of the Field around the file picker, marks the file in a list of its own, or announces a sentence through a live region of its own. The file picker draws and says nothing for a refusal by itself, because it has no sentence for it and no row to put one on; the component built from it that keeps files draws such a row.
• What is dragged over the area is the pointer user's own act and is not announced. The conditions are told without color too: receiving by its fill and, under forced colors, a thicker solid edge; refusing by the block glyph (FPK-13, FPK-23).
• The file picker has no live region (FPK-17): it holds nothing whose change it could say. What was chosen is said by whoever shows it — the text beside the trigger, which is part of the trigger's description, or a list the product draws.
• A file picker alone is no form control (FPK-7). It keeps nothing, so a value it submitted would be a file nobody can see or take back, and a required check would ask for something it cannot hold. A plain form takes the component that keeps the files and lists them; a product that draws its own list holds the files and sends them itself, or gives them to a control of its own.
• required is a state for assistive technology alone, and a button has none on the web: there it is said by the Field's required text in the trigger's description, as for every control whose role has no required state.

इससे जनरेट किया गया: specs/file-picker.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• ट्रिगर आपका बटन है। उसका विवरण सीमाओं से और उस टेक्स्ट से बनता है जो बताता है कि क्या चुना गया है, और फ़ील्ड के भीतर फ़ील्ड की सहायता या त्रुटि से भी।
• label के साथ, या फ़ील्ड के भीतर, फ़ाइल पिकर उस नाम वाला एक ग्रुप है। नाम के बिना वह सहायक तकनीक को कोई ग्रुप नहीं देता: टूलबार का अटैच बटन सिर्फ़ एक बटन है।
• ड्रॉप एरिया उसी बटन का एक बड़ा पॉइंटर टार्गेट है। उसका न कोई रोल है, न नाम, न फ़ोकस के क्रम में कोई पड़ाव, न कोई कुंजी।
• error सहायक तकनीक को ट्रिगर अमान्य के रूप में देता है और एरिया का किनारा त्रुटि के रंग में बनाता है। disabled ट्रिगर को अक्षम करता है, और एरिया किसी बात का जवाब नहीं देता।
• फ़ाइल पिकर कुछ पढ़कर नहीं सुनाता। उसका कोई लाइव रीजन नहीं है: क्या चुना गया या क्या अस्वीकार हुआ, यह वही बताता है जो फ़ाइलें रखता है।
• 200% टेक्स्ट पर हर टेक्स्ट रैप होता है और कुछ नहीं कटता। फ़ोर्स्ड कलर्स में एरिया का किनारा बना रहता है, और जिस एरिया पर कुछ ड्रैग किया जा रहा है उसका किनारा ज़्यादा मोटा होता है।

वेब पर यह कैसे बना है: पिकर शैडो रूट में एक असली <input type="file"> है, जो नज़र से, फ़ोकस के क्रम से और सहायक तकनीक से दूर रखा गया है। ट्रिगर और ग्लिफ़ आपके DOM में रहते हैं। select और reject बबल होते हैं; detail.files एक File[] है, और reject के लिए { file, reason } की लिस्ट।

वेब पर ज्ञात कमियाँ:

• बटन में ज़रूरी स्टेट नहीं होता। फ़ील्ड के भीतर, फ़ील्ड का ज़रूरी वाला टेक्स्ट ट्रिगर के विवरण में जुड़ जाता है।
• जो एरिया ड्रैग को अस्वीकार कर देता है, उसे ब्राउज़र कोई ड्रॉप नहीं देता। उस स्थिति में reject सिर्फ़ उसी अस्वीकृति के लिए एमिट होता है जो ड्रॉप से पहले जानी नहीं जा सकती थी, जैसे बहुत बड़ी फ़ाइल।
• Safari में क्लिक से बटन पर फ़ोकस नहीं आता। वहाँ पॉइंटर से फ़ाइल चुनने के बाद फ़ोकस वहीं रहता है जहाँ वह पहले था।
• डैश वाला किनारा स्मूद किए गए कोने के साथ नहीं चल सकता। जो डिज़ाइन सिस्टम कॉर्नर स्मूदिंग सेट करता है, उसमें जहाँ ब्राउज़र वह वक्र बनाता है, वहाँ किनारा ठोस बनाया जाता है।
• स्क्रिप्ट के बिना, और एलिमेंट के डिफ़ाइन होने तक, ट्रिगर ऐसा बटन है जो कुछ नहीं खोलता। जिस पेज को वहाँ भी फ़ाइलें लेनी हैं जहाँ स्क्रिप्ट नहीं चलती, वह नेटिव <input type="file"> लिखता है।

आपको क्या करना है

link

• trigger स्लॉट में एक बटन रखें, ऐसे लेबल के साथ जो बताए कि वह क्या करता है।
• जहाँ भी फ़ाइल पिकर एक अकेले बटन से ज़्यादा कुछ है, वहाँ उसे label दें, या उसे किसी फ़ील्ड में रखें।
• जब भी आप accept, maxSize या maxFiles सेट करें, constraintsText दें।
• क्या चुना गया है, यह शब्दों में बताएँ, और हर अस्वीकृति भी।
• जब फ़ाइलें ऐसी जगह दिखती हैं जहाँ व्यक्ति नहीं देख रहा, तब जो जोड़ा गया उसे अपने लाइव रीजन में पढ़कर सुनाएँ।