# Files

<figure><img src="https://content.gitbook.com/content/gA9J5A1N66u2GrNSZK7X/blobs/X0fWH75JVjYGIWpnTsA7/Screenshot%202568-09-10%20at%2015.07.18.png" alt=""><figcaption></figcaption></figure>

## Configuration <a href="#configuration" id="configuration"></a>

Set up a new instance with `config` parameters and `set`/`get` methods:

```javascript
const files = appmixer.ui.Files(config)

files.set(key, value)
files.get(key)
```

#### **`config.el`** **`...`**

{% hint style="info" %}
Learn about `widget` `config` [here](https://docs.appmixer.com/appmixer-ui-sdk/ui-and-widgets/..#configuration).
{% endhint %}

## Instance <a href="#state" id="state"></a>

{% hint style="info" %}
Learn about `widget` instance [here](https://docs.appmixer.com/appmixer-ui-sdk/ui-and-widgets/..#instance).
{% endhint %}

### State

```javascript
files.state(name, value)
```

#### **`loader`**

Type: `Boolean` | Default: `null`

Toggle a custom loading state.

#### **`error`**

Type: `String` | Default: `null`

Toggle a custom error message.\
\
\&#xNAN;**`query`**

Type: `Object` | Default: `DefaultQuery`

Defines custom query parameters for retrieving files.\
\
**Example:**

```javascript
// Set a custom query.
files.state('query', {
    pattern: 'my custom pattern',
    sort: { uploadDate: -1 }
});

// Listen for query changes triggered by user interaction.
files.on('change:query', query => {
    console.log('Current query:', query);
});
```

### Events <a href="#events" id="events"></a>

```javascript
files.on(event, handler)
```

#### **`flow:open`**

```javascript
files.on('flow:open', flowId => {/* ... */})
```

Triggered when the user selects a flow associated with a file listed in the widget.

## Example

```javascript
const files = appmixer.ui.Files({
    el: '#files'
})

files.open()
```