**File Picker** widget 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.
| `clearFiles()` | You can clear the selected files on the File Picker component via a component-specific action within any event handler. | Employ a RunJS query to execute component-specific actions such as `await components.filepicker1.clearFiles()` |
| <divstyle={{width:"100px"}}> Variables </div> | <divstyle={{width:"200px"}}> Description </div> | <divstyle={{width:"200px"}}> How To Access </div> |
|:----------- |:----------- |:-------- |
| file | This variable holds the array of objects where each object represents the file loaded on the file picker component. Each object has the following keys: **name**, **type**, **content**, **dataURL**, **base64Data**, **parsedData**, **filePath**. | The values can be accesed using `{{components.filepicker1.file[0].base64Data}}`|
| Show on desktop | Toggle on or off to display desktop view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Show on mobile | Toggle on or off to display mobile view. | You can programmatically determining the value by clicking on `Fx` to set the value `{{true}}` or `{{false}}` |
| Visibility | This is to control the visibility of the widget. If `{{false}}` the widget 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 widget 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 widget. The field expects only numerical value from `1` to `100`. | By default, its value is set to `0`. |
