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

1- PonerleAgregarle la propiedad disabled por defecto al botón para subir los archivosSubir Documentos, ya que al inicio no deberiadebería 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 cargadosambos tienen un archivo cargado, cambie el valor disableddisabled del botón Subir Documentos a false, para de esta forma habilitarlo. A esta función la llamé uploadEnable.

3- Asignarle dichala función uploadEnable al evento onChange de cada uno de los inputinputs

Eso sería todo para hacer lo que queres. Y si queres que el botón Cancelar limpie los inputs y vuelva a deshabilitar el boton Subir Documentos, creé la funcion cancelUpload que lo único que hace es vaciar el valor de los inputs, y vuelve a llamar a la función uploadEnable. (Cabe aclarar que es necesario volver a llamar a esta funcion, porque el evento onChange que tienen asignados los inputs no detectan un cambio de value de la manera que lo estamos haciendo en la función cancelUpload. Eso esta explicado en el primer párrafo de la documentación: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)

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

1- Agregarle la propiedad disabled al botón Subir Documentos, ya que al inicio no debería tener documentos cargados.

2- Crear una función que detecte un cambio en los inputs y si ambos tienen un archivo cargado, cambie el valor disabled del botón Subir Documentos a false, para de esta forma habilitarlo. A esta función la llamé uploadEnable.

3- Asignarle la función uploadEnable al evento onChange de cada uno de los inputs

Eso sería todo para hacer lo que queres. Y si queres que el botón Cancelar limpie los inputs y vuelva a deshabilitar el boton Subir Documentos, creé la funcion cancelUpload que lo único que hace es vaciar el valor de los inputs, y vuelve a llamar a la función uploadEnable. (Cabe aclarar que es necesario volver a llamar a esta funcion, porque el evento onChange que tienen asignados los inputs no detectan un cambio de value de la manera que lo estamos haciendo en la función cancelUpload. Eso esta explicado en el primer párrafo de la documentación: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)

se añadieron 382 caracteres en el cuerpo
Origen Enlace
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;
}

// estoEsto 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>

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

const inputXml = document.getElementById("XmlToUpload");
const inputPdf = document.getElementById("pdfToUpload");
const uploadButton = document.getElementById("upload");

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
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>

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>

se añadieron 205 caracteres en el cuerpo
Origen Enlace
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

4- Te dejo también la función para cancelar asignada al boton

const inputXml = document.getElementById("XmlToUpload");
const inputPdf = document.getElementById("pdfToUpload");
const uploadButton = document.getElementById("upload");

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
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>

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

4- Te dejo también la función para cancelar asignada al boton

const inputXml = document.getElementById("XmlToUpload");
const inputPdf = document.getElementById("pdfToUpload");
const uploadButton = document.getElementById("upload");

function uploadEnable(){
   const enableButton = inputXml.files.length + inputPdf.files.length === 2 ? true : false;
   uploadButton.disabled = enableButton ? false : true;
}

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>

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

const inputXml = document.getElementById("XmlToUpload");
const inputPdf = document.getElementById("pdfToUpload");
const uploadButton = document.getElementById("upload");

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
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>

se añadieron 205 caracteres en el cuerpo
Origen Enlace
Agustin G.
  • 2.8k
  • 1
  • 17
  • 50
Loading
Origen Enlace
Agustin G.
  • 2.8k
  • 1
  • 17
  • 50
Loading