DEV Community: José Núñez Riveros

React Native - Make your app appear in your device's file picker [Expo Modules]

José Núñez Riveros — Sun, 23 Feb 2025 17:28:12 +0000

When you select a file to attach to an email, have you ever wondered how to make your app appear as shown below and enable file selection?

That's possible thanks to Expo Modules, and I'm going to show you how to do it with Expo. It's kind of simple.

Disclaimer: This only works on Android. iOS does not support this functionality.

The project I'll show you can be found on my Github.

First, in an expo project, we need to start by creating a new expo-module

npx create-expo-module expo-settings

I named the module ContentIntent, and it will be created in the modules folder at the root of your project.

For your app to appear in the file picker, it is necessary to expose the getIntent and setIntent functions from the Android native code. These functions allow us to receive the intent for picking a file from our app and send the file back. This is why we need a native module.

So we modified modules/content-intent/android/src/main/java/../contentintent/ContentIntentModule.kt to expose these native functions:

class ContentIntentModule : Module() {
  override fun definition() = ModuleDefinition {
    Name("ContentIntent")

    Function("getIntent") { getIntent() }
    Function("setResult") { options: ResultOptions -> setResult(options) }
  }

   private val currentActivity
    get() =
        appContext.activityProvider?.currentActivity
            ?: throw CodedException(
                "Activity which was provided during module initialization is no longer available."
            )

  private val context
    get() = requireNotNull(appContext.reactContext)

  private fun getIntent(): Map<String, Any?> {
    val intent = currentActivity.intent
    return mapOf(
        "action" to intent.action,
        "categories" to intent.categories?.toList(),
        "data" to intent.dataString,
        "type" to intent.type,
        "flags" to intent.flags,
        "extras" to intent.extras
    )
  }

  private fun setResult(options: ResultOptions) {
    val resultCode = Activity.RESULT_OK
    val resultIntent =
        Intent(
            if (options.action != null) options.action else context.packageName + ".RESULT_ACTION"
        )
    resultIntent.data = Uri.parse(options.uris[0])
    if (options.uris.size > 1) {
      val clipData = ClipData.newRawUri(null, Uri.parse(options.uris[1]))
      for (i in 2 until options.uris.size) {
        clipData.addItem(ClipData.Item(Uri.parse(options.uris[i])))
      }
      resultIntent.clipData = clipData
    }
    resultIntent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION)
    currentActivity.setResult(resultCode, resultIntent)
    currentActivity.finish()
  } 
}

In modules/content-intent/index.ts, we import the exposed APIs and export them for use in the app:

import { Intent, ResultOptions } from "./src/ContentIntent.types";
import ContentIntentModule from "./src/ContentIntentModule";
import { Platform } from "react-native";

export function getIntent(): Intent | null {
  if (Platform.OS !== "android") return null;

  return ContentIntentModule.getIntent();
}

export function setResult(options: ResultOptions): void {
  if (Platform.OS !== "android") return;

  ContentIntentModule.setResult(options);
}

export { Intent, ResultOptions };

Then, in app.json, we must add the GET_CONTENT intent filters so that our app can be selected in the File Picker.

 android: {
    ...
    intentFilters: [
      {
        action: "GET_CONTENT",
        data: {
          mimeType: "*/*",
        },
        category: ["DEFAULT", "OPENABLE"],
      },
    ],
  },

We create a custom hook called useCurrentIntent that allows us to listen for the GET_CONTENT intent and set a result for it.

import {
  ResultOptions,
  getIntent,
  setResult as setResultBase,
} from "../modules/content-intent";
import {
  cacheDirectory,
  copyAsync,
  getContentUriAsync,
  getInfoAsync,
} from "expo-file-system";
import { useCallback, useState } from "react";

