[@rxap/upload](../wiki/globals) / UploadButtonComponent

# Class: UploadButtonComponent

Defined in: [upload-button/upload-button.component.ts:70](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L70)

## Implements

- `ControlValueAccessor`
- `MatFormFieldControl`\<`File`\>
- `OnDestroy`

## Constructors

### new UploadButtonComponent()

> **new UploadButtonComponent**(): [`UploadButtonComponent`](../wiki/Class.UploadButtonComponent)

Defined in: [upload-button/upload-button.component.ts:137](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L137)

#### Returns

[`UploadButtonComponent`](../wiki/Class.UploadButtonComponent)

## Properties

### accept

> **accept**: `InputSignal`\<`string` \| `string`[]\>

Defined in: [upload-button/upload-button.component.ts:74](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L74)

***

### acceptAttribute

> `readonly` **acceptAttribute**: `Signal`\<`string` \| `InputSignal`\<`string` \| `string`[]\>\>

Defined in: [upload-button/upload-button.component.ts:76](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L76)

***

### allowDownload

> **allowDownload**: `InputSignal`\<`boolean`\>

Defined in: [upload-button/upload-button.component.ts:78](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L78)

***

### autofilled?

> `optional` **autofilled**: `boolean`

Defined in: [upload-button/upload-button.component.ts:97](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L97)

Whether the input is currently in an autofilled state. If property is not present on the
control it is assumed to be false.

#### Implementation of

`MatFormFieldControl.autofilled`

***

### controlType?

> `optional` **controlType**: `string` = `'rxap-upload-button'`

Defined in: [upload-button/upload-button.component.ts:98](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L98)

An optional name for the control type that can be used to distinguish `mat-form-field` elements
based on their control type. The form field will add a class,
`mat-form-field-type-{{controlType}}` to its root element.

#### Implementation of

`MatFormFieldControl.controlType`

***

### disabled

> **disabled**: `boolean` = `false`

Defined in: [upload-button/upload-button.component.ts:96](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L96)

Whether the control is disabled.

#### Implementation of

`MatFormFieldControl.disabled`

***

### errorState

> **errorState**: `boolean` = `false`

Defined in: [upload-button/upload-button.component.ts:99](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L99)

Whether the control is in an error state.

#### Implementation of

`MatFormFieldControl.errorState`

***

### focused

> **focused**: `boolean` = `false`

Defined in: [upload-button/upload-button.component.ts:100](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L100)

Whether the control is focused.

#### Implementation of

`MatFormFieldControl.focused`

***

### isImageUploaded

> **isImageUploaded**: `WritableSignal`\<`boolean`\>

Defined in: [upload-button/upload-button.component.ts:82](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L82)

***

### ngControl

> `readonly` **ngControl**: `null` \| `NgControl`

Defined in: [upload-button/upload-button.component.ts:107](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L107)

Gets the AbstractControlDirective for this control.

#### Implementation of

`MatFormFieldControl.ngControl`

***

### positions

> **positions**: `ConnectedPosition`[]

Defined in: [upload-button/upload-button.component.ts:83](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L83)

***

### required

> **required**: `boolean` = `false`

Defined in: [upload-button/upload-button.component.ts:102](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L102)

Whether the control is required.

#### Implementation of

`MatFormFieldControl.required`

***

### shouldLabelFloat

> **shouldLabelFloat**: `boolean` = `true`

Defined in: [upload-button/upload-button.component.ts:103](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L103)

Whether the `MatFormField` label should try to float.

#### Implementation of

`MatFormFieldControl.shouldLabelFloat`

***

### snackBar

> `readonly` **snackBar**: `MatSnackBar`

Defined in: [upload-button/upload-button.component.ts:131](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L131)

***

### stateChanges

> **stateChanges**: `Subject`\<`void`\>

Defined in: [upload-button/upload-button.component.ts:104](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L104)

Stream that emits whenever the state of the control changes such that the parent `MatFormField`
needs to run change detection.

#### Implementation of

`MatFormFieldControl.stateChanges`

***

### touched

> **touched**: `boolean` = `false`

Defined in: [upload-button/upload-button.component.ts:92](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L92)

***

### uploaded

> **uploaded**: `OutputEmitterRef`\<`File`\>

Defined in: [upload-button/upload-button.component.ts:80](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L80)

***

### userAriaDescribedBy?

> `optional` **userAriaDescribedBy**: `string`

Defined in: [upload-button/upload-button.component.ts:105](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L105)

Value of `aria-describedby` that should be merged with the described-by ids
which are set by the form-field.

#### Implementation of

`MatFormFieldControl.userAriaDescribedBy`

***

### value

> **value**: `null` \| `File` = `null`

Defined in: [upload-button/upload-button.component.ts:106](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L106)

The value of the control.

#### Implementation of

`MatFormFieldControl.value`

***

### nextId

> `static` **nextId**: `number` = `0`

Defined in: [upload-button/upload-button.component.ts:72](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L72)

## Accessors

### empty

#### Get Signature

> **get** **empty**(): `boolean`

Defined in: [upload-button/upload-button.component.ts:120](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L120)

Whether the control is empty.

##### Returns

`boolean`

#### Implementation of

`MatFormFieldControl.empty`

***

### id

#### Get Signature

> **get** **id**(): `string`

Defined in: [upload-button/upload-button.component.ts:123](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L123)

The element ID for this control.

##### Returns

`string`

#### Implementation of

`MatFormFieldControl.id`

***

### isImage

#### Get Signature

