How to display a modal(bootstrap) stating that the input type="file" cannot be null?

Question

I have an input:

<input id="imagens" type="file" multiple name="file" accept="image/x-png, 
        image/gif, image/jpeg" required />

And the following javascript code:

var fileUpload = document.getElementById("imagens");
var enviar = document.getElementById("enviar");
enviar.addEventListener("click", function (event) {
    if (fileUpload.files.length == 0) {
        alert("Nenhum Arquivo Selecionado");
        return;
    }
})

I would like, if the user tried to send the form without images, to be displayed a bootstrap modal instead of this Alert.

Answer 1

Maybe this code with Jquery should help. Inside this IF(), I’m not 100% sure of this but I believe it is in this sense

$('#myModal1').on('shown.bs.modal', function() {

var $me = $(this);

$me.delay(3000).hide(0, function() {
    $me.modal('hide');
});

});

Displays the modal for 3 seconds.

Answer 2

I resolved it this way:

HTML

 <input id="imagens" type="file" multiple name="file" accept="image/x-png, 
 image/gif, image/jpeg" required />

Jquery

  $("#target").submit(function (event) {
        var imgVal = $('#imagens').val();
        if (imgVal == '') {
            $('#myModal').modal('show')
        }
    });

Where target is the id of my form and mymodal is the id of my modal.