# File upload (part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\ Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\ Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md) A Servoy Extra Component that allows users to upload files.\ It supports multi-file uploads, displays file names, shows upload progress,\ and provides customizable texts for various upload statuses. This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components). ## Properties ### accept Html accept attribute - defines accepted files to be uploaded. Default is all files. Type: [String](/reference/servoycore/dev-api/js-lib/string.md) Default Value: "\*/\*" *** ### dataProviderID Bound data provider identifier for the file data. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### displaysTags Flag indicating whether display tags are enabled for the component. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) *** ### enabled Flag indicating whether the file upload component is enabled for user interaction. Type: [Enabled](/reference/servoy-developer/component_and_service_property_types.md#protected) Default Value: true *** ### iconStyleClass CSS style class for the upload icon. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "fa fa-upload fa-3x" *** ### location The position of the component on the form. Type: [Point](https://github.com/Servoy/gitbook/blob/master/reference/servoycore/dev-api/js-lib/point.md) *** ### maxFileSize The max file size allowed for upload in bytes. Default is no limit. Type: [Long](/reference/servoycore/dev-api/js-lib/number.md) *** ### multiFileUpload Flag indicating whether multiple file uploads are allowed. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: false *** ### resultDisplayTimeout The result of an upload will be displayed for this amount of time (in milliseconds) before being cleared. After the timeout expires, the upload component will revert to it's initial display state. If set to -1, it will not automatically clear the upload result. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 2000 *** ### showFileName Flag indicating whether the file name is displayed after upload. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true *** ### showProgress Flag indicating whether the upload progress is displayed. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true *** ### styleClass CSS style classes applied to the file upload component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) *** ### styleClassExpression Expression that returns additional CSS style classes for the component. Type: [Dataprovider](/reference/servoy-developer/component_and_service_property_types.md#dataprovider) *** ### successIconStyleClass CSS style class for the success icon displayed after a successful upload. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass) Default Value: "fa fa-check fa-3x" *** ### toolTipText Tooltip text displayed when hovering over the file upload component. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) *** ### uploadCancelText Text displayed when the file upload is canceled. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Upload canceled" *** ### uploadNotSupportedFileText Text displayed when the file type is not supported for upload. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "File type is not supported for upload" *** ### uploadNotSupportedText Text displayed when file drag and drop is not supported by the browser. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "File Drag/Drop is not supported for this browser" *** ### uploadProgressText Text displayed during the file upload progress. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Uploading click to cancel" *** ### uploadSuccessText Text displayed when the file is successfully uploaded. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Successfully uploaded" *** ### uploadText Text displayed to prompt the user to upload a file. Type: [Tagstring](/reference/servoy-developer/component_and_service_property_types.md#tagstring) Default Value: "Drop a file here or click to upload" *** ### visible Flag indicating whether the file upload component is visible. Type: [Visible](/reference/servoy-developer/component_and_service_property_types.md#visible) *** ## Events ### onDataChangeMethodID(oldValue,newValue,event) Called when the file upload data changes. **Parameters:** > * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} oldValue The previous file data value. > * {[${dataproviderType}](/reference/servoy-developer/component_and_service_property_types.md#dataprovider)} newValue The new file data value. > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the data change. **Returns:** {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} *** ### onFileTransferFinishedMethodID(event) Called when the file transfer process is finished. **Parameters:** > * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the file transfer completion. *** ### onFileUploadedMethodID(jsUpload) Called when a file is successfully uploaded. **Parameters:** > * {[JSUpload](/reference/servoycore/dev-api/application/jsupload.md)} jsUpload The upload object containing details about the uploaded file. *** ## API *** --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.servoy.com/reference/servoyextensions/ui-components/media/file-upload.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.