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.