En este capítulo vamos a hacer un uploader, y tan sólo veremos la sintaxis de la subida de ficheros con la API de FETCH, lo subiremos del lado del servidor con PHP, en el siguiente capítulo veremos como hacer la barra de progreso, y en otro siguiente hacerlo DRAG AND DROP.
Necesitamos tener instalado un servidor web, podemos instalar un XAMP para tener un servidor web en modo local, lo podéis bajar desde la siguiente URL.
En este capítulo vamos a ver un nuevo tipo de objeto que veremos en ejercicios donde estén involucrados elementos de formulario. Podemos crear un objeto en Javascript denominado formData(), que veremos en el ejercicio de este capítulo. formData() que puede recibir como parámetro un formulario.
Vamos a disponer de dos archivos, que tienen la siguiente sintaxis.
Sintaxis del archivo uploader.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Uploader con AJAX</title>
<style>
html {
box-sizing: border-box;
font-family: sans-serif;
font-size: 16px;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
</style>
</head>
<body>
<main>
<input type="file" name="files" id="files" multiple />
</main>
<script>
const d = document,
$main = d.querySelector("main"),
$files = d.getElementById("files");
// Creamos función que mediante AJAX permita subir la carga de archivos
// Esta función se ejecutará por cada archivo que reciba el input
const uploader = (file) => {
const xhr = new XMLHttpRequest(),
formData = new FormData();
formData.append("file", file);
xhr.addEventListener("readystatechange", (e) => {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status < 300) {
let json = JSON.parse(xhr.responseText);
console.log(json);
} else {
let message = xhr.statusText || "Ocurrió un error";
console.log(`Error ${xhr.status}: ${message}`);
}
});
xhr.open("POST", "uploader.php");
xhr.setRequestHeader("enc-type", "multipart/form-data");
xhr.send(formData);
};
d.addEventListener("change", (e) => {
if (e.target === $files) {
const files = Array.from(e.target.files);
files.forEach((el) => uploader(el));
}
});
</script>
</body>
</html>
Sintaxis del archivo uploader.php.
<?php
if(isset($_FILES["file"])) {
$name = $_FILES["file"]["name"];
$file = $_FILES["file"]["tmp_name"];
$error = $_FILES["file"]["error"];
$destination = "./files/$name";
$upload = move_uploaded_file($file, $destination);
if($upload) {
$res = array(
"err" => false,
"status" => http_response_code(200),
"statusText" => "Archivo $name subido correctamente",
"files" => $_FILES["file"]
);
} else {
$res = array(
"err" => true,
"status" => http_response_code(400),
"statusText" => "Error al subir el archivo $name",
"files" => $_FILES["file"]
);
}
echo json_encode($res);
}