Drag & drop files using Angular

Question

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?

question from:https://stackoverflow.com/questions/65856511/drag-drop-files-using-angular

Answer 1

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>