En el artículo de hoy vas a aprender a enviar un Blob desde JavaScript del lado del cliente, a PHP en el lado del servidor. Básicamente te voy a enseñar a subir un archivo o montón de bytes representados con la clase Blob.

Un Blob en JS puede venir de cualquier lugar: puedes crearlo tú mismo, puede ser un archivo creado por ti o incluso un PDF generado com html2pdf.js.

En el ejemplo te enseñaré a subir un Blob que yo he creado usando new Blob, pero como te mencioné anteriormente, este Blob puede venir de cualquier lugar.

Creando Blob

Ya lo mencioné varias veces anteriormente, pero te lo vuelvo a decir: este montón de bytes de JavaScript pueden venir de cualquier lugar. Mientras sea un Blob o similar, vas a poder subirlo.

En este ejemplo he creado un archivo de texto plano:

const miBlob = new Blob(["Hola mundo"], { type: "text/plain" });

Subiendo Blob desde JavaScript

Ahora vamos a hacer lo mismo que hicimos cuando subimos un archivo (File) de JavaScript a PHP. Usaremos FormData y fetch para enviarlo:

const miBlob = new Blob(["Hola mundo"], { type: "text/plain" });
const formData = new FormData();
formData.append("miBlob", miBlob);
formData.append("nombre", "archivo.txt");
fetch("./recibir.php", {
    method: "POST",
    body: formData,
}).then(respuestaHttp => {
    return respuestaHttp.text();
}).then(respuestaComoTexto => {
    console.log("El servidor dice: " + respuestaComoTexto);
})

Los campos a tomar en cuenta son recibir.php que es el endpoint donde se va a recibir el archivo con PHP, el body que es el FormData y que además del archivo lleva una variable de tipo texto y finalmente el método que será POST.

Recibir archivo con PHP

Ya hemos creado el Blob con JavaScript y lo hemos enviado; ahora falta recibirlo con PHP en el servidor.

Los archivos recibidos estarán en el arreglo superglobal $_FILES, y las otras variables que no son archivos van a estar en el arreglo superglobal $_POST.

En este caso estoy usando move_uploaded_file para mover el archivo subido a la misma ubicación donde se encuentra mi script de PHP, nombrando el archivo según la variable que viene en $_POST["nombre"]:

<?php
$archivo = $_FILES["miBlob"];
$nombreArchivo = $_POST["nombre"];
move_uploaded_file($archivo["tmp_name"], $nombreArchivo);
echo "OK";

Nota sobre la seguridad: como este es un ejemplo didáctico, estoy enviando el nombre del archivo desde el cliente. Esto puede tener algunas implicaciones, ya que un atacante podría reemplazar el contenido de cualquier archivo. Es tu responsabilidad sanitizar y validar los valores.

Conclusión

Así de simple es comunicar JavaScript con PHP enviando un Blob o montón de bytes. Esto es muy útil al momento de subir un archivo binario desde JS a un servidor PHP.