1

Estoy cargando dos archivos separados a mi server uno corresponde a un XML y el otro a un archivo PDF pero quisiera que al seleccionar ambos archivos se habilite el botón para Subir Documentos, el siguiente es el código con el construyo los input y el botón de Subir Documentos.

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

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

Quisiera saber si existe una manera de habilitar el botón de Subir Documentos solo hasta el momento en el que ambos input se encuentre seleccionado los archivos para subir.

5 respuestas 5

4

Sólo con HTML5, dentro del input type="file" se puede agregar: required="". Lo que hace este es que, si no hay nada escrito o seleccionado, al precionar submit, salta un mensaje sobre éste input.

Ejemplo:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<form action="">
 <input type="file" required="">
 <button type="submit" class="btn btn-primary btn-sm btn-block">Enviar</button>
</form>

Ahora, tenemos el submit en disabled por defecto. Para activar el submit cuando se aya seleccionado un archivo, el botón o input submit debe estar activo.

En este caso, no es necesario poner el botón submit dentro del form, porque actuará mediante JavaScript.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

<form action="">
 <input type="file" id="file" required="">
 <br>
 <button type="submit" id="enviar" class="btn btn-primary btn-sm btn-block" disabled="">Enviar</button>
</form>

<script>
var input = document.getElementById("file"); 
input.addEventListener('change', check); 

function check(event) { 
 var verificar = this.files.length == 0 ? true : false;   
 var enviar = document.getElementById("enviar"); 
 enviar.disabled = verificar;
}
</script>

Esto debería solucionar el problema. Ya te toca adaptar a tus necesidas y estilos (yo usé de referencia estilos de bootstrap).

0
1

Los argumentos para venderte mi respuesta son:

  1. No hace falta que toques tu HTML actual
  2. Puedes agregar tantos <input> del tipo file como desees en el HTML sin tener que retocar el javascript pues ya lo tiene en cuenta
  3. Al pulsar el botón Cancelar, además de salir del modal resetearás los campos input correctamente y así no volverán a aparecer llenos si regresas al modal

Aquí el código a agregar como javascript en tu página:

let form = document.querySelector("form");
let inputs = document.querySelectorAll("input[type='file']");
let botonSubir = document.getElementById("upload");
let botonCancelar = document.querySelector(".modal-footer button:first-child")

botonSubir.disabled = true

function activarSubirDocumentos() {
  let todos = 0
  inputs.forEach(function(input) {
    if (input.files.length === 1) {
      todos += 1
    }
  })
  botonSubir.disabled = (todos == inputs.length) ?
    false :
    true
}

inputs.forEach(input => input.addEventListener("change", function() {
  activarSubirDocumentos()
}, false))

botonCancelar.addEventListener("click", function() {
  form.reset()
  activarSubirDocumentos()
}, false)

Y aquí un ejemplo de su uso con 3 input (repito, funciona con tantos input del tipo file como necesites):

let form = document.querySelector("form");
let inputs = document.querySelectorAll("input[type='file']");
let botonSubir = document.getElementById("upload");
let botonCancelar = document.querySelector(".modal-footer button:first-child")

botonSubir.disabled = true

function activarSubirDocumentos() {
  let todos = 0
  inputs.forEach(function(input) {
    if (input.files.length === 1) {
      todos += 1
    }
  })
  botonSubir.disabled = (todos == inputs.length) ?
    false :
    true
}

inputs.forEach(input => input.addEventListener("change", function() {
  activarSubirDocumentos()
}, false))

botonCancelar.addEventListener("click", function() {
  form.reset()
  activarSubirDocumentos()
}, false)
<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>
    </div>
  </div>
  <div class="form-group row">
    <label for="pdfToUpload" class="col-sm-3 col-form-label">Archivos PDF:</label>
    <div class="col-sm-8">
      <input type="file" name="pdfToUpload" id="pdfToUpload" class="btn" accept=".pdf" required>
      <input type="file" name="pdfToUpload2" id="pdfToUpload2" class="btn" accept=".pdf" required>
    </div>
  </div>

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

1

La solución que te propongo es:

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)

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

0

simple con Javascript.

Ejemplo:

var docs;

function verifica_archivos(e){
    docs--;
    if(docs==0){
    $("#upload").removeAttr('disabled')
                .removeClass('btn-outline-secondary')
                .addClass('btn btn-success');
    }    
}
function SubirArchivos(){
  $('#mimodal').modal('toggle');
  Swal.fire({
    icon: 'success',
    title: 'Archivos Cargados',
    showConfirmButton: false,
    timer: 1500
   })
}
function vermodal(){
  docs=2;
  $('#mimodal').modal('toggle');
  $('#mimodal').on('hidden.bs.modal',function(e){
    document.getElementById('subir_archivos').reset();
  });
  document.getElementById('subir_archivos').reset();
  $("#upload").attr('disabled','disabled')
              .removeClass('btn-success')
              .addClass('btn btn-outline-secondary');
}
$('#mimodal').modal('toggle');
$('#VerModal').click(vermodal);
$('#upload').click(SubirArchivos);
$("input:file").change(verifica_archivos);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script><script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>


<div id="mimodal" class="modal" tabindex="-1">
<form id="subir_archivos" action="" enctype="multipart/form-data">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Ejemplo Funcional</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      
          <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>
             </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>
              </div>
            </div>      
           </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
            <button type="button" id="upload" class="btn btn-success">Subir Documentos</button>
          </div>
       </div>
     </div>
   </form>
  </div>
    <button id="VerModal" type="button" class="btn btn-primary">
  Subir Archivos
</button>

veo que estas usando modal de bootstrap así que te dejo un ejemplo con ello; con la limpieza de las variables y un plus.

-1

Si necesitas un botón de submit fuera del input, en este caso en tu .modal-footer, entonces, agrega una id en tu form así: <form id="miId">; y en el botón a enviar en el footer: <button type="submit" form="miId">.

Si esto no te funciona, usa jQuery así:

$(document).ready(function() {
 
 $("#upload").on("click", function() {
 
 $("#miId").submit();
 
 });
 
});
2
  • Aun no logro resolver este requerimiento, es posible que se pueda adaptar el código que agregaste como al código de mi pregunta inicial ?
    – John Doe
    Commented el 28 may. 2021 a las 17:47
  • Disculpa la demora. Voy agregar otra respuesta y darte dos opciones. Commented el 28 may. 2021 a las 20:48

Tu Respuesta

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

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