FileMosaic API
API reference docs for the React Filemosaic component. Learn about the props and other APIs of this exported module.
Demo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| alwaysActive | boolean | false | Flag that makes all buttons visible. If false , the buttons and info will be visible only when user triggers the hover event. |
| id | string | number | The identifier of the file | |
| file | File | The file object obtained from client drop or selection | |
| name | string | The name of the file | |
| type | string | The file mime type. | |
| size | number | The size of the file in bytes. | |
| valid | boolean | If present, it will show a valid or rejected message ("valid", "denied"). By default valid is undefined. | |
| errors | string[] | The list of errors according to the validation criteria or the result of the given custom validation function. | |
| info | boolean | false | If true, the info button will be visible |
| imageUrl | string | A string representation or web url of the image that will be set to the "src" prop of an <img/> tag. If given, the component will use this image source instead of reading the image file. | |
| backgroundBlurImage | boolean | If true, a background blur image will be shown | |
| darkMode | boolean | false | If true, dark mode colors are used in the component. |
| localization | "EN-en" | "ES-es" | "FR-fr" | "IT-it" | "PT-pt" | "RU-ru" | "ZH-cn" | "ZH-hk" | "EN-en" | The language in which text labels are shown. |
| progress | number | The current percentage of upload progress. This value will have a higher priority over the upload progress value calculated inside the component. | |
| xhr | XMLHttpRequest | A reference to the XHR object that allows the upload, progress and abort events. | |
| onSee | func | Callback fired when the see icon is clicked. If set, the see icon will be shown. Signature: (imageSource: string | undefined) => void | |
| onWatch | func | Callback fired when the play icon is clicked. If set, the play icon will be shown. Signature: (videoSource: File | string | undefined) => void | |
| onDelete | func | Callback fired when the delete icon is clicked. If set, the delete icon will be shown. Signature: (fileId: number | string | undefined) => void | |
| onAbort | func | Callback fired when the abort icon is clicked. If set, the abort icon will be shown during the upload stage. Signature: (fileId: number | string | undefined) => void | |
| onCancel | func | Callback fired when the cancel icon is clicked. If set, the cancel icon will be shown only before the upload stage has started during the preparing phase. Signature: (fileId: number | string | undefined) => void | |
| onDownload | func | Callback fired when the download icon is clicked. If set, the download icon will be shown. Signature: (fileId: number | string | undefined, downloadUrl?: string) => void | |
| onClick | func | Callback fired when the component is clicked if set. Signature: (evt: React.MouseEvent) => void | |
| onDoubleClick | func | Callback fired when the component is double clicked if set. Signature: (evt: React.MouseEvent) => void | |
| onRightClick | func | Callback fired when the component is right clicked if set. Signature: (evt: React.MouseEvent) => void | |
| resultOnTooltip | boolean | If present a tooltip that contains the upload message will be diplayed on hover. | |
| downloadUrl | string | The url to be used to perform a GET request in order to download the file. If defined, the download icon will be shown. | |
| smartImgFit | false | "orientation" | "center" | "orientation" | If false, image width will be set to 100%. If present, image will be analized and displayed according to its heigh and width. Image with height greater than its width has a "portrait" orientation. Otherwise it has a "landscape" orientation. .
|
