React & Expo - Comment télécharger et télécharger des fichiers

Introduction

J'ai eu du mal à trouver des exemples clairs sur la façon de télécharger et de télécharger des fichiers dans une application mobile basée sur Expo. Pour aider les autres confrontés au même défi – ou toute personne simplement curieuse – j'ai écrit cet article.

En cours de route, nous explorerons les concepts clés qu'il est utile de comprendre :

• Tampons
• Filtres d'intention
• Types MIME
• application/octet-stream
• multipart/form-data
• Et plus encore...

Ce que nous couvrirons :

• Envoi et réception de fichiers avec un serveur Fastify.
• Téléchargement, téléchargement et affichage de fichiers sur une application Web React.
• Téléchargement, téléchargement et affichage de fichiers sur une application mobile React Native (Expo).

Tous les codes et la collection Postman sont disponibles dans mon GitHub.

Serveur

Le serveur fonctionne sur Fastify (une version modernisée d'Express.js). Pour démarrer l'application, procédez comme suit :

1. À l'aide du terminal, accédez à /server
2. Installez les dépendances avec npm install
3. Exécutez le serveur en utilisant npm run dev

Dans app.js, nous avons trois points de terminaison clés :

- Télécharger le point de terminaison (/download)

fastify.get("/download", async function handler(_, reply) {
  const fd = await open(FILE_TO_DOWNLOAD);
  const stream = fd.createReadStream();

  const mimeType = mime.lookup(FILE_TO_DOWNLOAD);

  console.log(`Downloading -> ${FILE_TO_DOWNLOAD}`);

  return reply
    .type(mimeType)
    .header(
      "Content-Disposition",
      `attachment; filename=${path.basename(FILE_TO_DOWNLOAD)}`
    )
    .send(stream);
});

Ce point de terminaison envoie example.webp sous forme de flux à l'aide de createReadStream(). Le type MIME est inclus afin que le client sache comment gérer le fichier. Par exemple.webp, ce sera image/webp.

?Remarque : Le type MIME définit le format du fichier envoyé. Cela aide le client à l'afficher correctement.
Voir plus de types MIME.

L'en-tête Content-Disposition définit comment le contenu doit être présenté au client. Y compris la pièce jointe ; nom de fichier= invite le navigateur à télécharger le fichier plutôt que de l'afficher en ligne. Pour l'afficher directement, utilisez en ligne au lieu de pièce jointe.
En savoir plus sur la disposition du contenu

- Téléchargez plusieurs fichiers à l'aide de données de formulaire (/upload-multiples)

fastify.post("/upload-multiples", async function handler(request) {
  const parts = request.files();
  const uploadResults = [];

  for await (const file of parts) {
    const fileBuffer = await file.toBuffer();
    const filename = file.filename;
    const filePath = path.join(DIR_TO_UPLOAD, filename);

    await writeFile(filePath, fileBuffer);
    uploadResults.push({ filename, uploaded: true });
    console.log(`Uploaded -> ${filePath}`);
  }

  return { uploadedFiles: uploadResults };
});

Ce point de terminaison accepte une requête multipart/form-data. Il :

1. Récupère les fichiers de la requête.
2. Convertit chaque fichier en tampon (une représentation JavaScript de données binaires).
3. Enregistre le fichier dans le répertoire /upload.

Par exemple, une demande pourrait ressembler à ceci :

- Télécharger des fichiers à l'aide d'Octet Stream (/upload-octet-stream)

fastify.get("/download", async function handler(_, reply) {
  const fd = await open(FILE_TO_DOWNLOAD);
  const stream = fd.createReadStream();

  const mimeType = mime.lookup(FILE_TO_DOWNLOAD);

  console.log(`Downloading -> ${FILE_TO_DOWNLOAD}`);

  return reply
    .type(mimeType)
    .header(
      "Content-Disposition",
      `attachment; filename=${path.basename(FILE_TO_DOWNLOAD)}`
    )
    .send(stream);
});

Ce point de terminaison attend un seul fichier binaire dans le corps de la requête (application/octet-stream). Contrairement à multipart/form-data, le fichier est déjà une donnée binaire, nous pouvons donc l'écrire directement sur le disque.

La demande ressemblera à ceci dans Postman :

Web (Réagir)

Pour exécuter l'application :

1. À l'aide du terminal, accédez à /web
2. Installez les dépendances avec npm install
3. Démarrez l'application en utilisant npm run dev

Toutes les fonctionnalités de l'application Web sont contenues dans App.tsx :

Cette application React offre trois fonctionnalités clés :

- Télécharger/Afficher le fichier

fastify.post("/upload-multiples", async function handler(request) {
  const parts = request.files();
  const uploadResults = [];

  for await (const file of parts) {
    const fileBuffer = await file.toBuffer();
    const filename = file.filename;
    const filePath = path.join(DIR_TO_UPLOAD, filename);

    await writeFile(filePath, fileBuffer);
    uploadResults.push({ filename, uploaded: true });
    console.log(`Uploaded -> ${filePath}`);
  }

  return { uploadedFiles: uploadResults };
});

Lorsque l'utilisateur clique sur le bouton "Télécharger", l'application :

1. Appelle le point de terminaison /download.
2. Reçoit le fichier sous forme de blob binaire.
3. Crée une URL d'objet à partir du blob, agissant comme une URL temporaire à laquelle le navigateur peut accéder.

Le comportement dépend de l'en-tête Content-Disposition renvoyé par le serveur :

• Si Content-Disposition inclut inline, le fichier est affiché dans un nouvel onglet.
• S'il inclut une pièce jointe, le fichier est téléchargé automatiquement.

Pour déclencher le téléchargement, l'application crée un fichier avec le href défini sur l'objectURL et clique dessus par programme, simulant une action de téléchargement de l'utilisateur.

- Télécharger un fichier à l'aide des données du formulaire

fastify.post("/upload-octet-stream", async function handler(request) {
  const filename = request.headers["x-file-name"] ?? "unknown.text";

  const data = request.body;
  const filePath = path.join(DIR_TO_UPLOAD, filename);

  await writeFile(filePath, data);

  return { uploaded: true };
});

Lorsque le bouton « Télécharger le fichier » est cliqué :

1. La fonction uploadFile s'exécute, créant un élément et simulant un clic d'utilisateur.
2. Une fois que l'utilisateur sélectionne un ou plusieurs fichiers, ces fichiers sont ajoutés à un objet FormData.
3. La requête est envoyée au point de terminaison /upload-multiples, qui accepte les fichiers via multipart/form-data.

Cela permet au serveur de gérer et d'enregistrer correctement les fichiers téléchargés.

- Télécharger des fichiers à l'aide d'Octet Stream

  const downloadFile = async () => {
    const response = await fetch(DOWNLOAD_API);

    if (!response.ok) throw new Error("Failed to download file");

    const blob = await response.blob();

    const contentDisposition = response.headers.get("Content-Disposition");

    const isInline = contentDisposition?.split(";")[0] === "inline";
    const filename = contentDisposition?.split("filename=")[1];

    const url = window.URL.createObjectURL(blob);

    if (isInline) {
      window.open(url, "_blank");
    } else {
      const a = document.createElement("a");
      a.href = url;
      a.download = filename || "file.txt";
      a.click();
    }

    window.URL.revokeObjectURL(url);
  };

Cette approche est plus simple que d'utiliser multipart/form-data : envoyez simplement le fichier directement dans le corps de la requête sous forme de données binaires et incluez le nom du fichier dans les en-têtes de la requête.

Mobile (Expo)

Vous pouvez démarrer l'application avec ce qui suit :

1. Accédez à l'annuaire mobile dans votre terminal.
2. Installer les dépendances : npm install
3. Exécutez le projet avec npm run android ou npm run ios

La logique principale est dans App.tsx où elle restitue ce qui suit :

fastify.get("/download", async function handler(_, reply) {
  const fd = await open(FILE_TO_DOWNLOAD);
  const stream = fd.createReadStream();

  const mimeType = mime.lookup(FILE_TO_DOWNLOAD);

  console.log(`Downloading -> ${FILE_TO_DOWNLOAD}`);

  return reply
    .type(mimeType)
    .header(
      "Content-Disposition",
      `attachment; filename=${path.basename(FILE_TO_DOWNLOAD)}`
    )
    .send(stream);
});

Pour afficher le fichier dans une nouvelle vue (comme lorsque le navigateur ouvre le fichier dans un nouvel onglet), nous devons lire la réponse sous forme de blob, puis la transformer en base64 à l'aide de FileReader.

Nous écrivons le fichier dans le répertoire cache (un répertoire privé auquel seule l'application a accès), puis l'affichons à l'aide d'IntentLauncher ou de Sharing si l'utilisateur utilise iOS.

- Télécharger le fichier

fastify.post("/upload-multiples", async function handler(request) {
  const parts = request.files();
  const uploadResults = [];

  for await (const file of parts) {
    const fileBuffer = await file.toBuffer();
    const filename = file.filename;
    const filePath = path.join(DIR_TO_UPLOAD, filename);

    await writeFile(filePath, fileBuffer);
    uploadResults.push({ filename, uploaded: true });
    console.log(`Uploaded -> ${filePath}`);
  }

  return { uploadedFiles: uploadResults };
});

Ceci est similaire au processus Web mais nous devons lire le blob en base64 à l'aide de FileReader, puis demander l'autorisation de télécharger le fichier là où l'utilisateur souhaite enregistrer le fichier.

- Télécharger un fichier à l'aide des données du formulaire

fastify.post("/upload-octet-stream", async function handler(request) {
  const filename = request.headers["x-file-name"] ?? "unknown.text";

  const data = request.body;
  const filePath = path.join(DIR_TO_UPLOAD, filename);

  await writeFile(filePath, data);

  return { uploaded: true };
});

Utilisez DocumentPicker pour permettre aux utilisateurs de sélectionner des fichiers, puis utilisez FormData pour ajouter les fichiers sélectionnés à la demande. Le processus est très simple.

- Télécharger le fichier sous forme de flux d'octets

  const downloadFile = async () => {
    const response = await fetch(DOWNLOAD_API);

    if (!response.ok) throw new Error("Failed to download file");

    const blob = await response.blob();

    const contentDisposition = response.headers.get("Content-Disposition");

    const isInline = contentDisposition?.split(";")[0] === "inline";
    const filename = contentDisposition?.split("filename=")[1];

    const url = window.URL.createObjectURL(blob);

    if (isInline) {
      window.open(url, "_blank");
    } else {
      const a = document.createElement("a");
      a.href = url;
      a.download = filename || "file.txt";
      a.click();
    }

    window.URL.revokeObjectURL(url);
  };

Le téléchargement en tant qu'application/octet-stream est encore plus simple que l'utilisation de FormData : définissez les en-têtes avec les détails du fichier et le type de contenu, puis ajoutez le fichier au corps de la requête et c'est tout !

Conclusion

Il peut être un peu déroutant de savoir comment afficher, télécharger et télécharger des fichiers entre plates-formes. Dans cet article, nous avons vu les plus courants.

J'espère vous avoir aidé ?

Suivez-moi sur @twitter

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!