0

Tengo el siguiente problema con una validación que realice la cual solicita que al seleccionar los archivos en el input file se habilite el botón de Cargar Archivos, el problema que estoy presentando es que al intentar cargar el segundo archivo se habilita el botón sin haber cargado el primero.

Pero si se selecciona los archivos en orden comenzando con el primero no se te va habilitar hasta no cargar el segundo archivo.

El código que he utilizado para esta validación es el siguiente:

var input = document.getElementById("FileOneToUpload"); 
var input = document.getElementById("FileTwoToUpload");

input.addEventListener('change', check); 

function check(event) { 
    var verificar = this.files.length == 0 ? true : false;   
    var enviar = document.getElementById("upload"); 
    enviar.disabled = verificar;
}
<div class="form-group row">
                        <label for="fileToUpload" class="col-sm-3 col-form-label">Archivo 1:</label>
              <div class="col-sm-8">
                <input type="file" name="OneToUpload" id="FileOneToUpload" class="btn" accept=".pdf" required="">
              </div>
                    </div>
                    <div class="form-group row">
                         <label for="pdfToUpload" class="col-sm-3 col-form-label">Archivo 2:</label>
              <div class="col-sm-8">
              <input type="file" name="TwoToUpload" id="FileTwoToUpload" 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" disabled="">Cargar Archivos</button>
          </div>

Hay algo adicional que deba corregir en validación o hay otra forma en que la pueda realizar pero que cumpla con este criterio ?

Actualización 1:

Realizando el ejemplo de una de las respuestas que me aportan, a que estoy asignando dos input a la misma variables lo he corregido pero aún no consigo éxito, adjunto el código con la modificación para que lo puedan validar.

var input = document.getElementById("FileOneToUpload"); 
var input2 = document.getElementById("FileTwoToUpload");

input.addEventListener('change', check); 
input2.addEventListener('change', check); 

function check(event) { 
    var verificar = this.files.length == 0 ? true : false;   
    var enviar = document.getElementById("upload"); 
    enviar.disabled = verificar;
}
<div class="form-group row">
                        <label for="fileToUpload" class="col-sm-3 col-form-label">Archivo 1:</label>
              <div class="col-sm-8">
                <input type="file" name="OneToUpload" id="FileOneToUpload" class="btn" accept=".pdf" required="">
              </div>
                    </div>
                    <div class="form-group row">
                         <label for="pdfToUpload" class="col-sm-3 col-form-label">Archivo 2:</label>
              <div class="col-sm-8">
              <input type="file" name="TwoToUpload" id="FileTwoToUpload" 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" disabled="">Cargar Archivos</button>
          </div>

Actualización 2:

He agregado a cada uno de los input un evento onclick tal como lo mencionan en uno de los comentarios, pero aun no consigo éxito, agrego el código que he realizado:

var input = document.getElementById("FileOneToUpload"); 
var input2 = document.getElementById("FileTwoToUpload");

input.addEventListener('change', check); 
input2.addEventListener('change', check); 

function check(event) { 
    var verificar = this.files.length == 0 ? true : false;   
    var enviar = document.getElementById("upload"); 
    enviar.disabled = verificar;
}
<div class="form-group row">
                        <label for="fileToUpload" class="col-sm-3 col-form-label">Archivo 1:</label>
              <div class="col-sm-8">
                <input type="file" name="OneToUpload" id="FileOneToUpload" class="btn" accept=".pdf" required="" onclick="this.value = null">
              </div>
                    </div>
                    <div class="form-group row">
                         <label for="pdfToUpload" class="col-sm-3 col-form-label">Archivo 2:</label>
              <div class="col-sm-8">
              <input type="file" name="TwoToUpload" id="FileTwoToUpload" class="btn" accept=".pdf" required="" onclick="this.value = null">
              </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" disabled="">Cargar Archivos</button>
          </div>

Posiblemente no me he explicado lo suficiente, lo que requiero es que se habilite el botón de cargar archivos pero solo hasta que tenga seleccionado archivos en Archivo 1 y en Archivo 2, es decir que cuando ya se tengan seleccionado los archivos en cada uno de los input se habilite el botón para proceder con la carga.

0

3 respuestas 3

2

Según veo el problema es que estás asignando los dos input a la misma variable, básicamente sería cambiar eso y debe funcionar:

Adicionalmente he agregado una validación de ambos input en la función check para siempre revisar que ambos inputs tengan un archivo.

var input = document.getElementById("FileOneToUpload"); 
var input2 = document.getElementById("FileTwoToUpload"); // Se agrega esta variable

