File
Implements
Metadata
| selector |
app-fileupload |
| styleUrls |
./fileupload.component.scss |
| templateUrl |
./fileupload.component.html |
Methods
|
startUpload
|
startUpload(event: FileList)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
FileList
|
No
|
|
|
toggleHover
|
toggleHover(event: boolean)
|
|
|
Parameters :
| Name |
Type |
Optional |
| event |
boolean
|
No
|
|
|
downloadURL
|
Type : Observable<string>
|
|
|
|
isDropped
|
Default value : false
|
|
|
|
percentage
|
Type : Observable<number>
|
|
|
|
setDownloadbaleURL
|
Default value : () => {...}
|
|
|
|
setTask
|
Default value : () => {...}
|
|
|
|
snapshot
|
Type : Observable<any>
|
|
|
|
task
|
Type : AngularFireUploadTask
|
|
|
import { Component, OnInit } from '@angular/core';
import { AngularFireUploadTask } from '@angular/fire/storage';
import { Observable } from 'rxjs';
import { FileUploadService } from 'src/app/services/file-upload/file-upload.service';
@Component({
selector: 'app-fileupload',
templateUrl: './fileupload.component.html',
styleUrls: ['./fileupload.component.scss']
})
export class FileuploadComponent implements OnInit {
// Main task
task: AngularFireUploadTask;
// Progress monitoring
percentage: Observable<number>;
snapshot: Observable<any>;
// Download URL
downloadURL: Observable<string>;
// State for dropzone CSS toggling
isHovering: boolean;
// State for disable the file drop
isDropped = false;
constructor(private uploader: FileUploadService) {}
ngOnInit(): void {}
toggleHover(event: boolean) {
this.isHovering = event;
}
startUpload(event: FileList) {
this.isDropped = true;
// The File object
const file = event.item(0);
this.uploader.uploadFile(file, this.setDownloadbaleURL, this.setTask);
}
setTask = (task: AngularFireUploadTask) => {
this.snapshot = task.snapshotChanges();
this.percentage = task.percentageChanges();
};
setDownloadbaleURL = url => {
this.downloadURL = url;
};
}
<div
class="dropzone"
DropZone
(hovered)="toggleHover($event)"
(dropped)="startUpload($event)"
[class.hovering]="isHovering"
*ngIf="!isDropped"
>
<h3>Drop your images here</h3>
<div class="file">
<label class="file-label">
<input class="file-input" type="file" (change)="startUpload($event.target.files)" />
<span class="file-cta">
<span class="file-icon">
<i class="fa fa-upload"></i>
</span>
<span class="file-label">
or choose a file…
</span>
</span>
</label>
</div>
</div>
<div *ngIf="(percentage | async) as pct">
<progress class="progress is-info" [value]="pct" max="100"> </progress>
{{ pct | number }}%
</div>
<div *ngIf="(snapshot | async) as snap">
{{ snap.bytesTransferred | fileSize }} of {{ snap.totalBytes | fileSize }}
<div *ngIf="(downloadURL | async) as url">
<h3>Book Cover</h3>
<img [src]="url" /><br />
</div>
</div>
@import '~bulma/css/bulma.min.css';
.dropzone {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 20vh;
border: 2px dashed #f16624;
border-radius: 5px;
background: white;
margin: 10px 0;
&.hovering {
border: 2px solid #f16624;
color: #dadada !important;
}
}
progress::-webkit-progress-value {
transition: width 0.1s ease;
}
Legend
Html element with directive