### File

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

### Description

See demo

../../iframe.html?id=file-uploader--basic

### Metadata

providers | `{ provide: NG_VALUE_ACCESSOR, useExisting: FileUploader, multi: true }`
selector | `ibm-file-uploader`
template |
    <ng-container *ngIf="!skeleton; else skeletonTemplate">
    	<label [for]="fileUploaderId" class="bx--file--label">{{title}}</label>
    	<p class="bx--label-description">{{description}}</p>
    	<div class="bx--file">
    		<label *ngIf="drop" class="bx--file-browse-btn">
    			<div
    				class="bx--file__drop-container"
    				[ngClass]="{'bx--file__drop-container--drag-over': dragOver}"
    				role="button"
    				(click)="fileInput.click()"
    				[attr.for]="fileUploaderId"
    				(dragover)="onDragOver($event)"
    				(dragleave)="onDragLeave($event)"
    				(drop)="onDrop($event)">
    				<ng-container *ngIf="!isTemplate(dropText)">{{dropText}}</ng-container>
    				<ng-template *ngIf="isTemplate(dropText)" [ngTemplateOutlet]="dropText"></ng-template>
    			</div>
    		</label>
    		<button
    			*ngIf="!drop"
    			type="button"
    			[ibmButton]="buttonType"
    			(click)="fileInput.click()"
    			[attr.for]="fileUploaderId"
    			[size]="size">
    			{{buttonText}}
    		</button>
    		<input
    			#fileInput
    			type="file"
    			class="bx--file-input"
    			[accept]="accept"
    			[id]="fileUploaderId"
    			[multiple]="multiple"
    			tabindex="-1"
    			(change)="onFilesAdded()"/>
    		<div class="bx--file-container">
    			<div *ngFor="let fileItem of files">
    				<ibm-file [fileItem]="fileItem" (remove)="removeFile(fileItem)"></ibm-file>
    				<div *ngIf="fileItem.invalid" class="bx--form-requirement">
    					{{fileItem.invalidText}}
    				</div>
    			</div>
    		</div>
    	</div>
    </ng-container>

    <ng-template #skeletonTemplate>
    	<div class="bx--skeleton__text" style="width: 100px"></div>
    	<div class="bx--skeleton__text" style="width: 225px"></div>
    	<button ibmButton skeleton="true"></button>
    </ng-template>

### Index

###### Properties
Public dragOver fileInput Static fileUploaderCount Protected onChangeCallback Protected onTouchedCallback
###### Methods
createFileItem Public isTemplate onBlur onDragLeave onDragOver onDrop onFilesAdded registerOnChange registerOnTouched removeFile writeValue
###### Inputs
accept buttonText buttonType description drop dropText files fileUploaderId multiple size skeleton title
###### Outputs
filesChange
###### Accessors
value fileList

### Constructor

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

### Inputs

`accept` | Specify the types of files that the input should be able to receive Default value : `[]`
Defined in src/file-uploader/file-uploader.component.ts:111

`buttonText` | Accessible text for the button that opens the upload window. Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service Default value : `this.i18n.get().FILE_UPLOADER.OPEN`
Defined in src/file-uploader/file-uploader.component.ts:95

`buttonType` | Type set for button Type : `"primary" | "secondary" | "tertiary" | "ghost" | "danger"` Default value : `"primary"`
Defined in src/file-uploader/file-uploader.component.ts:99

`description` | Text set to the description Type : `string`
Defined in src/file-uploader/file-uploader.component.ts:107

`drop` | Set to `true` to enable drag and drop. Default value : `false`
Defined in src/file-uploader/file-uploader.component.ts:129

`dropText` | Sets the text shown in drag and drop box. Type : `string | TemplateRef<any>`
Defined in src/file-uploader/file-uploader.component.ts:133

`files` | The list of files that have been submitted to be uploaded Type : `Set` Default value : `new Set<FileItem>()`
Defined in src/file-uploader/file-uploader.component.ts:145

