Merge upload and input ajax

Question

I have this form:

<form id="formForum" autocomplete="off">
        <div class="boxContent">
            <div class="form" style="margin-top: 0">
                <div class="profile" style="background-image: url('painel/uploads/avatar_uploads/<?php echo $ver['avatar']; ?>')"></div>
                <div class="file">
                    <span class="file-name">Arraste sua imagem aqui (200x200)</span>
                    <div class="bt">Selecionar Imagem</div>
                </div>
                <input type="file" name="file" id="avatar" class="fake-file" />
            </div>
            <textarea class="form" placeholder="Altere a sua assinatura aqui" id="assinatura"><?php echo nl2br($ver['assinatura']); ?></textarea>
        </div>
</form>

In which I am sending the data through this ajax:

$('#formForum').submit(function(event){
event.preventDefault();
var avatar = new FormData(this);
var assinatura = $("#assinatura").val();
if(avatar == undefined || avatar == '' || avatar == null){
    $.ajax({
        url: 'assets/php/user.php',
        type: 'POST',
        data: { 'assinatura': assinatura, 'comando': 'assinatura' },
        beforeSend:function(){
            $('#formForum').animate({'opacity':'0.6'}, 500);
        },
        success:function(result){
            $('#formForum').animate({'opacity': '1'});
            if(result == 'Assinatura alterada com sucesso!'){
                alert(result);
                location.reload();
            }
            else{
                alert('Erro interno!');
            }
        }
    });     
}
else {
    if(avatar != undefined || avatar != '' || avatar != null){
        $.ajax({
            url: 'assets/php/user.php',
            type: 'POST',
            data: avatar,
            processData: false,
            contentType: false,
            beforeSend:function(){
                $('#formForum').animate({'opacity':'0.6'}, 500);
            },
            success:function(result){
                $('#formForum').animate({'opacity':'1'}, 500);
                if(result == 'Avatar alterado com sucesso!'){
                    alert(result);
                    location.reload();
                }
                else if(result == 'A imagem é muito pesada!'){
                    alert(result);
                }
                else if(result == 'Extensão não aceita!'){
                alert(result);
                }
                else{
                    alert('Erro interno!');
                }
            }
        });
    }
    $.ajax({
        url: 'assets/php/user.php',
        type: 'POST',
        data: { 'assinatura': assinatura, 'comando': 'assinatura' },
        beforeSend:function(){
            $('#formForum').animate({'opacity':'0.6'}, 500);
        },
        success:function(result){
            $('#formForum').animate({'opacity':'1'}, 500);
            if(result == 'Assinatura alterada com sucesso!'){
                alert(result);
                location.reload();
            }
            else{
                alert('Erro interno!');
            }
        }
    });
    alert(avatar);
}
});

I am sending the data by different ajax because I could not put all information in only one why is using file upload...

(I’m using two ifs in case the user wants to change only the avatar and not the signature or vice versa.)

Can you help me put these ajax together? Here’s the php I use:

else if($comando == 'assinatura'){
    // Usuário
    $username = $_SESSION['usuario_site'];

    // Variáveis
    $assinatura = isset($_POST['assinatura']) ? strip_tags($_POST['assinatura']) : '';

    // Querys
    $usuario = $pdo->query("SELECT * FROM usuarios WHERE usuario='".$username."' AND status='true'");
        while($ver = $usuario->fetch(PDO::FETCH_ASSOC)){
            $assinatura = $pdo->prepare("UPDATE usuarios SET assinatura='$assinatura' WHERE usuario='".$username."'");
            $assinatura->execute();
            if($assinatura){
                echo "Assinatura alterada com sucesso!";
            }else{
                echo "Erro interno!";
            }
        }
}
else{
    // Usuário
    $username = $_SESSION['usuario_site'];

    // Arquivo para onde o avatar será enviado
    $uploads = "../../painel/uploads/avatar_uploads/";

    // Formatos de imagem permitidos
    $permitidos = array(".jpg",".jpeg",".gif",".png", ".bmp");

    // Variáveis da imagem
    $nome = $_FILES['file']['name'];
    $tamanho = $_FILES['file']['size'];

    // Extensão do arquivo  
    $ext = strtolower(strrchr($nome,"."));

    // Verifica se a extensão está entre as extensões permitidas
    if(in_array($ext,$permitidos)){ 

    // Converte o tamanho da imagem
    $tamanho = round($tamanho / 1024);
        if($tamanho < 1024){ 
            // Verificando tamanho da imagem
            $nome_atual = md5(uniqid(time())).$ext;

            // Gera nome para imagem
            $tmp = $_FILES['file']['tmp_name'];
            $img = getimagesize($tmp);

            // Envia imagem para banco de dados
            if(move_uploaded_file($tmp,$uploads.$nome_atual)){
                $update = $pdo->prepare("UPDATE usuarios SET avatar=:avatar WHERE usuario=:user");
                $update->bindValue(':avatar', $nome_atual);
                $update->bindValue(':user', $username);
                $update->execute();
                echo "Avatar alterado com sucesso!";
            }
            else{
                echo "Erro interno!";
            } 
        }
        else{ 
            echo "A imagem é muito pesada!"; 
        } 
    }
    else{ 
        echo "Extensão não aceita!"; 
    } 
}

Answer 1

To check if your input file has files you can use the following code:

if(document.getElementById('avatar').files.length !== 0) {console.log('Existe arquivos');}

I hope I’ve helped!