React & Expo - How to Upload & Download Files

Introduction

I struggled to find clear examples on how to upload and download files in an Expo-based mobile app. To help others facing the same challenge—or anyone simply curious—I wrote this post.

Along the way, we’ll explore key concepts that are valuable to understand:

• Buffers
• Intent Filters
• MIME types
• application/octet-stream
• multipart/form-data
• And more...

What we’ll cover:

• Sending and receiving files with a Fastify server.
• Uploading, downloading, and displaying files on a React web app.
• Uploading, downloading, and displaying files on a React Native (Expo) mobile app.

All code and the Postman collection are available in my GitHub.

Server

The server runs on Fastify (a modernized version of Express.js). To start the app do the fallowing:

1. Using the terminal navigate to /server
2. Install the dependencies with npm install
3. Run the server using npm run dev

In app.js we have three key endpoints:

- Download endpoint (/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);
});

This endpoint sends example.webp as a stream using createReadStream(). The MIME type is included so the client knows how to handle the file. For example.webp, this will be image/webp.

?Note: The MIME type defines the format of the file being sent. This helps the client display it correctly.
See more MIME types.

The Content-Disposition header defines how the content should be presented to the client. Including attachment; filename= prompts the browser to download the file rather than display it inline. To display it directly, use inline instead of attachment.
Learn more about Content-Disposition

- Upload Multiples files using Form Data (/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 };
});

This endpoint accepts a multipart/form-data request. It:

1. Retrieves the files from the request.
2. Converts each file to a Buffer (a JavaScript representation of binary data).
3. Saves the file to the /upload directory.

For example, a request might look like this:

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

This endpoint expects a single binary file in the request body (application/octet-stream). Unlike multipart/form-data, the file is already binary data, so we can write it directly to disk.

The request will look something like this in Postman:

Web (React)

To run the app:

1. Using the terminal navigate to /web
2. Install the dependencies with npm install
3. Start the app using npm run dev

All functionality for the web application is contained in App.tsx:

This React app provides three key features:

- Download/Display 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 };
});

When the user clicks the "Download" button, the app:

1. Calls the /download endpoint.
2. Receives the file as a binary blob.
3. Creates an objectURL from the blob, acting as a temporary URL that the browser can access.

The behavior depends on the Content-Disposition header returned by the server:

• If Content-Disposition includes inline, the file is displayed in a new tab.
• If it includes attachment, the file is downloaded automatically.

To trigger the download, the app creates a temporary element with the href set to the objectURL and programmatically clicks it, simulating a user download action.

- 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!