`fileUploaderId` | Provides a unique id for the underlying node Default value : ``file-uploader-${FileUploader.fileUploaderCount}``
Defined in src/file-uploader/file-uploader.component.ts:137

`multiple` | Set to `false` to tell the component to only accept a single file on upload. Defaults to `true`. Accepts multiple files. Default value : `true`
Defined in src/file-uploader/file-uploader.component.ts:117

`size` | Sets the size of the button. Type : `"sm" | "normal"`
Defined in src/file-uploader/file-uploader.component.ts:125

`skeleton` | Set to `true` for a loading file uploader. Default value : `false`
Defined in src/file-uploader/file-uploader.component.ts:121

`title` | Text set to the title Type : `string`
Defined in src/file-uploader/file-uploader.component.ts:103

### Outputs

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

### Methods

createFileItem
`createFileItem(file)`
Defined in src/file-uploader/file-uploader.component.ts:191
Parameters :
Name | Optional
file | No
Returns : `FileItem`

Public isTemplate
`isTemplate(value)`
Defined in src/file-uploader/file-uploader.component.ts:255
Parameters :
Name | Optional
value | No
Returns : `boolean`

onBlur
`onBlur()`
Defined in src/file-uploader/file-uploader.component.ts:174
Returns : `void`

onDragLeave
`onDragLeave(event)`
Defined in src/file-uploader/file-uploader.component.ts:220
Parameters :
Name | Optional
event | No
Returns : `void`

onDragOver
`onDragOver(event)`
Defined in src/file-uploader/file-uploader.component.ts:214
Parameters :
Name | Optional
event | No
Returns : `void`

onDrop
`onDrop(event)`
Defined in src/file-uploader/file-uploader.component.ts:226
Parameters :
Name | Optional
event | No
Returns : `void`

onFilesAdded
`onFilesAdded()`
Defined in src/file-uploader/file-uploader.component.ts:201
Returns : `void`

registerOnChange
`registerOnChange(fn: any)`
Defined in src/file-uploader/file-uploader.component.ts:268
Sets a method in order to propagate changes back to the form. Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

registerOnTouched
`registerOnTouched(fn: any)`
Defined in src/file-uploader/file-uploader.component.ts:262
Registers the injected function to control the touch use of the `FileUploader`. Parameters :
Name | Type | Optional
fn | `any` | No
Returns : `void`

removeFile
`removeFile(fileItem)`
Defined in src/file-uploader/file-uploader.component.ts:249
Parameters :
Name | Optional
fileItem | No
Returns : `void`

writeValue
`writeValue(value: Set)`
Defined in src/file-uploader/file-uploader.component.ts:185
Propagates the injected `value`. Parameters :
Name | Type | Optional
value | `Set<FileItem>` | No
Returns : `void`

### Properties

Public dragOver
`dragOver: ```
Default value : `false`
Defined in src/file-uploader/file-uploader.component.ts:152
Controls the state of the drag and drop file container

fileInput
`fileInput: ```
Decorators : `@ViewChild('fileInput')`
Defined in src/file-uploader/file-uploader.component.ts:141
Maintains a reference to the view DOM element of the underlying node

Static fileUploaderCount
`fileUploaderCount: `number``
Type : `number`
Default value : `0`
Defined in src/file-uploader/file-uploader.component.ts:89
Counter used to create unique ids for file-uploader components

Protected onChangeCallback
`onChangeCallback: `function``
Type : `function`
Default value : `noop`
Defined in src/file-uploader/file-uploader.component.ts:155

Protected onTouchedCallback
`onTouchedCallback: `function``
Type : `function`
Default value : `noop`
Defined in src/file-uploader/file-uploader.component.ts:154

### Accessors

value
get `value()`
Defined in src/file-uploader/file-uploader.component.ts:164
Specifies the property to be used as the return value to `ngModel` Returns : `Set<FileItem>`
set `value(v)`
Defined in src/file-uploader/file-uploader.component.ts:167
Parameters :
Name | Optional
v | No
Returns : `void`