> **get** **isImage**(): `boolean`

Defined in: [upload-button/upload-button.component.ts:143](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L143)

##### Returns

`boolean`

***

### placeholder

#### Get Signature

> **get** **placeholder**(): `string`

Defined in: [upload-button/upload-button.component.ts:112](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L112)

The placeholder for this control.

##### Returns

`string`

#### Set Signature

> **set** **placeholder**(`plh`): `void`

Defined in: [upload-button/upload-button.component.ts:116](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L116)

The placeholder for this control.

##### Parameters

###### plh

`string`

##### Returns

`void`

#### Implementation of

`MatFormFieldControl.placeholder`

## Methods

### clear()

> **clear**(): `void`

Defined in: [upload-button/upload-button.component.ts:234](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L234)

#### Returns

`void`

***

### download()

> **download**(): `void`

Defined in: [upload-button/upload-button.component.ts:208](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L208)

#### Returns

`void`

***

### ngOnDestroy()

> **ngOnDestroy**(): `void`

Defined in: [upload-button/upload-button.component.ts:160](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L160)

A callback method that performs custom clean-up, invoked immediately
before a directive, pipe, or service instance is destroyed.

#### Returns

`void`

#### Implementation of

`OnDestroy.ngOnDestroy`

***

### onContainerClick()

> **onContainerClick**(`event`): `void`

Defined in: [upload-button/upload-button.component.ts:149](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L149)

Handles a click on the control's container.

#### Parameters

##### event

`MouseEvent`

#### Returns

`void`

#### Implementation of

`MatFormFieldControl.onContainerClick`

***

### onFileInputChange()

> **onFileInputChange**(`$event`): `void`

Defined in: [upload-button/upload-button.component.ts:219](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L219)

#### Parameters

##### $event

`any`

#### Returns

`void`

***

### onFocusIn()

> **onFocusIn**(`event`): `void`

Defined in: [upload-button/upload-button.component.ts:189](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L189)

#### Parameters

##### event

`FocusEvent`

#### Returns

`void`

***

### onFocusOut()

> **onFocusOut**(`event`): `void`

Defined in: [upload-button/upload-button.component.ts:197](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L197)

#### Parameters

##### event

`FocusEvent`

#### Returns

`void`

***

### openOverlay()

> **openOverlay**(): `void`

Defined in: [upload-button/upload-button.component.ts:182](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L182)

#### Returns

`void`

***

### registerOnChange()

> **registerOnChange**(`fn`): `void`

Defined in: [upload-button/upload-button.component.ts:164](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L164)

#### Parameters

##### fn

`any`

The callback function to register

#### Returns

`void`

#### Description

Registers a callback function that is called when the control's value
changes in the UI.

This method is called by the forms API on initialization to update the form
model when values propagate from the view to the model.

When implementing the `registerOnChange` method in your own value accessor,
save the given function so your class calls it at the appropriate time.

#### Usage Notes

### Store the change function

The following example stores the provided function as an internal method.

```ts
registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}
```

When the value changes in the UI, call the registered
function to allow the forms API to update itself:

```ts
host: {
   '(change)': '_onChange($event.target.value)'
}
```

#### Implementation of

`ControlValueAccessor.registerOnChange`

***

### registerOnTouched()

> **registerOnTouched**(`fn`): `void`

Defined in: [upload-button/upload-button.component.ts:168](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L168)

#### Parameters

##### fn

`any`

The callback function to register

#### Returns

`void`

#### Description

Registers a callback function that is called by the forms API on initialization
to update the form model on blur.

When implementing `registerOnTouched` in your own value accessor, save the given
function so your class calls it when the control should be considered
blurred or "touched".

#### Usage Notes

### Store the callback function

The following example stores the provided function as an internal method.

```ts
registerOnTouched(fn: any): void {
  this._onTouched = fn;
}
```

On blur (or equivalent), your class should call the registered function to allow
the forms API to update itself:

```ts
host: {
   '(blur)': '_onTouched()'
}
```

#### Implementation of

`ControlValueAccessor.registerOnTouched`

***

### setDescribedByIds()

> **setDescribedByIds**(`ids`): `void`

Defined in: [upload-button/upload-button.component.ts:153](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L153)

Sets the list of element IDs that currently describe this control.

#### Parameters

##### ids

`string`[]

#### Returns

`void`

#### Implementation of

`MatFormFieldControl.setDescribedByIds`

***

### setDisabledState()

> **setDisabledState**(`isDisabled`): `void`

Defined in: [upload-button/upload-button.component.ts:172](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L172)

#### Parameters

##### isDisabled

`boolean`

The disabled status to set on the element

#### Returns

`void`

#### Description

Function that is called by the forms API when the control status changes to
or from 'DISABLED'. Depending on the status, it enables or disables the
appropriate DOM element.

#### Usage Notes

The following is an example of writing the disabled property to a native DOM element:

```ts
setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}
```

#### Implementation of

`ControlValueAccessor.setDisabledState`

***

### writeValue()

> **writeValue**(`file`): `void`

Defined in: [upload-button/upload-button.component.ts:177](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/upload/src/lib/upload-button/upload-button.component.ts#L177)

#### Parameters

##### file

`File`

#### Returns

`void`

#### Description

Writes a new value to the element.

This method is called by the forms API to write to the view when programmatic
changes from model to view are requested.

#### Usage Notes

### Write a value to the element

The following example writes a value to the native DOM element.

```ts
writeValue(value: any): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);
}
```

#### Implementation of

`ControlValueAccessor.writeValue`