Skip to main content
4 de 5
se añadieron 382 caracteres en el cuerpo
Agustin G.
  • 2.8k
  • 1
  • 17
  • 50

La solución que te propongo es:

1- Ponerle la propiedad disabled por defecto al botón para subir los archivos, ya que al inicio no deberia tener documentos cargados.

2- Crear una función que se ejecute cada vez que detecte un cambio en los inputs y si hay dos archivos cargados, cambie el valor disabled del botón

3- Asignarle dicha función al evento onChange de cada input

// Acá declaro y asigno las variables que voy a necesitar. Los dos inputs y el botón de submit
const inputXml = document.getElementById("XmlToUpload");
const inputPdf = document.getElementById("pdfToUpload");
const uploadButton = document.getElementById("upload");

// Esta es la función que se encarga de detectar, luego de cada cambio en los inputs, si debe o no habilitar el botón para subir el documento. La debo conectar a cada input con el método onChange.
function uploadEnable(){
   const enableButton = inputXml.files.length + inputPdf.files.length === 2 ? true : false;
   uploadButton.disabled = enableButton ? false : true;
}

// Esto es para cancelar la carga, se lo asigné al evento onClick del boton Cancelar. No lo pediste pero me parece que asi queda mas completo el formulario.
function cancelUpload(){
  inputXml.value = "";
  inputPdf.value = "";
  uploadEnable();
}
<form action="" enctype="multipart/form-data">
  <div class="form-group row">
    <label for="fileToUpload" class="col-sm-3 col-form-label"> Archivo XML:</label>
      <div class="col-sm-8">
         <input type="file" name="fileToUpload" id="XmlToUpload" class="btn" accept=".xml" required onChange="uploadEnable()">
       </div>
  </div>
            
  <div class="form-group row">
    <label for="pdfToUpload" class="col-sm-3 col-form-label">Archivo PDF:</label>
      <div class="col-sm-8">
        <input type="file" name="pdfToUpload" id="pdfToUpload" class="btn" accept=".pdf" required onChange="uploadEnable()">
      </div>
  </div>      


  <div class="modal-footer">
    <button onClick="cancelUpload()" type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
    <button type="button" id="upload" class="btn btn-success" disabled>Subir Documentos</button>
  </div>
</form>

Agustin G.
  • 2.8k
  • 1
  • 17
  • 50