Perfect component for file selection and upload in simple flows. Uses TdFileInputComponent
internally.
Example for usage:
<td-file-upload #fileUpload [(ngModel)]="files" defaultColor="accent" activeColor="warn" cancelColor="primary" (select)="selectEvent($event)" (upload)="uploadEvent($event)" (cancel)="cancelEvent()" accept=".ext,.anotherExt" [disabled]="disabled" multiple> <mat-icon>file_upload</mat-icon><span>{{ files?.name }}</span> <ng-template td-file-input-label> <mat-icon>attach_file</mat-icon> <span> Choose a file... </span> </ng-template> </td-file-upload>
export class Demo { files: File | FileList; disabled: boolean = false; selectEvent(files: FileList | File): void { if (files instanceof FileList) { ... } else { ... } } uploadEvent(files: FileList | File): void { if (files instanceof FileList) { ... } else { ... } } cancelEvent(): void { ... } }
<input/>
element.Import the [CovalentFileModule] in your NgModule:
import { CovalentFileModule } from '@covalent/core/file'; @NgModule({ imports: [ CovalentFileModule, ... ], ... }) export class MyModule {}
Service provided with methods that wrap complexity for as easier file upload experience.
Recieves as parameter an object that implements the [IUploadOptions] interface. You have to assign a value either to [file]
or to [formData]
. If [file]
is assigned then [formData]
will be ignored; when only [formData]
is assigned then it will be sent as form data.
interface IUploadOptions { url: string; method: 'post' | 'put'; file?: File; headers?: {[key: string]: string}; formData?: FormData; }
Example for usage:
import { TdFileService, IUploadOptions } from '@covalent/core/file'; ... 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) => { ... }); }; }