**File Picker** component allows the user to drag and drop files or upload files by browsing the filesystem and selecting one or more files in a directory.
File types must be a valid [MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) type according to input element specification or a valid file extension.
To accept any/all file type(s), set `Accept file types` to an empty value.
:::
:::tip
[MIME](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types) type determination is not reliable across platforms. CSV files, for example, are reported as text/plain under macOS but as application/vnd.ms-excel under Windows.
| Instruction text | Instruction text can be set to give information on the file picker. |
| Use drop zone | Creates a drag & drop zone. Files can be dragged and dropped to the "drag & drop" zone. |
| Use file picker | On clicking it invokes the default OS file prompt. |
| Pick multiple files | Allows drag and drop (or selection from the file dialog) of multiple files. `Pick multiple files` is disabled by default. |
| Max file count | The maximum accepted number of files The default value is `2`. |
| Accept file types | By providing types, you can make the dropzone accept specific file types and reject the others. Example: `{{"image/*,application/pdf,application/msword"}}`. |
| Max size limit | Maximum file size (in bytes). |
| Min size limit | Minimum file size (in bytes). |
:::tip
Files can be accepted or rejected based on the file types, maximum file count, maximum file size (in bytes) and minimum file size (in bytes).
If `Pick multiple files` is set to false and additional files are dropped, all files besides the first will be rejected.
Any file that does not have a size in the range of `Max size limit` and `Min size limit` will be rejected.
| <divstyle={{width:"100px"}}> clearFiles() </div> | Clears the selected files from the file picker component. | Employ a RunJS query (for e.g., `await components.filepicker1.clearFiles()`) or trigger it using an event. |
| file | Holds an array of file objects loaded in the file picker, each with properties: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | Accessible dynamically with JS (for e.g., `{{components.filepicker1.file[0].base64Data}}`). |
Under the <b>General</b> accordion, you can set the value in the string format. Now hovering over the component will display the string as the tooltip.
| Show on desktop | Makes the component visible in desktop view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Show on mobile | Makes the component visible in mobile view. | You can set it with the toggle button or dynamically configure the value by clicking on **fx** and entering a logical expression. |
| Visibility | This is to control the visibility of the component. If `{{false}}` the component will not visible after the app is deployed. It can only have boolean values i.e. either `{{true}}` or `{{false}}`. | By default, it's set to `{{true}}`. |
| Disable | This property only accepts boolean values. If set to `{{true}}`, the component will be locked and becomes non-functional. | By default, its value is set to `{{false}}`. |
| Border radius | Use this property to modify the border radius of the File Picker component. The field expects only numerical value from `1` to `100`. | By default, its value is set to `0`. |
