> For the complete documentation index, see [llms.txt](https://docs.facephi.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.facephi.com/docs.facephi-en/sdks/sdk-web/componentes/file-uploader-cargador-de-archivos/personalizacion.md).

# Customization

## Customization of the File Uploader Widget

The File Uploader component is easily customizable through CSS variables and some properties.

***

### Style customization

Selphi and SelphID Widgets can be customized with the following CSS variables applied to the tag `facephi-sdk-provider`. Check the full list of CSS variables on the page [Customization of the SDK Provider CSS](/docs.facephi-en/sdks/sdk-web/personalizacion.md).

***

### Text configuration

The component's default texts can be replaced by using a file `JSON` of custom language referenced in the property `language` in the SDK Provider element (`facephi-sdk-provider`).

```jsx
<facephi-sdk-provider
  language={'/i18n/custom-strings.json'}
  ...
></facephi-sdk-provider>
```

If any string is missing, the widget will not load any text in that place.

See the information regarding literal configuration in the [SDK Web customization](/docs.facephi-en/sdks/sdk-mobile/android-sdk/personalizacion.md).

***

### Customization of graphic resources

The file loading animation can be replaced using the property [customAnimations](/docs.facephi-en/sdks/sdk-web/componentes/sdk-provider/propiedades/customanimations.md) in the SDK Provider with a path to the file in the attribute `loadingFile` of `fileUploader`.

```jsx
<facephi-sdk-provider
  customAnimations={{
    fileUploader: {
      loadingFile: '/assets/anim/loading-file.gif',
    }
  }}
  ...
></facephi-sdk-provider>
```