fileList
get `fileList()`
Defined in src/file-uploader/file-uploader.component.ts:178

    import {
    	Component,
    	Input,
    	Output,
    	ViewChild,
    	EventEmitter,
    	TemplateRef
    } from "@angular/core";
    import { NG_VALUE_ACCESSOR } from "@angular/forms";

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

    const noop = () => { };

    /**
     * [See demo](../../?path=/story/file-uploader--basic)
     *
     * <example-url>../../iframe.html?id=file-uploader--basic</example-url>
     */
    @Component({
    	selector: "ibm-file-uploader",
    	template: `
    		<ng-container *ngIf="!skeleton; else skeletonTemplate">
    			<label [for]="fileUploaderId" class="bx--file--label">{{title}}</label>
    			<p class="bx--label-description">{{description}}</p>
    			<div class="bx--file">
    				<label *ngIf="drop" class="bx--file-browse-btn">
    					<div
    						class="bx--file__drop-container"
    						[ngClass]="{'bx--file__drop-container--drag-over': dragOver}"
    						role="button"
    						(click)="fileInput.click()"
    						[attr.for]="fileUploaderId"
    						(dragover)="onDragOver($event)"
    						(dragleave)="onDragLeave($event)"
    						(drop)="onDrop($event)">
    						<ng-container *ngIf="!isTemplate(dropText)">{{dropText}}</ng-container>
    						<ng-template *ngIf="isTemplate(dropText)" [ngTemplateOutlet]="dropText"></ng-template>
    					</div>
    				</label>
    				<button
    					*ngIf="!drop"
    					type="button"
    					[ibmButton]="buttonType"
    					(click)="fileInput.click()"
    					[attr.for]="fileUploaderId"
    					[size]="size">
    					{{buttonText}}
    				</button>
    				<input
    					#fileInput
    					type="file"
    					class="bx--file-input"
    					[accept]="accept"
    					[id]="fileUploaderId"
    					[multiple]="multiple"
    					tabindex="-1"
    					(change)="onFilesAdded()"/>
    				<div class="bx--file-container">
    					<div *ngFor="let fileItem of files">
    						<ibm-file [fileItem]="fileItem" (remove)="removeFile(fileItem)"></ibm-file>
    						<div *ngIf="fileItem.invalid" class="bx--form-requirement">
    							{{fileItem.invalidText}}
    						</div>
    					</div>
    				</div>
    			</div>
    		</ng-container>

    		<ng-template #skeletonTemplate>
    			<div class="bx--skeleton__text" style="width: 100px"></div>
    			<div class="bx--skeleton__text" style="width: 225px"></div>
    			<button ibmButton skeleton="true"></button>
    		</ng-template>
    	`,
    	providers: [
    		{
    			provide: NG_VALUE_ACCESSOR,
    			useExisting: FileUploader,
    			multi: true
    		}
    	]
    })
    export class FileUploader {
    	/**
    	 * Counter used to create unique ids for file-uploader components
    	 */
    	static fileUploaderCount = 0;
    	/**
    	 * Accessible text for the button that opens the upload window.
    	 *
    	 * Defaults to the `FILE_UPLOADER.OPEN` value from the i18n service
    	 */
    	@Input() buttonText = this.i18n.get().FILE_UPLOADER.OPEN;
    	/**
    	 * Type set for button
    	 */
    	@Input() buttonType: "primary" | "secondary" | "tertiary" | "ghost" | "danger" = "primary";
    	/**
    	 * Text set to the title
    	 */
    	@Input() title: string;
    	/**
    	 * Text set to the description
    	 */
    	@Input() description: string;
    	/**
    	 * Specify the types of files that the input should be able to receive
    	 */
    	@Input() accept = [];
    	/**
    	 * Set to `false` to tell the component to only accept a single file on upload.
    	 *
    	 * Defaults to `true`. Accepts multiple files.
    	 */
    	@Input() multiple = true;
    	/**
    	 * Set to `true` for a loading file uploader.
    	 */
    	@Input() skeleton = false;
    	/**
    	 * Sets the size of the button.
    	 */
    	@Input() size: "sm" | "normal";
    	/**
    	 * Set to `true` to enable drag and drop.
    	 */
    	@Input() drop = false;
    	/**
    	 * Sets the text shown in drag and drop box.
    	 */
    	@Input() dropText: string | TemplateRef<any>;
    	/**
    	 * Provides a unique id for the underlying <input> node
    	 */
    	@Input() fileUploaderId = `file-uploader-${FileUploader.fileUploaderCount}`;
    	/**
    	 * Maintains a reference to the view DOM element of the underlying <input> node
    	 */
    	@ViewChild("fileInput") fileInput;
    	/**
    	 * The list of files that have been submitted to be uploaded
    	 */
    	@Input() files = new Set<FileItem>();

    	@Output() filesChange = new EventEmitter<any>();

    	/**
    	 * Controls the state of the drag and drop file container
    	 */
    	public dragOver = false;

    	protected onTouchedCallback: () => void = noop;
    	protected onChangeCallback: (_: Set<FileItem>) => void = noop;

    	constructor(protected i18n: I18n) {
    		FileUploader.fileUploaderCount++;
    	}

    	/**
    	 * Specifies the property to be used as the return value to `ngModel`
    	 */
    	get value(): Set<FileItem> {
    		return this.files;
    	}
    	set value(v: Set<FileItem>) {
    		if (v !== this.files) {
    			this.files = v;
    			this.onChangeCallback(v);
    		}
    	}

    	onBlur() {
    		this.onTouchedCallback();
    	}

    	get fileList() {
    		return Array.from(this.fileInput.nativeElement.files);
    	}

    	/**
    	 * Propagates the injected `value`.
    	 */
    	writeValue(value: Set<FileItem>) {
    		if (value !== this.value) {
    			this.files = value;
    		}
    	}

    	createFileItem(file): FileItem {
    		return {
    			uploaded: false,
    			state: "edit",
    			invalid: false,
    			invalidText: "",
    			file: file
    		};
    	}

    	onFilesAdded() {
    		if (!this.multiple) {
    			this.files.clear();
    		}
    		for (let file of this.fileList) {
    			const fileItem = this.createFileItem(file);
    			this.files.add(fileItem);
    			this.filesChange.emit(this.files);
    		}

    		this.value = this.files;
    	}

    	onDragOver(event) {
    		event.stopPropagation();
    		event.preventDefault();
    		this.dragOver = true;
    	}

    	onDragLeave(event) {
    		event.stopPropagation();
    		event.preventDefault();
    		this.dragOver = false;
    	}

    	onDrop(event) {
    		event.stopPropagation();
    		event.preventDefault();

    		const transferredFiles = Array.from(event.dataTransfer.files);

    		transferredFiles.filter(({ name, type }) => {
    			// Get the file extension and add a "." to the beginning.
    			const fileExtension = name.split(".").pop().replace(/^/, ".");
    			// Check if the accept array contains the mime type or extension of the file.
    			return this.accept.includes(type) || this.accept.includes(fileExtension) || !this.accept.length;
    		}).forEach(file => {
    			if (!this.files.size || this.multiple) {
    				const fileItem = this.createFileItem(file);
    				this.files.add(fileItem);
    				this.filesChange.emit(this.files);
    			}
    		});

    		this.value = this.files;
    		this.dragOver = false;
    	}

    	removeFile(fileItem) {
    		this.files.delete(fileItem);
    		this.fileInput.nativeElement.value = "";
    		this.filesChange.emit(this.files);
    	}

    	public isTemplate(value) {
    		return value instanceof TemplateRef;
    	}

    	/**
    	 * Registers the injected function to control the touch use of the `FileUploader`.
    	 */
    	registerOnTouched(fn: any) {
    		this.onTouchedCallback = fn;
    	}
    	/**
    	 * Sets a method in order to propagate changes back to the form.
    	 */
    	registerOnChange(fn: any) {
    		this.onChangeCallback = fn;
    	}
    }

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""