- Upload File using Form Data

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

When the "Upload File" button is clicked:

1. The uploadFile function runs, creating a hidden element and simulating a user click.
2. Once the user selects one or more files, those files are appended to a FormData object.
3. The request is sent to the /upload-multiples endpoint, which accepts files via multipart/form-data.

This allows the server to properly handle and save the uploaded files.

- Upload Files using 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);
  };

This approach is simpler than using multipart/form-data—just send the file directly in the request body as binary data, and include the filename in the request headers.

Mobile (Expo)

You can start the app with the fallowing:

1. Navigate to the mobile directory in your terminal.
2. Install the dependencies: npm install
3. Run the proyect with npm run android or npm run ios

The main logic is in App.tsx where it renders the fallowing:

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

To display the file in a new view (Like when the browser open the file in a new tab) we have to read the response as a blob and then transform it to base64 using FileReader.

We write the file in the cache directory (a private directory where only the app have access) and then display it using IntentLauncher or Sharing if the user is using iOS.

- Download File

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

This is similar to the web process but we have to read the blob as a base64 using FileReader and then ask for permission to donwload the file where the user wants to save the file.

- Upload File using Form Data

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

Use DocumentPicker to enable users to select files, then utilize FormData to append the selected files to the request. The process is very straightforward.

- Upload File as 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);
  };

Uploading as Application/octet-stream is even simpler then using FormData: set the headers with the file details and content type, then add the file to the request body and that's it!

Conclusion

It can be a bit confusing how to view, download and upload files between platforms, in this posts we saw the most common ones.

I hope to have helped you ?

Fallow me on @twitter

The above is the detailed content of React & Expo - How to Upload & Download Files. For more information, please follow other related articles on the PHP Chinese website!