angular-material-app documentation
  1. Components
  2. FileUploadComponent

File

src/app/component/file-upload/file-upload.component.ts

Metadata

encapsulation ViewEncapsulation.None
host {
}
moduleId module.id
selector stbui-file-upload
styleUrls ./file-upload.component.scss
templateUrl ./file-upload.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(sanitizer: DomSanitizer, fileUploadService: FileUploadService, firebaseService: FirebaseService)
Defined in src/app/component/file-upload/file-upload.component.ts:39
Parameters :
Name Type Optional
sanitizer DomSanitizer No
fileUploadService FileUploadService No
firebaseService FirebaseService No

Inputs

accept
Defined in src/app/component/file-upload/file-upload.component.ts:28
maxFileSize
Defined in src/app/component/file-upload/file-upload.component.ts:29
url
Defined in src/app/component/file-upload/file-upload.component.ts:30
useFirebase
Type : boolean
Default value : false
Defined in src/app/component/file-upload/file-upload.component.ts:27

Outputs

onBeforeUpload
Type : EventEmitter
Defined in src/app/component/file-upload/file-upload.component.ts:32
onChange
Type : EventEmitter
Defined in src/app/component/file-upload/file-upload.component.ts:31
onRemove
Type : EventEmitter
Defined in src/app/component/file-upload/file-upload.component.ts:34
onUpload
Type : EventEmitter
Defined in src/app/component/file-upload/file-upload.component.ts:33

Methods

onFileSelect
onFileSelect(event)
Defined in src/app/component/file-upload/file-upload.component.ts:51
Parameters :
Name Optional
event No
Returns : void
removePreview
removePreview()
Defined in src/app/component/file-upload/file-upload.component.ts:47
Returns : void

Properties

currentFile
Defined in src/app/component/file-upload/file-upload.component.ts:36
fileName
Type : string
Defined in src/app/component/file-upload/file-upload.component.ts:39
previewUrl
Defined in src/app/component/file-upload/file-upload.component.ts:37
progress
Type : number
Defined in src/app/component/file-upload/file-upload.component.ts:38
 
import {
  Component,
  Input,
  Output,
  ViewEncapsulation,
  EventEmitter
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { FileUploadService } from './file-upload.service';
import { FirebaseService } from './firebase.service';
@Component({
  moduleId: module.id,
  selector: 'stbui-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.scss'],
  encapsulation: ViewEncapsulation.None,
  host: {
    class: 'stbui-upload'
  }
})
export class FileUploadComponent {
  @Input() useFirebase: boolean = false;
  @Input() accept;
  @Input() maxFileSize;
  @Input() url;
  @Output() onChange = new EventEmitter();
  @Output() onBeforeUpload = new EventEmitter();
  @Output() onUpload = new EventEmitter();
  @Output() onRemove = new EventEmitter();

  currentFile;
  previewUrl;
  progress: number;
  fileName: string;

  constructor(
    private sanitizer: DomSanitizer,
    private fileUploadService: FileUploadService,
    private firebaseService: FirebaseService
  ) {}

  removePreview() {
    this.previewUrl = null;
  }

  onFileSelect(event) {
    if (this.useFirebase) {
      this.firebaseService.startUpload(event);
    } else {
      this.firebaseService.startUpload(event);
    }
  }
}
Copy
<div class="stbui-upload-container">
  <div class="stbui-upload-select" *ngIf="!previewUrl">
    <mat-icon class="stbui-upload-icon">add</mat-icon>
    <div class="stbui-upload-text">Upload</div>
    <div class="stbui-upload-inner">
      <input type="file" class="stbui-upload-input" (change)="onFileSelect($event)">
    </div>
  </div>

  <div class="stbui-upload-preview" (click)="removePreview()" *ngIf="previewUrl">
    <img [src]="this.previewUrl" />
  </div>

</div>
Copy

./file-upload.component.scss 

.stbui-upload {
  display: inline-block;
  vertical-align: top;
  &-container {
    position: relative;
    border-radius: 5px;
    border: 1px dashed #d9d9d9;
   
  }
  &-select {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 128px;
    height: 128px;
  }
  &-icon {
    height: 32px;
    width: 32px;
    font-size: 32px;
    color: #999;
  }
  &-text {
    margin-top: 8px;
    color: #666;
  }
  &-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  &-input {
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
  }
  &-preview {
    width: 128px;
    height: 128px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""