Tengo un tipo de carga de archivo de entrada que está diseñado como se muestra a continuación.

Cuando subo el archivo, la etiqueta del documento de carga se anula con el nombre del archivo, como se muestra en la imagen a continuación.

Lo que quiero hacer es cuando subo una imagen, dinámicamente quiero crear un tipo de archivo de entrada más y renderizar en la interfaz de usuario para cargar un archivo diferente nuevamente cuando hago clic en el segundo archivo de entrada que se crea dinámicamente, y subo el archivo un tercero la etiqueta de entrada debe crearse cuando hago clic en la tercera y subo la cuarta etiqueta y esto continúa. En todas las etiquetas, la etiqueta de carga de documentos debe ser anulada por fileName una vez que se carga el archivo.

Esto está en angular 8+. Cualquier ayuda sería apreciada. Nota: No se permite el tipo de archivo de entrada múltiple. TODOS los tipos de entrada deben ser editables y los usuarios pueden volver a cargar archivos.

A continuación se muestra el código HTML

 <div class="row" style="margin-bottom: 10px;"> <input type="file" class="otherDocumentsUpload" (change)="onFileSelected($event)" #fileUpload> <button mat-mini-fab class="upload-btn" (click)="fileUpload.click()"> <span> <img src="assets/image/upload-icon.png" width="15px" height="16px" style="margin-right: 5px;"></span> {{uploadedFile5 === '' ? 'Upload Document' : uploadedFile5}}</button> <div class="file-upload" style="padding-left: 10px;"> {{fileName}} </div> </div>

codigo css

 .otherDocumentsUpload{ display: none; } .upload-btn{ color: #999999; font-family: Muli; font-size: 16px; text-align: left; border: 1px dashed #b7b3b3; border-radius: 4px; height: 48px; background: #fff !important; cursor: pointer; display: flex; justify-content: space-between; text-align: center !important; margin-left: 13px; width: 30%; } .file-upload{ width: 30%; } .labelUploadDocuments{ color: #000000; font-family: Muli; font-size: 14px; line-height: 16px; text-align: left; font-weight: 700; }

así que simplemente considere que he cargado un archivo, se muestra una opción de carga de archivo más donde puedo cargar un archivo diferente. He cargado en la segunda opción, se procesa una carga de archivo más. y esto sigue