Get file name in input file

Question

I have an input, where when I click, I want you to enter the file name.

I have the following code:

HTML

<div class="trabalheObs">Carregar Curr&iacute;culo</div>
<input style="display:none" type="file" class="margin-top-20 cp" id="curriculoForm" name="curriculoForm" value="" />

CSS

.trabalheObs {
        background-image: url("../imagens/curriculo.png");
        background-position: 420px center;
        background-repeat: no-repeat;
        margin-top: 20px;
        width: 460px;
        height: 45px;
        border-top: 1px solid #e6e6e6;
        background-color: white;
        border-radius: 25px;
        text-indent: 23px;
        font-family:"roboto";
        font-weight: 300;
        font-style: italic;
        color: #999999;
        font-size: 18px;
    }

JQUERY

$(".trabalheObs").click(function () {
    $("#curriculoForm").click();
});

If you notice, I put a DIV top, to mask the standard ugly layout of a input. However, I would like him to inform the name of the selected file, how to do this?

I want the file name inside div trabalheObs

Answer 1

In pure Javascript, you can get the file name by manipulating the Fileupload Input object, as an example below:

var div = document.getElementsByClassName("botaoArquivo")[0];
var input = document.getElementById("inputArquivo");

div.addEventListener("click", function(){
    input.click();
});
input.addEventListener("change", function(){
    var nome = "Não há arquivo selecionado. Selecionar arquivo...";
    if(input.files.length > 0) nome = input.files[0].name;
    div.innerHTML = nome;
});

#inputArquivo { display: none; }

<div class="botaoArquivo">Selecionar arquivo...</div>
<input type="file" id="inputArquivo">

Answer 2

You can get the selected file name by obtaining the field value.

In this specific case, using the following code:

var nomeDoArquivo = $("#curriculoForm").val(); // obtem o nome
$(".trabalheObs").html(nomeDoArquivo); // coloca o nome dentro da div

// ao clicar na div, dispara a acao do botao escondido
$(".trabalheObs").click(function(){
    $("#curriculoForm").click();
})