Télécharger des fichiers via HTTP avec FormData

Pour télécharger des fichiers via HTTP avec Bun, utilisez l'API FormData. Commençons par un serveur HTTP qui sert un simple formulaire web HTML.

const server = Bun.serve({
  port: 4000,
  async fetch(req) {
    const url = new URL(req.url);

    // retourner index.html pour le chemin racine
    if (url.pathname === "/")
      return new Response(Bun.file("index.html"), {
        headers: {
          "Content-Type": "text/html",
        },
      });

    return new Response("Not Found", { status: 404 });
  },
});

console.log(`Listening on http://localhost:${server.port}`);

Nous pouvons définir notre formulaire HTML dans un autre fichier, index.html.

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Form</title>
  </head>
  <body>
    <form action="/action" method="post" enctype="multipart/form-data">
      <input type="text" name="name" placeholder="Name" />
      <input type="file" name="profilePicture" />
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

À ce stade, nous pouvons exécuter le serveur et visiter localhost:4000 pour voir notre formulaire.

bash

bun run index.ts
Listening on http://localhost:4000

Notre formulaire enverra une requête POST au point de terminaison /action avec les données du formulaire. Gérons cette requête dans notre serveur.

D'abord, nous utilisons la méthode .formData() sur la Request entrante pour analyser de manière asynchrone son contenu vers une instance FormData. Ensuite, nous pouvons utiliser la méthode .get() pour extraire la valeur des champs name et profilePicture. Ici, name correspond à une string et profilePicture est un Blob.

Enfin, nous écrivons le Blob sur le disque en utilisant Bun.write().

const server = Bun.serve({
  port: 4000,
  async fetch(req) {
    const url = new URL(req.url);

    // retourner index.html pour le chemin racine
    if (url.pathname === "/")
      return new Response(Bun.file("index.html"), {
        headers: {
          "Content-Type": "text/html",
        },
      });

    // analyser formdata à /action
    if (url.pathname === "/action") { 
      const formdata = await req.formData(); 
      const name = formdata.get("name"); 
      const profilePicture = formdata.get("profilePicture"); 
      if (!profilePicture) throw new Error("Must upload a profile picture."); 
      // écrire profilePicture sur le disque
      await Bun.write("profilePicture.png", profilePicture); 
      return new Response("Success"); 
    } 

    return new Response("Not Found", { status: 404 });
  },
});