<div
  class="w-[400px] h-[400px] border-stone-600 border-2 border-solid"
  (dragover)="onDragOver($event)"
  (dragleave)="onDragLeave($event)"
  (drop)="onFileDrop($event)"
>
  @if (!dragging()) {
  <p>拖放檔案到這裡</p>

  } @if (dragging()) {
  <p>放開來上傳檔案</p>
  } @if(fileName()){
  <p>上傳的檔案:</p>
  {{ fileName() }} }
</div>

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-day-10-page',
  standalone: true,
  imports: [],
  templateUrl: './day-10-page.component.html',
  styleUrl: './day-10-page.component.scss'
})
export class Day10PageComponent {
  dragging = signal(false);    // 追蹤拖放狀態
  fileName = signal<string | null>(null);  // 儲存檔案名稱

  onDragOver(event: DragEvent) {
    event.preventDefault();
    this.dragging.set(true);
  }

  onDragLeave(event: DragEvent) {
    event.preventDefault();
    this.dragging.set(false);
  }

  onFileDrop(event: DragEvent) {
    event.preventDefault();
    this.dragging.set(false);

    const files = event.dataTransfer?.files;
    if (files && files.length > 0) {
      this.fileName.set(files[0].name);  // 設定上傳檔案名稱
    }
  }
}