1

Lo que quiero hacer es enviar una solicitud con fetch que contiene en su body un objeto File y desde PHP acceder al File y devolverlo. Lo que tengo es esto:

En JavaScript:

const archivo = new File(["foo"], "foo.txt");
       fetch("php.php", {method:"POST", body:archivo})
           .then((response) => response.text())
           .then((text)=>{
           console.log(text);
       })
   }

En php:

<?php
  echo $_POST["body"];
?>

Supongo que falla porque $_POST["body"] no accede al archivo que he puesto en el body del fetch. ¿Cómo puedo acceder a el?

Intentando averiguarlo por internet no encontré mucha información porque la mayoria de datos del body del fetch eran objetos y tenian pares clave:valor o simplemente eran formData en los ejemplos que yo encontraba.

Quise averiguar que había en el $_POST del php para saber si había alguna clave para acceder a ese archivo del body pero ocurrio esto:

<?php
  var_dump($_POST);
?>

De nuevo en JS:

const archivo = new File(["foo"], "foo.txt");
       fetch("php.php", {method:"POST", body:archivo})
           .then((response) => response.text())
           .then((text)=>{
           console.log(text);//array(0){ }
       })
   }

Entonces me surgió la duda de que si el archivo del body se estaba enviando junto a la solicitud. Al parecer no lo hace ¿porque? y como si lo hubiera hecho ¿cómo podría haber accedido a el?

Muchísimas gracias!

2 respuestas 2

4

Te cuento algo

Para enviar archivos a través de AJAX con Fetch deberías enviar tus datos con un FormaData y el header Content-Type con el valor multipart/form-data

Como en el siguiente ejemplo:

<input type="file" id="myFile" name="myFile">
<button id="send">Enviar</button>
// Obtenemos una referencia al input tipo file
const myFileElement = document.querySelector('#myFile');
// Obtenemos una referencia al botón de enviar
const sendBtn = document.querySelector('#send');
// Aqui guardaremos el archivo
let myFile = null;

// Obtenemos el file en cuanto te agregue uno nuevo al input
myFileElement.addEventListener('change', event => {
    myFile = event.target.files[0]
});

sendBtn.addEventListener('click', event => {
    // Prevenimos cualquier acción por defecto del boton
    event.preventDefault();

    // Creamos el FormData y le añadimos un campo
    const formData = new FormData();
    formData.append('myFile', myFile);

    // Enviamos la solicitud AJAX de tipo POST
    fetch('php.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'multipart/form-data'
        },
        body: formData
    })
    .then(res => {
        // Imprimimos la respuesta
        console.log(res.json())
    });
});

Y del lado del servidor con PHP hacemos lo siguiente:

<?php
// Se establece el tipo de contenido de la respuesta
header('Content-Type: application/json');

// La variable global $_FILES contiene los archivos subidos
if (isset($_FILES) && count($_FILES) > 0 && isset($_FILES['myFile'])) {
    http_response_code(200);
    
    echo json_encode($_FILES['myFile']);
}
else {
    http_response_code(400);

    echo json_encode([
        'message' => 'Error, no se encontro ningun archivo'
    ]);
}

Ese sería un ejemplo algo completo de como sería el proceso, si quieres devolver el archivo completo, por ejemplo en formato data-uri el proceso es un poco distinto.

Respuesta extendida: ¿Como enviar archivos con por AJAX en formato json?

Como te decía en los comentarios el uso de un FormaData para enviar archivos al servidor funciona muy bien pero en caso de que necesites enviarlos en formato json hay una alternativa

Y es la siguiente:

// Obtenemos una referencia al input tipo file
const myFileElement = document.querySelector('#myFile');
// Obtenemos una referencia al botón de enviar
const sendBtn = document.querySelector('#send');
// Aqui guardaremos el archivo
let myFile = null;
let base64 = null;

// Obtenemos el file en cuanto te agregue uno nuevo al input
myFileElement.addEventListener('change', event => {
    myFile = event.target.files[0]
});

sendBtn.addEventListener('click', event => {
    // Prevenimos cualquier acción por defecto del botón
    event.preventDefault();

    // Creamos un FileReader para obtener el Base64 del archivo
    const fileReader = new FileReader();

    fileReader.addEventListener('load', () => {
        base64 = fileReader.result.replace(/^data:(.+)\/(.+);base64,/i, '');
    });

    fileReader.readAsDataURL(myFile);

    // Enviamos la solicitud AJAX de tipo POST
    fetch('php.php', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
             archivo: {
                 name: myFile.name,
                 type: myFile.type,
                 content: base64
             }
        })
    })
    .then(res => {
        // Imprimimos la respuesta
        console.log(res.json())
    });
});

