I'm a beginner in Angular & typescript. My requirement is I have to select single/multiple video files with drag and drop using Angular.
For that, I referred https://stackblitz.com/edit/angular-rksspi?file=src%2Fapp%2Fapp.component.ts
Here, I want to see the drag & dropped file in the drag area. How to do this?
It depends on what you mean to see the files... But basically, you should save the dragged files to a class attribute and display it in your html:
app.component.ts
import { Component, OnInit, HostListener } from "@angular/core";
@Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
error: string;
dragAreaClass: string;
draggedFiles: any;
...
saveFiles(files: FileList) {
if (files.length > 1) this.error = "Only one file at time allow";
else {
this.error = "";
console.log(files[0].size,files[0].name,files[0].type);
this.draggedFiles = files;
console.log(files);
}
}
}
app.component.html
<div draggable="true" ngClass="{{dragAreaClass}}">
<div class="row">
<div class="col-md-12 text-center">
Drag files here
<a href="javascript:void(0)" (click)="file.click()">
or click to open
</a>
<input type="file"
#file
[multiple]="false"
(change)="onFileChange($event)"
style="display:none" />
<div class="dragged-files-wrapper" *ngIf="draggedFiles">
<div class="file" *ngFor="let file of draggedFiles">
{{file}}
</div>
</div>
</div>
</div>
</div>
<div class="error" *ngIf="error">
Only one file at time allow
</div>