import { Component, ViewEncapsulation } from '@angular/core'; import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-root', template: ` <h2>Select Files</h2> <eui-panel style="width:600px"> <eui-panel-header> <eui-filebutton accept="image/*" style="width:80px" [multiple]="true" [autoUpload]="false" (select)="onFileSelect($event)">Select Files...</eui-filebutton> <eui-linkbutton (click)="files=[]" style="width:80px">Clear</eui-linkbutton> </eui-panel-header> <eui-datalist [data]="files" [border]="false" style="min-height:100px"> <ng-template euiItemTemplate let-row> <div class="fileitem"> <img [src]="row.url"> <div class="name">{{row.name}}</div> <div class="size">{{row.size}}</div> <eui-linkbutton iconCls="icon-clear" [plain]="true" (click)="removeFile(row)"></eui-linkbutton> </div> </ng-template> </eui-datalist> </eui-panel> `, styles: [` .fileitem{ height: 70px; padding: 10px; font-size: 14px; display: flex; align-items: center; } .fileitem img{ width: 50px; height: 50px; } .fileitem .name{ margin: 0 20px; flex: 1; } .fileitem .size{ margin: 0 20px; text-align: right; } `], encapsulation: ViewEncapsulation.None }) export class AppComponent { files: File[] = []; constructor(private sanitizer: DomSanitizer){} onFileSelect(event){ event.forEach((file) => { file.url = this.sanitizer.bypassSecurityTrustUrl((window.URL.createObjectURL(file))); }); this.files = this.files.concat(event); } removeFile(file){ let index = this.files.indexOf(file); if (index >= 0){ this.files = this.files.filter((file,i) => i != index); } } }
import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { EasyUIModule } from 'easyui/easyui/easyui.module'; import { AppComponent } from './app.component'; @NgModule({ bootstrap: [ AppComponent ], declarations: [ AppComponent ], imports: [ FormsModule, BrowserModule, HttpModule, EasyUIModule ] }) export class AppModule { }
import { enableProdMode } from '@angular/core'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { AppModule } from './app.module'; enableProdMode(); platformBrowserDynamic().bootstrapModule(AppModule);