export function useCurrentIntent() {
  const [intent] = useState(getIntent);

  const setResult = useCallback(
    async ({ isOK, action, uris }: ResultOptions) => {
      if (!isOK || !uris?.length) {
        setResultBase({ isOK: false });
        return;
      }
      if (
        !intent?.extras?.["android.intent.extra.EXTRA_ALLOW_MULTIPLE"] &&
        uris.length > 1
      ) {
        console.error("Multiple files are not allowed", { isOK, action, uris });
        setResultBase({ isOK: false });
        return;
      }
      const destFiles = await Promise.all(
        uris.map(async (uri: any) => {
          const destFile = (cacheDirectory ?? "") + new URL(uri).pathname;
          if (!(await getInfoAsync(destFile)).exists) {
            await copyAsync({ from: uri, to: destFile });
          }
          return getContentUriAsync(destFile);
        })
      );
      setResultBase({ isOK, action, uris: destFiles });
    },
    [intent]
  );

  return { intent, setResult };
}

Finally, in app.tsx, we use the custom hook to change the view when the app is opened from the File Picker, and we return the picked file to the intent.

export default function App() {
  const { intent, setResult } = useCurrentIntent();

  const handleSetFile = async (url: string) => {
    const res = await downloadFile(url);
    await setResult({ isOK: true, uris: [res.uri] });
  };

  return (
    <View style={styles.container}>
      ...
      {intent?.action === "android.intent.action.GET_CONTENT" && (
        <View style={{ height: 120, gap: 4 }}>
          <Text style={{ alignSelf: "center", fontWeight: "bold" }}>
            Choose a file:
          </Text>
          <ScrollView
            horizontal
            style={{ height: 120 }}
            contentContainerStyle={{
              gap: 8,
              height: 120,
            }}
          >
            {EXAMPLE_FILES.map((url) => (
              <TouchableOpacity key={url} onPress={() => handleSetFile(url)}>
                <Image
                  source={{ uri: url }}
                  style={{ width: 120, height: 120 }}
                />
              </TouchableOpacity>
            ))}
          </ScrollView>
        </View>
      )}

      ...
    </View>
  );
}

So now, we can pick a file from our app:

That's it! 🔥

See my other posts:

React & Expo - How to Upload & Download Files

React & Expo - How to Upload & Download Files

José Núñez Riveros — Sun, 08 Dec 2024 18:54:11 +0000

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:

Using the terminal navigate to /server
Install the dependencies with npm install
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=<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:

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

For example, a request might look like this:

- Upload Files using Octet Stream (`/upload-octet-stream`)

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

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:

Using the terminal navigate to /web
Install the dependencies with npm install
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

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

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

Calls the /download endpoint.
Receives the file as a binary blob.
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 <a> element with the href set to the objectURL and programmatically clicks it, simulating a user download action.

- Upload File using Form Data

  const uploadFile = async () => {
    const input = document.createElement("input");
    input.type = "file";
    input.multiple = true;
    input.click();

    input.onchange = async (event) => {
      const files = (event as unknown as React.ChangeEvent<HTMLInputElement>)
        .target?.files;

      if (!files) return;

      const formData = new FormData();
      Array.from(files).forEach((file) => {
        formData.append("files", file);
      });

      const res = await fetch(UPLOAD_MULTIPLE_API, {
        method: "POST",
        body: formData,
      });

      if (!res.ok) throw new Error("Failed to upload file");

      const data = await res.json();

      alert(JSON.stringify(data));
    };
  };

When the "Upload File" button is clicked:

The uploadFile function runs, creating a hidden <input type="file"> element and simulating a user click.
Once the user selects one or more files, those files are appended to a FormData object.
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 uploadOctetStream = async () => {
    const input = document.createElement("input");
    input.type = "file";
    input.multiple = false;
    input.click();

    input.onchange = async (event) => {
      const file = (event as unknown as React.ChangeEvent<HTMLInputElement>)
        .target?.files?.[0];

      if (!file) return;

      const headers = new Headers();
      headers.append("Content-Type", "application/octet-stream");
      headers.append("x-file-name", file.name);

      const res = await fetch(UPLOAD_OCTET_API, {
        method: "POST",
        headers,
        body: file,
      });

      const data = await res.json();

      alert(JSON.stringify(data));
    };
};

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:

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

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

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "#fff",
        alignItems: "center",
        justifyContent: "center",
        gap: 40,
      }}
    >
      <Text style={{ fontSize: 24, fontWeight: "bold" }}>
        File Transfers Mobile
      </Text>

      <View
        style={{
          justifyContent: "center",
          alignItems: "center",
          gap: 16,
        }}
      >
        <Button title="Show File" onPress={showFile} />
        <Button title="Download File" onPress={downloadFile} />
        <Button title="Upload File" onPress={uploadFile} />
        <Button
          title="Upload File as Octet Stream"
          onPress={uploadOctetStream}
        />
      </View>
    </View>
  );