input.addEventListener('change', check); 
input2.addEventListener('change', check); // Listener de la segunda variable

function check(event) { 
    var verificar = input?.files?.length && input2?.files?.length;    // Validamos que ambos input contengan archivos, el operador ? sirver para validar propiedades internas y que en caso de que sea nulo no nos lance un error sino solamente false.
    var enviar = document.getElementById("upload"); 
    enviar.disabled = verificar;
}
3
  • He realizado una actualización en base a tu pregunta pero aun no consigo éxito, posiblemente haga falta algo adicional
    – John Doe
    el 15 jun. 2022 a las 19:29
  • Tienes alguna novedad con respecto a tu respuesta, veo que tiene buena votación pero esto no soluciona mi problema, como evidencia lo he agregado a una actualización a mi pregunta, y posiblemente no me he explicado lo suficiente, lo que requiero es que se habilite el botón de Cargar Archivos pero solo hasta que tenga seleccionado archivos en Archivo 1 y en Archivo 2, es decir que cuando ya se tengan seleccionado los archivos en cada uno de los input se habilite el botón para proceder con la carga.
    – John Doe
    el 16 jun. 2022 a las 15:41
  • @JohnDoe he realizado un ajuste a la respuesta cambiando el código de la función check, espero que sea lo que estás buscando. el 16 jun. 2022 a las 17:12
1

Estás asignando dos elementos del DOM a la misma variable "input". Deberían ser dos variables distintas, como: input1 e input2. Y luego le asignas el listener a ambas! Eso te lo debería solucionar!

Como apunte, si quieres que tu código quede un poco más corto, la validación del length en la variable "verificar" podría quedar así:

Var verificar = !this.files.length ? true : false;

Con el operador de negación, te devolverá true si el arreglo está vacío. Un saludo!

6
  • Posiblemente lo que me comentas en el primer párrafo sea algo parecido a lo que agregue en mi ultima actualización, pero no funciono con éxito, hay algo adicional que deba agregar ?
    – John Doe
    el 15 jun. 2022 a las 20:05
  • Te pasa cuando añades el mismo file? Puede estar relacionado con eso. El evento change no salta si es el mismo value.
    – user246049
    el 15 jun. 2022 a las 20:10
  • Prueba a poner el evento change así en vez de con los listeners: <input id="file" onchange="file_changed(this)" onclick="this.value=null;" type="file" accept="/" /> Evidentemente tu función e id se llaman diferente, es solo un ejemplo. Así te debería funcionar. Lo que hace es setear el value a null con el evento click para que pueda saltar el evento change cuando carges el mismo file.
    – user246049
    el 15 jun. 2022 a las 20:14
  • Me gustaría probar por la opción, puedes aportarme un pequeño ejemplo en base a tu comentario para validarlo ?
    – John Doe
    el 15 jun. 2022 a las 23:56
  • Simplemente, añade esto a cada uno de tus inputs: onclick="this.value = null".
    – user246049
    el 16 jun. 2022 a las 4:22
1

a mi entender el problema que tienes es porque solo estas asignandole el envento al id FileTwoToUpload, tienes que usar nombres de variables distintas y asignar el evento a ambas variables. Por otro lado tienes que preguntarle a cada input si tiene un fichero en la validacion, es decir deberias crear una variable de control para esto creo que es la opcion mas facil. De no hacer una variable de control, en la funcion debes preguntar si los 2 inputs tienen un fichero.

var input = document.getElementById("FileOneToUpload"); 
var input2 = document.getElementById("FileTwoToUpload");

input.addEventListener('change', check); 
input2.addEventListener('change', check); 

function check(event) { 
    var input = document.getElementById("FileOneToUpload"); 
    var input2 = document.getElementById("FileTwoToUpload");
    var verificar = true;
    var eval1 = input.files.length == 0 ? true : false;
    var eval2 = input2.files.length == 0 ? true : false;
    if(eval1 == false && eval1 == eval2)
        verificar = false;

  
    var enviar = document.getElementById("upload"); 
    enviar.disabled = verificar;
}

Prueba con este código, no recuerdo bien ahora sí la sintaxis del if está correcta pero debería funcionar

2
  • Podrías aportarme un ejemplo en base a tu respuesta para darle validez ?
    – John Doe
    el 15 jun. 2022 a las 19:32
  • revisa la actualizacion que hice a ver si te funciona
    – Frap
    el 17 jun. 2022 a las 8:15

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.