Y en ese caso del lado de PHP haremos lo siguiente:

<?php

// Se establece el tipo de contenido de la respuesta
header('Content-Type: application/json');

// Obtenemos los valores enviados a través de AJAX
$json_post = json_decode(file_get_contents('php://input'), true) ?? null;

// En este caso el archivo no estará en $_FILES sino en en la URL php://input
if (!is_null($json_post) && isset($json_post['archivo'])) {
    http_response_code(200);

    echo json_encode($json_post['archivo']);
}
else {
    http_response_code(400);

    echo json_encode([
        'message' => 'Error, no se encontro ningun archivo'
    ]);
}

La Clase de Javascript usada para leer obtener el base64 del archivo es FileReader. Básicamente nos permite leer un Blob o File como data-uri, que es un formato de URL que trae el binario del archivo y su tipo incrustado en la URL y parseado a base64.

Nota extra: ¿Cómo hacer para almacenar el archivo en este caso?

Bien en ese caso solo haremos lo siguiente:

<?php

// Obtenemos los valores enviados a través de AJAX
$json_post = json_decode(file_get_contents('php://input'), true) ?? null;

// En este caso el archivo no estará en $_FILES sino en en la URL php://input
if (!is_null($json_post) && isset($json_post['archivo'])) {
    // Creamos el archivo y obtenemos su resource
    $file = fopen($json_post['archivo']['name'], 'w+');
    
    // Parseamos a binario el base64
    $bin = base64_decode($json_post['archivo']['content']);
    
    // Escribimos el archivo
    fwrite($file, $bin);
   
    // Cerramos el archivo
    fclose($file);
}
4
  • No hay ninguna otra forma de haerlo sin usar FormData?
    – Roberto
    Commented el 21 ene. 2023 a las 17:22
  • No veo porqué no usar FormData, pero sí, claro que hay una manera de enviarlo como json aunque más pesada en cuestiones de rendimiento, ya editó y la agrego a la respuesta
    – Josbert
    Commented el 21 ene. 2023 a las 17:26
  • @Roberto listo amigo, ya agregue una nota bastante extendida jaja espero haber aclarado tus dudas
    – Josbert
    Commented el 21 ene. 2023 a las 18:45
  • jaja, si que me aclaraste ^^, pero me acaba de surgir otra duda, viendo esto developer.mozilla.org/en-US/docs/Web/API/Fetch_API/…, dice que yo puedo enviar cualquier tipo de dato en ese formato, el problema y por eso pregunte antes, era que si yo enviaba datos en forma de FIle (o ArrayBuffer o Blob, ....), como accedo a través de PHP a ellos?
    – Roberto
    Commented el 22 ene. 2023 a las 0:00
1

Si no usas un formulario el contenido lo puedes obtener directamente del flujo de entrada php://input especificando el tipo de contenido.

En este ejemplo se envía a PHP el archivo con texto foo y regresa la cadena modificada foobar:

<?php
   if( isset($_SERVER['CONTENT_TYPE']) ){
      header( 'Content-Type: '.$_SERVER['CONTENT_TYPE'] );
      $txt = file_get_contents( 'php://input' );
      $txt .= 'bar';
      echo $txt;
   }else{ 
?>
<script>
function enviar(){
   const archivo = new File( ["foo"], "foo.txt", {type: "text/plain"} )
   fetch( ''
        , { method: 'POST'
          , headers: { 'Content-Type': archivo.type }
          , body: archivo
          } 
        ).then( (res) => console.log( res.text() ) )
}
</script>
<button onclick="enviar()">Enviar</button>
<?php } ?>
2
  • Gracias era justo lo que quería! Aunque eso no es muy inseguro? Me refiero a que si puede presentar fallos de seguridad o que me puedan hackear usando eso?
    – Roberto
    Commented el 23 ene. 2023 a las 18:14
  • En cuanto a seguridad, todo depende de lo que hagas después con el contenido, como en cualquier otro código.
    – Sal
    Commented el 23 ene. 2023 a las 19:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.