React & Expo - Cara Muat Naik & Muat Turun Fail

pengenalan

Saya bergelut untuk mencari contoh yang jelas tentang cara memuat naik dan memuat turun fail dalam apl mudah alih berasaskan Ekspo. Untuk membantu orang lain yang menghadapi cabaran yang sama—atau sesiapa sahaja yang ingin tahu—saya menulis siaran ini.

Sepanjang perjalanan, kami akan meneroka konsep utama yang berharga untuk difahami:

• Penimbal
• Penapis Niat
• Jenis MIME
• aplikasi/strim oktet
• berbilang bahagian/data-bentuk
• Dan banyak lagi...

Apa yang akan kami bincangkan:

• Menghantar dan menerima fail dengan pelayan Fastify.
• Memuat naik, memuat turun dan memaparkan fail pada apl web React.
• Memuat naik, memuat turun dan memaparkan fail pada apl mudah alih React Native (Ekspo).

Semua kod dan koleksi Posmen tersedia dalam GitHub saya.

Pelayan

Pelayan berjalan pada Fastify (versi Express.js yang dimodenkan). Untuk memulakan aplikasi lakukan fallowing:

1. Menggunakan terminal navigasi ke /server
2. Pasang kebergantungan dengan pemasangan npm
3. Jalankan pelayan menggunakan npm run dev

Dalam app.js kami mempunyai tiga titik akhir utama:

- Muat turun titik akhir (/muat turun)

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);
});

Titik akhir ini menghantar example.webp sebagai strim menggunakan createReadStream(). Jenis MIME disertakan supaya pelanggan tahu cara mengendalikan fail. Contohnya.webp, ini akan menjadi imej/webp.

?Nota: Jenis MIME mentakrifkan format fail yang dihantar. Ini membantu pelanggan memaparkannya dengan betul.
Lihat lebih banyak jenis MIME.

Pengepala Kandungan-Pelupusan mentakrifkan cara kandungan harus dipersembahkan kepada pelanggan. Termasuk lampiran; nama fail= menggesa penyemak imbas untuk memuat turun fail daripada memaparkannya sebaris. Untuk memaparkannya secara langsung, gunakan sebaris dan bukannya lampiran.
Ketahui lebih lanjut tentang Content-Disposition

- Muat naik Berbilang fail menggunakan Data Borang (/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 };
});

Titik akhir ini menerima permintaan data berbilang bahagian/borang. Ia:

1. Mengambil semula fail daripada permintaan.
2. Menukar setiap fail kepada Penampan (perwakilan JavaScript bagi data binari).
3. Menyimpan fail ke direktori /upload.

Sebagai contoh, permintaan mungkin kelihatan seperti ini:

- Muat naik Fail menggunakan Strim Oktet (/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);
});

Titik akhir ini menjangkakan satu fail binari dalam badan permintaan (aplikasi/strim oktet). Tidak seperti data berbilang bahagian/bentuk, fail itu sudah pun menjadi data binari, jadi kami boleh menulisnya terus ke cakera.

Permintaan akan kelihatan seperti ini dalam Posmen:

Web (React)

Untuk menjalankan apl:

1. Menggunakan terminal navigasi ke /web
2. Pasang kebergantungan dengan pemasangan npm
3. Mulakan apl menggunakan npm run dev

Semua fungsi untuk aplikasi web terkandung dalam App.tsx:

Apl React ini menyediakan tiga ciri utama:

- Muat Turun/Paparkan Fail

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 };
});

Apabila pengguna mengklik butang "Muat Turun", apl:

1. Panggil titik akhir /muat turun.
2. Menerima fail sebagai gumpalan binari.
3. Mencipta objectURL daripada gumpalan, bertindak sebagai URL sementara yang boleh diakses oleh penyemak imbas.

Tingkah laku bergantung pada pengepala Content-Disposition yang dikembalikan oleh pelayan:

• Jika Pelupusan Kandungan termasuk sebaris, fail dipaparkan dalam tab baharu.
• Jika ia termasuk lampiran, fail itu dimuat turun secara automatik.

Untuk mencetuskan muat turun, apl mencipta sementara elemen dengan href ditetapkan ke objectURL dan mengkliknya secara pemrograman, mensimulasikan tindakan muat turun pengguna.

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 };
});

  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);
  };

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);
});

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 };
});

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 };
});

  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);
  };