Good day,
First I clarify that I have a plugin that is alertify, for more dynamic alerts, at this moment I have a form in which I upload data from a patient from a clinic, but this form has an input file with which I have some validations which They are that the names should not be repeated, that they should not exceed x size, also validate that they are .pdf.
Here my .php code called add, as you can see I do the validations that I said before, I also clarify that I have a variable called $uploadOk that I have by default equal to 1, this in case in any validation it becomes affirmative it becomes 0 to end the query.
// Verificar si existe el archivo
if (file_exists($target_file)) {
echo "Lo sentimos, archivo ya existe.";
$uploadOk = 0;
}
// Verificar el tamaño
if ($_FILES["file"]["size"] > 5242808) {
echo "Lo sentimos, el archivo es demasiado grande. Tamaño máximo admitido: 5 MB";
$uploadOk = 0;
}
// Verificar el tipo de archivo
if($imageFileType != "pdf" ) {
echo "Lo sentimos, sólo se permiten archivos PDF.";
$uploadOk = 0;
}
// Verificar que la variable $uploadok no se haya visto cambiada
if ($uploadOk == 0) {
echo "Lo sentimos, tu archivo no fue subido.";
// Si la variable no fue modificada ejecutar la consulta en mysqli.
} else {
if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file))
I also want to specify that the data of the form and the query and others do not add it because everything is working fine, I just want to implement those alerts as a bonus so that the user knows what is happening, taking this into account I add the ajax code which I have in my script.
$.ajax({
type: 'POST',
url: 'procesos/agregar.php',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
beforeSend: function() {
$('.submitBtn').attr("disabled", "disabled");
$('#frmnuevo').css("opacity", ".5");
},
success: function(msg) {
$('#frmnuevo')[0].reset();
$('#tablaDatatable').load('tabla.php');
alertify.success("Se agrego con exito :D");
} else {
alertify.failed("No se puedo agregar paciente);
}
$('#frmnuevo').css("opacity", "");
$(".submitBtn").removeAttr("disabled");
}
});
The only alertify I have is for when the query is returned and if it has been confirmed, it gives me an alertify with what was added, and if there was an error I have another alertify but with its respective message.
Any advice on how I can do this with this plugin?
EDIT:
Following the advice, and making the respective changes, now I have a problem, now it does not send me anything from the form.
the input was left out of the form as follows:
<button type="button" id="btnAgregarnuevo" name="submit" class="btn btn-primary submitBtn"></button>
And the ajax or the complete script is as follows:;
$(document).ready(function() {
$('#btnActualizar').click(function() {
const formElement = document.querySelector("frmnuevo");
$.ajax({
type: 'POST',
url: 'procesos/agregar.php',
data: new FormData(formElement),
contentType: false,
cache: false,
processData: false,
beforeSend: function() {
$('.submitBtn').attr("disabled", "disabled");
$('#frmnuevo').css("opacity", ".5");
},
success: function(data) {
if(data.status){
$('#frmnuevo')[0].reset();
$('#tablaDatatable').load('tabla.php');
alertify.success("Se agrego con exito :D");
return; // Detenemos el código
} //En caso de que exista un error lo mostramos
alertify.failed(data.message);
else {
$('.statusMsg').html('<span style="font-size:18px;color:#EA4335">No ha subido el paciente.</span>');
}
$('#frmnuevo').css("opacity", "");
$(".submitBtn").removeAttr("disabled");
}
});
});
This is the function I have to send the input files:
$("#file").change(function() {
var file = this.files[0];
var imagefile = file.type;
var match = ["application/pdf"];
if (!((imagefile == match[0]))) {
alert('Please select a valid image file (pdf).');
$("#file").val('');
return false;
}
And the php validations were as follows:
header("Content-Type: application/json");
$response = array('status'=>false, 'message'=>null);
// Check if file already exists
if (file_exists($target_file)) {
$response['message'] = "Lo sentimos, archivo ya existe.";
echo json_encode($response);
$uploadOk = 0;
exit(); //Detenemos el código
});
});
To do that you should return a JSON similar to this with PHP:
To do this you can change some things in your file for example:
Now that we have changed all the responses, from the frontend we can do the following:
I hope I've helped.