Upload Files

Question

Hi I want when user clicks on Up load files button then user should also be able to select File. I want it to be a Dynamic Component. Thanks

Adarsh Nigam · Answer

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. Upload Files Selected File: {{ selectedFile.name }} ### 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.