- Show File

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

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

    const blob = await response.blob();

    const filename =
      response.headers.get("Content-Disposition")?.split("=")[1] ||
      "unknown.txt";

    const fr = new FileReader();
    fr.onload = async () => {
      const contentType = response.headers.get("Content-Type") || "text/plain";

      if (typeof fr.result !== "string") {
        throw new Error("FileReader result is not a string");
      }

      const base64 = fr.result.split(",")[1];

      const uri = `${FileSystem.cacheDirectory}${filename}`;

      await FileSystem.writeAsStringAsync(uri, base64, {
        encoding: FileSystem.EncodingType.Base64,
      });

      if (Platform.OS === "android") {
        const contentURL = await FileSystem.getContentUriAsync(uri);
        await IntentLauncher.startActivityAsync("android.intent.action.VIEW", {
          data: contentURL,
          flags: 1,
          type: contentType,
        });
      } else {
        await Sharing.shareAsync(uri);
      }
    };

    fr.readAsDataURL(blob);
  };

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

  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 filename =
      response.headers.get("Content-Disposition")?.split("=")[1] ||
      "unknown.txt";

    const fr = new FileReader();
    fr.onload = async () => {
      const contentType = response.headers.get("Content-Type") || "text/plain";

      if (typeof fr.result !== "string") {
        throw new Error("FileReader result is not a string");
      }

      const base64 = fr.result.split(",")[1];

      const permissions =
        await FileSystem.StorageAccessFramework.requestDirectoryPermissionsAsync();

      if (!permissions.granted) return alert("Permission denied");

      const uri = await FileSystem.StorageAccessFramework.createFileAsync(
        permissions.directoryUri,
        filename,
        contentType
      );

      await FileSystem.writeAsStringAsync(uri, base64, {
        encoding: FileSystem.EncodingType.Base64,
      });
    };

    fr.readAsDataURL(blob);
  };

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

  const uploadFile = async () => {
    const files = await DocumentPicker.getDocumentAsync({ multiple: true });

    if (files.canceled) return;

    const formData = new FormData();

    files.assets.forEach((file) => {
      formData.append("files", {
        uri: file.uri,
        name: file.name,
        type: file.mimeType,
      });
    });

    const response = await fetch(UPLOAD_MULTIPLE_API, {
      method: "POST",
      body: formData,
      headers: {
        "Content-Type": "multipart/form-data",
      },
    });

    if (!response.ok) {
      throw new Error("Failed to upload file");
    }

    alert("File uploaded successfully");
  };

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 uploadOctetStream = async () => {
    const data = await DocumentPicker.getDocumentAsync();

    if (data.canceled) return;

    const file = data.assets[0];

    const headers = new Headers();
    headers.append("Content-Type", "application/octet-stream");
    headers.append("x-file-name", file.name);

    const response = await fetch(UPLOAD_OCTET_API, {
      method: "POST",
      body: file,
      headers,
    });

    if (!response.ok) {
      throw new Error("Failed to upload file");
    }

    alert("File uploaded successfully");
  };

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

DEV Community: José Núñez Riveros

React Native - Make your app appear in your device's file picker [Expo Modules]

React & Expo - How to Upload & Download Files

Introduction

Server

- Download endpoint (/download)

- Upload Multiples files using Form Data (/upload-multiples)

- Upload Files using Octet Stream (/upload-octet-stream)

Web (React)

- Download/Display File

- Upload File using Form Data

- Upload Files using Octet Stream

Mobile (Expo)

- Show File

- Download File

- Upload File using Form Data

- Upload File as Octet Stream

Conclusion

- Download endpoint (`/download`)

- Upload Multiples files using Form Data (`/upload-multiples`)

- Upload Files using Octet Stream (`/upload-octet-stream`)