Upload Files

To create a dynamic file upload component in Angular that allows users to select a file when they click on the "Upload Files" button, follow these steps:

-------------------------------------------------<><><><><><><><>-----------------------------------------------------

### 1. Create a New Angular Component
First, create a new component for the file upload functionality.

ng generate component file-upload
 

### 2. Define the Component Template
In the `file-upload.component.html`, define the template for the file input and the upload button.

### 3. Define the Component Logic
In the `file-upload.component.ts`, add the logic to handle the file selection and the button click event.

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

@Component({
  selector: 'app-file-upload',
  templateUrl: './file-upload.component.html',
  styleUrls: ['./file-upload.component.css']
})
export class FileUploadComponent {
  selectedFile: File | null = null;

  triggerFileInput() {
    const fileInput = document.getElementById('fileInput') as HTMLInputElement;
    fileInput.click();
  }

  onFileSelected(event: Event) {
    const input = event.target as HTMLInputElement;
    if (input.files && input.files.length > 0) {
      this.selectedFile = input.files[0];
    }
  }
}
 

### 4. Add Styling (Optional)
In the `file-upload.component.css`, you can add some basic styling.

.file-upload {
  display: flex;
  flex-direction: column;
  align-items: start;
}

button {
  margin-bottom: 10px;
}

div {
  margin-top: 10px;
  color: #333;
}
 

### 5. Use the Component in Your App
Include the `FileUploadComponent` in your main app component or any other component where you want to use the file upload feature.

---------------------------------------------<><><><><><><><>---------------------------------------------------

### Final Output
When the user clicks on the "Upload Files" button, the file input dialog will be triggered, allowing them to select a file. The selected file's name will be displayed after selection.

By following these steps, you create a dynamic Angular component that allows users to select files for upload.