### File

`src/file-uploader/file.component.ts`

### Metadata

selector | `ibm-file`
template |
    <p class="bx--file-filename">{{fileItem.file.name}}</p>
    <span
    	*ngIf="fileItem.state === 'edit'"
    	class="bx--file__state-container"
    	(click)="remove.emit()"
    	(keyup.enter)="remove.emit()"
    	(keyup.space)="remove.emit()"
    	tabindex="0">
    	<ibm-icon-warning-filled16
    		*ngIf="isInvalidText"
    		class="bx--file--invalid">
    	</ibm-icon-warning-filled16>
    	<ibm-icon-close16
    		class="bx--file-close"
    		[ariaLabel]="translations.REMOVE_BUTTON">
    	</ibm-icon-close16>
    </span>
    <span *ngIf="fileItem.state === 'upload'">
    	<div class="bx--inline-loading__animation">
    		<ibm-loading size="sm"></ibm-loading>
    	</div>
    </span>
    <span
    	*ngIf="fileItem.state === 'complete'"
    	class="bx--file__state-container"
    	tabindex="0">
    	<ibm-icon-checkmark-filled16
    		class="bx--file-complete"
    		[ariaLabel]="translations.CHECKMARK">
    	</ibm-icon-checkmark-filled16>
    </span>

### Index

###### Inputs
fileItem translations
###### Outputs
remove
###### HostBindings
class.bx--file__selected-file class.bx--file__selected-file--invalid

### Constructor

`constructor(i18n: I18n)`
Defined in src/file-uploader/file.component.ts:64
Parameters :
Name | Type | Optional
i18n | `I18n` | No

### Inputs

`fileItem` | A single `FileItem` from the set of `FileItem`s Type : `FileItem`
Defined in src/file-uploader/file.component.ts:56

`translations` | Accessible translations for the close and complete icons Default value : `this.i18n.get().FILE_UPLOADER`
Defined in src/file-uploader/file.component.ts:52

### Outputs

`remove` | `$event` Type: `EventEmitter`
Defined in src/file-uploader/file.component.ts:58

### HostBindings

class.bx--file__selected-file
`class.bx--file__selected-file: ```
Default value : `true`
Defined in src/file-uploader/file.component.ts:60

class.bx--file__selected-file--invalid
`class.bx--file__selected-file--invalid: ```
Defined in src/file-uploader/file.component.ts:62

    import {
    	Component,
    	Input,
    	Output,
    	EventEmitter,
    	HostBinding
    } from "@angular/core";

    import { I18n } from "../i18n/i18n.module";
    import { FileItem } from "./file-item.interface";

    @Component({
    	selector: "ibm-file",
    	template: `
    		<p class="bx--file-filename">{{fileItem.file.name}}</p>
    		<span
    			*ngIf="fileItem.state === 'edit'"
    			class="bx--file__state-container"
    			(click)="remove.emit()"
    			(keyup.enter)="remove.emit()"
    			(keyup.space)="remove.emit()"
    			tabindex="0">
    			<ibm-icon-warning-filled16
    				*ngIf="isInvalidText"
    				class="bx--file--invalid">
    			</ibm-icon-warning-filled16>
    			<ibm-icon-close16
    				class="bx--file-close"
    				[ariaLabel]="translations.REMOVE_BUTTON">
    			</ibm-icon-close16>
    		</span>
    		<span *ngIf="fileItem.state === 'upload'">
    			<div class="bx--inline-loading__animation">
    				<ibm-loading size="sm"></ibm-loading>
    			</div>
    		</span>
    		<span
    			*ngIf="fileItem.state === 'complete'"
    			class="bx--file__state-container"
    			tabindex="0">
    			<ibm-icon-checkmark-filled16
    				class="bx--file-complete"
    				[ariaLabel]="translations.CHECKMARK">
    			</ibm-icon-checkmark-filled16>
    		</span>
    	`
    })
    export class FileComponent {
    	/**
    	 * Accessible translations for the close and complete icons
    	 */
    	@Input() translations = this.i18n.get().FILE_UPLOADER;
    	/**
    	 * A single `FileItem` from the set of `FileItem`s
    	 */
    	@Input() fileItem: FileItem;

    	@Output() remove = new EventEmitter();

    	@HostBinding("class.bx--file__selected-file") selectedFile = true;

    	@HostBinding("class.bx--file__selected-file--invalid") get isInvalidText() {
    		return this.fileItem.invalidText;
    	}

    	constructor(protected i18n: I18n) {}
    }

    // compatibility export
    // TODO: remove in v4
    // tslint:disable-next-line: variable-name
    export const File = FileComponent;

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""