Sweet Alert 2 carga de archivos jQuery con php
Estoy tratando de crear un cargador de archivos dentro de un modal Sweet Alert 2 con jQuery y php. Aquí está mi código, pero no funciona: ¿cómo puedo hacer que funcione?
Gracias
HTML (el botón para abrir el modal con Sweet Alert 2):
<button class="bx--btn bx--btn--primary" type="button" id="swal_upload">Apri</button>
JavaScript:
$('#swal_upload').click(function(){
var api = 'api/UploadFile.php';
swal({
title: "Carica immagine",
html: '<input id="fileupload" type="file" name="userfile">'
}).then(function() {
var formData = new FormData();
formData.append('userfile', $('#fileupload').val().replace(/.*(\/|\\)/, ''));
console.log(formData);
$.ajax({
type: 'POST',
url: api,
data: formData,
dataType: 'json',
processData: false,
contentType: false,
headers: {"Content-Type":"form-data"},
async: true,
success: function(result){
console.log("OK client side");
console.log(result.Response);
}
});
})
});
php (api / UploadFile.php):
$entered = "PHP started";
$tmpFilePath = $_FILES['userfile']['tmp_name'];
$uploaddir = 'public/';
if ($tmpFilePath != ""){
$newFilePath = $uploaddir . basename($_FILES['userfile']['name']);
if(move_uploaded_file($tmpFilePath, $newFilePath)) {
$uploaded = "Upload OK server side";
} else {
$uploaded = "Upload failed server side";
}
}
// Prepare response, close connection and send response to front-end
$array['Response'] = array(
'entered' => $entered,
'tmp_path' => $tmpFilePath,
'new_path' => $newFilePath,
'file_name' => $_FILES['file']['name'],
'uploaded' => $uploaded
);
echo json_encode($array);
La salida que tengo en la consola es:
FormData {}proto: FormData OK del lado del cliente {ingresado: "PHP iniciado", tmp_path: null, new_path: null, file_name: null, cargado: null} ingresado: "PHP iniciado" file_name: null new_path: null tmp_path: null cargado: nullproto:Objeto
Como puede ver, se inicia el php, pero no se pasa ningún archivo al servidor.