0

tengo un input de tipo file el cual quiero que cuando se cargue un archivo se habilite un boton de cancelar, ya he intentado pero no me da la cabeza para mas.

<p-fileUpload mode="basic" name="demo[]" url="./upload.php" accept=".doc,.docx,.pdf" maxFileSize="1000000" chooseLabel="Seleccionar" [disabled]="campos" [(ngModel)]="constancia" #arch_constancia></p-fileUpload>

y mi botón es el siguiente:

<button [disabled]="campos || true" pButton pRipple [label]="Delete" icon="pi pi-trash" class="p-button-danger" (click)="borrar_constancia()"></button>

tengo el boton desahbilitado pero no se como habilitarlo cuando se cargue un archivo, si me pudieran ayudar por favor, lo hago en angular typecript.

3
  • ¿El p-fileUpload y el botón viven en el mismo componente? el 3 jul. 2022 a las 18:42
  • @AlbertoSiurob asi es amigo, perdon por contestar no tengo un internet muy estable por donde vivo.
    – oscarggh
    el 3 jul. 2022 a las 20:58
  • Y si pones un flag en el ts como: isValid = false; en el html luego usas [disabled]="!isValid", luego en el evento donde obtienes el archivo(que es cuando ya se ha seleccionado) pones this.isValid = true; y con eso deberia cambiarte
    – ayaleil
    el 5 jul. 2022 a las 21:48

1 respuesta 1

0

Podrías realizarlo así:

  1. En tu archivo .html
// SUBIR EL ARCHIVO
<p-fileUpload 
  fileUpload   // Hace referencia Variable para manipular el archivo en .ts
  mode="basic" 
  customUpload="true"
  name="demo" 
  url="./upload.php" 
  accept=".doc,.docx,.pdf" 
  maxFileSize="1000000" 
  chooseLabel="Seleccionar" 
  [disabled]="campos" 
  [(ngModel)]="constancia"
  (uploadHandler)="onUpload($event, fileUpload)">  // Cuando se sube un archivo invoca al método onUpload()
</p-fileUpload>

// BOTON 
<button 
  [disabled]="enableCancelButton" // Variable definida en el archivo .ts para habilitar el botón
  pButton pRipple 
  [label]="Delete" 
  icon="pi pi-trash" 
  class="p-button-danger" 
  (click)="borrar_constancia()">
</button>
  1. En tu archivo ts
// Variable para obtener el archivo
uploadedFile: any;
// Variable para manipular el archivo
ViewChild('fileUpload') fileUpload: any;
// Variable para habilitar el botón cuando se sube el archivo
enableCancelButton = false;

/**
 * Método a invocar cuando se sube un archivo
 */
onUpload(event, fileUpload) {
  // Obtenemos los datos del archivo subido
  this.uploadedFile = event.files[0];
  console.log('file', this.uploadedFile);
  // Si existe el archivo se habilita el botón cancelar
  if (this.uploadedFile) {
    this.enableCancelButton = true;
  }
}
1
  • Muchas gracias Laura Pereyra me ayudado muchisimo tu ayuda. Te debo una .
    – oscarggh
    el 6 jul. 2022 a las 20:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.