@ui5/webcomponents-react

import '@ui5/webcomponents/dist/FileUploader.js'; import type { FileUploaderChangeEventDetail, FileUploaderFileSizeExceedEventDetail } from '@ui5/webcomponents/dist/FileUploader.js'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; import type { CommonProps, Ui5CustomEvent, Ui5DomRef, UI5WCSlotsNode } from '@ui5/webcomponents-react-base'; import type { ReactNode } from 'react'; interface FileUploaderAttributes { /** * Comma-separated list of file types that the component should accept. * * **Note:** Please make sure you are adding the `.` in front on the file type, e.g. `.png` in case you want to accept png's only. * @default undefined */ accept?: string | undefined; /** * Defines the accessible description of the component. * * **Note:** Available since [v2.14.0](https://github.com/UI5/webcomponents/releases/tag/v2.14.0) of **@ui5/webcomponents**. * @default undefined */ accessibleDescription?: string | undefined; /** * Receives id(or many ids) of the elements that describe the input. * * **Note:** Available since [v2.14.0](https://github.com/UI5/webcomponents/releases/tag/v2.14.0) of **@ui5/webcomponents**. * @default undefined */ accessibleDescriptionRef?: string | undefined; /** * Defines the accessible ARIA name of the component. * * **Note:** Available since [v2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. * @default undefined */ accessibleName?: string | undefined; /** * Receives id(or many ids) of the elements that label the input. * * **Note:** Available since [v2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. * @default undefined */ accessibleNameRef?: string | undefined; /** * Defines whether the component is in disabled state. * * **Note:** A disabled component is completely noninteractive. * @default false */ disabled?: boolean; /** * If set to "true", the input field of component will not be rendered. Only the default slot that is passed will be rendered. * * **Note:** Use this property in combination with the default slot to achieve a button-only file uploader design. * @default false */ hideInput?: boolean; /** * Defines the maximum file size in megabytes which prevents the upload if at least one file exceeds it. * * **Note:** Available since [v2.2.0](https://github.com/UI5/webcomponents/releases/tag/v2.2.0) of **@ui5/webcomponents**. * @default undefined */ maxFileSize?: number | undefined; /** * Allows multiple files to be chosen. * @default false */ multiple?: boolean; /** * Determines the name by which the component will be identified upon submission in an HTML form. * * **Note:** This property is only applicable within the context of an HTML Form element. * @default undefined */ name?: string | undefined; /** * Defines a short hint intended to aid the user with data entry when the component has no value. * @default undefined */ placeholder?: string | undefined; /** * Defines whether the component is required. * * **Note:** Available since [v2.13.0](https://github.com/UI5/webcomponents/releases/tag/v2.13.0) of **@ui5/webcomponents**. * @default false */ required?: boolean; /** * Defines the name/names of the file/files to upload. */ value?: string; /** * Defines the value state of the component. * @default "None" */ valueState?: ValueState | keyof typeof ValueState; } interface FileUploaderDomRef extends Required<FileUploaderAttributes>, Ui5DomRef { /** * FileList of all selected files. */ readonly files: FileList | null; } interface FileUploaderPropTypes extends FileUploaderAttributes, Omit<CommonProps, keyof FileUploaderAttributes | 'children' | 'valueStateMessage' | 'onChange' | 'onFileSizeExceed'> { /** * This slot allows you to add custom content to the component, such as a button or any other interactive element to trigger the file selection dialog. * * **Note:** For best accessibility experience, set a `tabindex` of "-1" on your interactive element, or it will be set automatically. * This slot is intended for use cases where you want a button-only file uploader. * It is recommended to set `hideInput` property to "true" when using this slot. * Not setting `hideInput` may negatively impact the screen reader users. * * __Supported Node Type/s:__ `Array<HTMLElement>` */ children?: ReactNode | ReactNode[]; /** * Defines the value state message that will be displayed as pop up under the component. * * **Note:** If not specified, a default text (in the respective language) will be displayed. * * **Note:** The `valueStateMessage` would be displayed, * when the component is in `Information`, `Critical` or `Negative` value state. * * __Note:__ The content of the prop will be rendered into a [<slot>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) by assigning the respective [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/slot) attribute (`slot="valueStateMessage"`). * Since you can't change the DOM order of slots when declaring them within a prop, it might prove beneficial to manually mount them as part of the component's children, especially when facing problems with the reading order of screen readers. * * __Note:__ When passing a custom React component to this prop, you have to make sure your component reads the `slot` prop and appends it to the most outer element of your component. * Learn more about it [here](https://ui5.github.io/webcomponents-react/v2/?path=/docs/knowledge-base-handling-slots--docs). * * __Supported Node Type/s:__ `Array<HTMLElement>` */ valueStateMessage?: UI5WCSlotsNode; /** * Event is fired when the value of the file path has been changed. * * **Note:** Keep in mind that because of the HTML input element of type file, the event is also fired in Chrome browser when the Cancel button of the uploads window is pressed. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onChange?: (event: Ui5CustomEvent<FileUploaderDomRef, FileUploaderChangeEventDetail>) => void; /** * Event is fired when the size of a file is above the `maxFileSize` property value. * * **Note:** Available since [v2.2.0](https://github.com/UI5/webcomponents/releases/tag/v2.2.0) of **@ui5/webcomponents**. * * | cancelable | bubbles | * | :--------: | :-----: | * | ❌|✅| */ onFileSizeExceed?: (event: Ui5CustomEvent<FileUploaderDomRef, FileUploaderFileSizeExceedEventDetail>) => void; } /** * The `FileUploader` opens a file explorer dialog and enables users to upload files. * The component consists of input field, but you can provide an HTML element by your choice * to trigger the file upload, by using the default slot. * Furthermore, you can set the property "hideInput" to "true" to hide the input field. * * To get all selected files, you can simply use the read-only "files" property. * To restrict the types of files the user can select, you can use the "accept" property. * * And, similar to all input based components, the FileUploader supports "valueState", "placeholder", "name", and "disabled" properties. * * For the `FileUploader` * * * __Note:__ This is a UI5 Web Component! [FileUploader UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/FileUploader) | [Repository](https://github.com/UI5/webcomponents) */ declare const FileUploader: import("react").ForwardRefExoticComponent<FileUploaderPropTypes & import("@ui5/webcomponents-react-base").WithWebComponentPropTypes & import("react").RefAttributes<FileUploaderDomRef>>; export { FileUploader }; export type { FileUploaderDomRef, FileUploaderPropTypes };