Notice: Undefined index in file type field

Question

I have a form with type fields text and file:

<form id="first-setup" method="post" enctype="multipart/form-data" data-toggle="validator">
    <input type="hidden" id="userkey" value="{userKey}">

    <label for="input-firstname">Nome</label>
    <input id="input-firstname" name="input-firstname" data-minlength="2" data-error="Desculpe, seu nome deve possuir no mínimo 2 dígitos." type="text" class="form-control" required>

    <label for="input-surname">Sobrenome</label>
    <input id="input-surname" name="input-surname" data-minlength="2" data-error="Desculpe, seu sobrenome deve possuir no mínimo 2 dígitos." type="text" class="form-control" required>
                                             [...]
    <label for="input-picture">Foto de perfil</label>
    <input id="input-picture" name="input-picture" type="file" class="filestyle" data-iconName="fa fa-spaced fa-folder-open-o" data-input="false" data-buttonText="Envie uma foto de perfil">

    <button id="button-submit" class="btn btn-warning" type="submit">Concluir <i class="fa fa-spaced fa-arrow-circle-o-right"></i></button>
</form>

I use ajax to send it:

$('#button-submit').click(function(e) {
    e.preventDefault();
    // Correção de bug do bootstrap-validator
    // Bug relatado: envia o formulário mesmo com o input[submit] desativado (disabled=true) - ou seja
    // com erros de validação nos valores.
    var disabled = $(this).hasClass('disabled');
    if (disabled) return false;

    var firstname = $('#input-firstname').val(),
        surname   = $('#input-surname').val(),
        fullname  = $('#input-fullname').val(),
        birthdate = $('#input-birthdate').val(),
        city      = $('#input-city').val(),
        bgfile    = $('#input-background').val(),
        picfile   = $('#input-picture').val();

    // validações e eventos na view

    var form = $('#first-setup').serialize();
    $.ajax({
        url: '../application/controller/class.FirstSetupController.php',
        dataType: 'json',
        data: form,
    })
    .done(function(data) {
        console.log(data);
    })
    .fail(function(data) {
        console.log(data);
    });
});

The problem is that in php, if I make one if (isset($_FILES["input-picture"])) he returns me false, only recognizing the input[type=text] form.

I already checked the php settings (file_uploads, post_max_size and upload_max_file_size) and they’re okay, man .htaccess also.

I tried to use the solutions of other similar questions but none solved this problem.

Answer 1

The jQuery.ajax does not support upload if you do not use File API, therefore I believe that it converts the variable input-surname to POST (then on the server you get $_POST['input-surname']).

You can use the File API to upload using $_POST instead of $_FILE:

Javascript:

var form = $('#first-setup').serialize();
var file = $('#input-surname').get(0).files[0];
var reader = new FileReader();
reader.onload = function (event) {
    var dados = event.target.result;
    var nome = document.getElementById('fileBox').files[0].name; //Should be 'picture.jpg'

    form.dataFile = dados;
    form.dataName = nome;

    $.ajax({
        url: '../application/controller/class.FirstSetupController.php',
        dataType: 'json',
        data: form,
    })
    .done(function(data) {
        console.log(data);
    })
    .fail(function(data) {
        console.log(data);
    });
};

PHP:

<?php
$dataFile = $_POST['dataFile'];
$dataName = $_POST['dataName'];

$fp = fopen('upload/' . $dataName, 'w');
fwrite($fp, $dataFile);
fclose($fp);