bootstrap modal upload file - php

Question

I'm having a problem to upload a file using bootstrap modal upload file
This is my modal code
<div id="myModalAtiv" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="alert alert-info" id="myModalLabel"><span class="glyphicon glyphicon-pencil"></span> Edição de Atividades</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="formacoes" enctype="multipart/form-data">
<div class="form-group">
<input type="hidden" name="idformacao" id="idformacao">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Escola:</label>
<input class="form-control" name="escola" id="escola" disabled="true">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Nome:</label>
<input class="form-control" name="nome" id="nome">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Data:</label>
<div class="input-group date" id="datetimePicker">
<input type="text" class="form-control" name="inicio" id="inicio" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Horas:</label>
<input class="form-control" name="horas" id="horas">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Local:</label>
<input class="form-control" name="local" id="local">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Destinatários:</label>
<input class="form-control" name="destinatarios" id="destinatarios">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Data Limite:</label>
<div class="input-group date" id="dataLimitePicker">
<input type="text" class="form-control" name="dataLimite" id="dataLimite" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3"><i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span></div>
<span class="btn btn-file"><input type="file" name="fileToUpload" id="fileToUpload" /></span>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-info">Atualizar</button>
<button type="button" class="btn btn-default"data-dismiss="modal">Fechar</button>
</div>
</form>
</div>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
and this is my ajax function to send the form
<script>
$(document).ready(function () {
$('#datetimePicker').datetimepicker({format: 'YYYY-MM-DD'});
$('#dataLimitePicker').datetimepicker({format: 'YYYY-MM-DD'});
$('#formacoes').formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
nome: {
validators: {
notEmpty: {
message: 'Tem de definir alguma formação'
}
}
}
},inicio: {
validators: {
notEmpty: {
message: 'Data inicial obrigatória'
},
date: {
format: 'YYYY-MM-DD',
message: 'Data inicial inválida'
}
}
},
dataLimite: {
validators: {
notEmpty: {
message: 'Data limite obrigatória'
},
date: {
format: 'YYYY-MM-DD',
message: 'Data limite inválida'
}
}
}
}).on('success.form.fv', function (e) {
e.preventDefault();
var $form = $(e.target),
fv = $form.data('formValidation');
$.ajax({
url: 'updates.php',
type: 'POST',
data: $form.serialize(),
success: function (response) {
console.log(response.status);
if (response.status === 'success') {
$("#myModalAtiv").modal('hide');
$('#respostas .modal-title').html('Sucesso');
$('#respostas .modal-body').html('Informação: ' + response.message);
$('#respostas').modal('show');
$('#respostas').on('hidden.bs.modal', function () {
window.location.reload(true);
});
}
}
});
});
});
All seems to be ok, but when i trying to send the from to my function it says
Notice: Undefined index: fileToUpload
This is my php function
$idformacao= filter_input(INPUT_POST, 'idformacao');
if ($idformacao != null) {
echo "aqui";
$userid = filter_input(INPUT_POST, 'userid');
$nome = filter_input(INPUT_POST, 'nome');
$inicio = filter_input(INPUT_POST, 'inicio');
$horas = filter_input(INPUT_POST, 'horas');
$local = filter_input(INPUT_POST, 'local');
$destinatarios = filter_input(INPUT_POST, 'destinatarios');
$dataLimite = filter_input(INPUT_POST, 'dataLimite');
$uploaddir = $_SERVER['DOCUMENT_ROOT'] . '/uploads';
$uploadfile = $uploaddir . '/' . basename($_FILES['fileToUpload']['name']);
if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
$target_path = "/uploads/" . basename($_FILES['fileToUpload']['name']);
$ret = $ebspma->updateFormacoes($idformacao, $nome, $inicio, $horas, $local, $destinatarios, $dataLimite,$target_path);
}
echo json_encode($ret);
}
And this is the line where i have the error
$uploadfile = $uploaddir . '/' . basename($_FILES['fileToUpload']['name']);

Answer 1

e.preventDefault();
var fileToUpload= $('#fileToUpload')[0].files[0];
var idformacao = $("#idformacao").val();
var formData = new FormData(this);
formData.append('fileToUpload', fileToUpload);
formData.append('idformacao', idformacao);
//use this same format to append other of your fields
$.ajax({
type:'POST',
url: 'updates.php',
data:formData,
cache:false,
contentType: false,
processData: false,
success:function(response){
//You can continue with your response status code here
}
Just hope that this works for you.

Answer 2

Add data-bs-focus="false" in modal first line at the end:
id="myModalAtiv" class="modal fade bs-example-modal-lg" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-bs-focus="false"