Expo Document Picker and Node.js: A Step-by-Step Guide

Niraj Dhungana

6 Min Read

Published on: 1 Nov 2023

Share:

If you're reading this, chances are you're deep into the realm of React Native, just like me. Recently, I launched a comprehensive course on building fullstack applications with React Native, where we embarked on an exciting journey to create a podcast sharing platform using React Native and Node.js.

In this course, we opted for the React Native CLI, we are using react-native-document-picker to select file from the device so that we can uploads to our Node.js server.

However, along the way, I realized that some of my students were leveraging Expo for their projects, facing a bit of a head-scratcher when it came to file uploads using expo-document-picker.

That's why I'm here, writing this guide - to extend a helping hand to those encountering the same challenge. So, if you're in the Expo camp and eager to master the art of effortless file uploads, you're in the right place!

Setting up Server

If you already have a server up and running, that's perfectly fine. However, if you're starting with a fresh project, I've got a GitHub repository to kickstart your journey with Node.js and TypeScript. This repository comes with an auto-refresh feature that activates on save.

Simply execute the following command to clone the repo.

git clone https://github.com/ndpniraj/node-ts-setup file-upload-server

Now, navigate to the folder where you cloned the repository. In this case, I'm using 'file-upload-server'. Run npm i to install the necessary packages. Once done, you can open it in your preferred code editor. Additionally, make sure to install other essential packages like 'express' and 'formidable' to effectively handle file uploads.

You can run the following command which will also install the necessary type definitions for these packages.

npm i express formidable @types/express @types/formidable

After completing the aforementioned steps as I've explained, simply add the following code inside your index.tsx file.

import express from "express";
import formidable from "formidable";

const app = express();

app.post("/upload", async (req, res) => {
  const form = formidable();
  const [fields, files] = await form.parse(req);

  const audioFile = files.audioFile;
  if (audioFile) {
    const myFile = audioFile[0];
    console.log(myFile);
  }

  res.json({ ok: true });
});

app.listen(8000);

This code is quite straightforward. It simply creates an Express server that runs on port number 8000. You can access it through http://localhost:8000. Here, you can send a POST request with a file or formData. The callback function will then log myFile to the console and send a successful request with JSON data { ok: true }.

Now, since you have the file (in this example, I'm expecting an audio file), you have the flexibility to upload it to the cloud or save it to your local directory. I'll leave this up to you.

Let's now shift our focus to our Expo React Native project.

Project with expo-document-picker

Perhaps you're already familiar with creating an Expo project, but let me walk you through how I did it. Simply run the following command.

npx create-expo-app -t expo-template-blank-typescript

Once executed, it will generate a new Expo project. This is where we'll install the package we want to work with, in this example, it's expo-document-picker. Use the following command to install it within our project.

npx expo install expo-document-picker

UI to Pick File

After adding the Button component, which will eventually handle the selection and upload of files to our backend server.

import { StyleSheet, Button, View } from "react-native";

export default function App() {
  const pickSomething = () => {
   
  };

  return (
    <View style={styles.container}>
      <Button title="Pick something" onPress={pickSomething} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Now it's time to proceed with selecting and uploading a file. We can achieve this using the DocumentPicker.getDocumentAsync method. Let's give it a try.

Picking a File

const pickSomething = async () => {
  try {
    const docRes = await DocumentPicker.getDocumentAsync({
      type: "audio/*",
    });
    
    console.log(docRes);
  } catch (error) {
    console.log("Error while selecting file: ", error);
  }
};

Now, if you attempt to select a document (in this example, I'm selecting only audio), you will receive a response similar to the one shown below in your console. This indicates that you can now select a document without encountering any issues.

{
  assets: [
    {
      mimeType: "audio/mpeg",
      name: "Audio File.mp3",
      size: 7850327,
      uri: "file:///data/user/0/host.exp.exponent/cache/DocumentPicker/0f7e2d37-6b24-492d-8d44-22bb31fd4f18.mp3",
    },
  ],
  canceled: false,
}

Creating a File Object

Next, let's write some code to construct a file object that our server anticipates from our React Native app. This can be achieved by including the name, size, uri, and type of the file.

const pickSomething = async () => {
  try {
    const docRes = await DocumentPicker.getDocumentAsync(...);

    const formData = new FormData();   
    const assets = docRes.assets;
    if (!assets) return;

    const file = assets[0];

    const audioFile = {
      name: file.name.split(".")[0],
      uri: file.uri,
      type: file.mimeType,
      size: file.size,
    };

    formData.append("audioFile", audioFile);
  } catch (error) {
    console.log("Error while selecting file: ", error);
  }
};

It's crucial to grasp the code from lines 5 to 15. Initially, we can't directly send our file to the server. We need to create and attach our file to an object called FormData. Additionally, since the getDocumentAsync method returns an object with an array named assets, we need to retrieve the first item from this array. This item is the exact file we intend to upload to our Node.js server.

As mentioned earlier, we must create a file object with its relevant information such as name, size, etc., which we've accomplished and stored in an object named audioFile. Subsequently, you can use the append method from formData to include the data you want to send to your server. In this case, we're sending the audioFile object with the same name as the key.

Uploading File to Node Server

Now that we have the file and our Node server in place, let's proceed with the upload. However, it's important to note that you can't use 'localhost' as your URL. For instance, using 'http://localhost:8000' won't function within our React Native project. To send requests to 'localhost', we need to employ our IP address.

For example, if your IP address (which varies for each computer) is '192.1.2.3.345', you should utilize the following URL: 'http://192.1.2.3.345:8000'. For more info you can watch this video.

Here is the final code to upload from expo to node server. Make sure to install axiso with npm i axios

const pickSomething = async () => {
  try {
    const docRes = await DocumentPicker.getDocumentAsync({
      type: "audio/*",
    });

    const formData = new FormData();
    const assets = docRes.assets;
    if (!assets) return;

    const file = assets[0];

    const audioFile = {
      name: file.name.split(".")[0],
      uri: file.uri,
      type: file.mimeType,
      size: file.size,
    };

    formData.append("audioFile", audioFile as any);

    const { data } = await axios.post(apiUrl, formData, {
      headers: {
        Accept: "application/json",
        "Content-Type": "multipart/form-data",
      },
    });
    console.log(data);
  } catch (error) {
    console.log("Error while selecting file: ", error);
  }
};

I hope you've enjoyed this walkthrough and gained valuable insights into handling file uploads in your React Native projects. If you're hungry for more in-depth knowledge, don't forget to check out my comprehensive course on full-stack React Native development. For future tips, tricks, and updates, be sure to subscribe to my email list. Happy coding!