Remove accent and special characters from a pdf file name

Question

I would like the moment the pdf file was selected, if it comes with accent that is removed by the remove_accents function().

<tr>
    <th nowrap>Arquivo PDF*:&nbsp;</th>
    <td><input type="file" name="arquivoPDF" id="arquivoPDF" class="CampoTexto1" onchange="retira_acentos(this)"/></td>
</tr>

How do I read the file name and then pass it to the remove accents function and show on screen to the user?

if(!validaExtensaoArquivo(retira_acentos($('arquivoPDF')), "pdf")){
    bootbox.alert("O arquivo referente ao campo 'Arquivo PDF' deve possuír extensão pdf.");
    $('btoAlterar').disabled = false;
    return false;
}   

function retira_acentos(str) 
{
    com_acento = "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ";
    sem_acento = "AAAAAAACEEEEIIIIDNOOOOOOUUUUYRsBaaaaaaaceeeeiiiionoooooouuuuybyr";
    novastr="";
    for(i=0; i<str.length; i++) {
        troca=false;
        for (a=0; a<com_acento.length; a++) {
            if (str.substr(i,1)==com_acento.substr(a,1)) {
                novastr+=sem_acento.substr(a,1);
                troca=true;
                break;
            }
        }
        if (troca==false) {
            novastr+=str.substr(i,1);
        }
    }
    return novastr;
} 

Answer 1

You can use an change in the file selection element, when some file is selected, the name of that file will be recovered and shown on the screen to the user.

// Evento ao selecionar um arquivo
$("#file").change(function(){
    const nome = $(this).prop('files')[0].name; // recupera nome do arquivo
    $("#nome_ori").text(nome); // atribui ao span#nome_ori o nome original do arquivo
    $("#nome_rep").text(retira_acentos(nome)); // atribui ao span#nome_rep o nome sem acentos do arquivo
});

// Função de trocar acentos
function retira_acentos(str) 
{
    com_acento = "ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõöøùúûüýþÿ";
    sem_acento = "AAAAAAACEEEEIIIIDNOOOOOOUUUUYRsBaaaaaaaceeeeiiiionoooooouuuuybyr";
    novastr="";
    for(i=0; i<str.length; i++) {
        troca=false;
        for (a=0; a<com_acento.length; a++) {
            if (str.substr(i,1)==com_acento.substr(a,1)) {
                novastr+=sem_acento.substr(a,1);
                troca=true;
                break;
            }
        }
        if (troca==false) {
            novastr+=str.substr(i,1);
        }
    }
    return novastr;
} 

div{
  width: 100%;
  margin-bottom: 20px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>Selecione um arquivo</label>
  <input type="file" id="file">
</div>
<div>
  <label>Nome arquivo original:</label>
  <span id="nome_ori"></span>
</div>
<div>
  <label>Nome arquivo sem acento:</label>
  <span id="nome_rep"></span>
</div>

---

With this just do now the same in back-end, retrieve the name of file and swap characters with existing accents to no accents.

---

Reference: Change