@covalent/file-upload v0.9.1
td-file-upload
Usage
Add the element wherever you want to bind a File | FileList into a class model without additional elements.
Can also drop a file(s) into the 'Choose a File...' button to bind the file(s) to it.
Example for usage:
<td-file-upload defaultColor="accent" activeColor="warn" cancelColor="primary"
(upload)="uploadEvent($event)" accept=".ext,.anotherExt" [disabled]="disabled" multiple>
</td-file-upload>
import { TdFileUploadComponent } from '@covalent/file-upload';
...
directives: [ TdFileUploadComponent ]
})
export class Demo {
disabled: boolean = false;
uploadEvent(files: FileList | File): void {
if (files instanceof FileList) {
...
} else {
...
}
};
}
API Summary
Properties:
Name | Type | Description |
---|---|---|
defaultColor | string | Sets browse button color. Uses same color palette accepted as mdButton and defaults to 'primary'. |
activeColor | string | Sets upload button color. Uses same color palette accepted as mdButton and defaults to 'accent'. |
cancelColor | string | Sets cancel button color. Uses same color palette accepted as mdButton and defaults to 'warn'. |
multiple | boolean | Sets if multiple files can be dropped/selected at once in TdFileUploadComponent. |
accept | string | Sets files accepted when opening the file browser dialog. Same as "accept" attribute in <input/> element. |
disabled | boolean | Disables TdFileUploadComponent and clears selected/dropped files. |
upload | function($event) | Event emitted when upload button is clicked. Emits a File or FileList object. |
Setup
Import the CovalentFileModule using the forRoot() method in your NgModule:
import { HttpModule } from '@angular/http';
import { CovalentFileModule } from '@covalent/file-upload';
@NgModule({
imports: [
HttpModule, /* or CovalentCoreModule.forRoot() */
CovalentFileModule.forRoot(),
...
],
...
})
export class MyModule {}
tdFileSelect
Usage
Add the directive wherever you want to bind a File | FileList into a class model to an existing element.
Uses optional (ngModel) directive to bind file. (if (ngModel) exists, fileSelect is omitted)
Example for usage:
<input type="file" tdFileSelect [(ngModel)]="files" multiple>
API Summary
Properties:
Name | Type | Description |
---|---|---|
multiple | boolean | Sets whether multiple files can be selected at once in host element, or just a single file. Can also be "multiple" native attribute. |
fileSelect | function($event) | Event emitted when a file or files are selected in host HTMLInputElement. Emits a FileList or File object. Alternative to not use (ngModel). |
tdFileDrop
Usage
Add the directive wherever you want to add drop support to an element to bind a File | FileList into a class model.
To add effect when ongragenter event is executed, override .drop-zone class in the context you are using it.
Note: if element has child elements, add * { pointer-events: none; } to avoid event being thrown again while navigating in child elements.
Example for usage:
<div tdFileDrop (fileDrop)="files = $event" multiple [disabled]="disabled">
</div>
API Summary
Properties:
Name | Type | Description |
---|---|---|
multiple | boolean | Sets whether multiple files can be dropped at once in host element, or just a single file. Can also be "multiple" native attribute. |
disabled | boolean | Disabled drop events for host element. |
fileDrop | function($event) | Event emitted when a file or files are dropped in host element after being validated. Emits a FileList or File object. |
tdFileService
Usage
Service provided with methods that wrap complexity for as easier file upload experience.
Recieves as parameter an object that implements the IUploadOptions interface.
interface IUploadOptions {
url: string;
method: 'post' | 'put';
file: File;
headers?: {[key: string]: string}
}
Example for usage:
import { TdFileService, IUploadOptions } from '@covalent/file-upload';
...
providers: [ TdFileService ]
})
export class Demo {
file: File;
constructor(private fileUploadService: TdFileService){
};
uploadEvent1(file: File) {
let options: IUploadOptions = {
url: 'https://url.to/API',
method: 'post',
file: file
};
this.fileService.upload(options).subscribe((response) => {
...
});
};
}
API Summary
Methods:
Name | Type | Description |
---|---|---|
upload | function(IUploadState) | Uses underlying XMLHttpRequest to upload a file to a url. Will be depricated when angular2 fixes Http to allow FormData as body. |