Say you’re building a mobile React Native app that let’s users take voice notes. You’ve built a cool UI that let’s you record audio by following [the guide from Expo](https://docs.expo.dev/versions/latest/sdk/audio/#recording-sounds). The API to record files gives you a URI to the file on disk. (If you’re building a photo app and need image uploads, the [ImagePicker API](https://docs.expo.dev/versions/latest/sdk/imagepicker/#usage) also gives you a URI to your images on disk)

You’ve already setup the Convex mutation to [generate an upload URL](https://docs.convex.dev/file-storage/upload-files#generating-the-upload-url) and the mutation to [store the app specific metadata](https://docs.convex.dev/file-storage/upload-files#writing-the-new-storage-id-to-the-database). (Jump to the bottom to see the mutations used in this example)

Now that you have the URI to the file on disk and the mutations to store it on the backend, how do you actually upload the file from the computer to the Convex remote servers?

Here’s a snippet that makes this work in your React Native app. Follow along in the comments to understand each step:

```tsx

// Setup Convex mutations for use in your React component
const generateUploadUrl = useMutation(api.recordings.generateUploadUrl);
const saveRecording = useMutation(api.recordings.saveRecording);

// Method called to actually upload the file
async function uploadAndSaveRecording(uri: string) {
		// 1. Get upload url from Convex.
		//    This is the first mutation from the Convex docs for uploading.
    const postUrl = await generateUploadUrl();

		// 2. Get the file from the URI pointing to a local file
    const fileData = await fetch(uri);
		// Basic error handling to ensure the file is valid.
    if (!fileData.ok) {
      console.error("Error loading file.", fileData);
			return;
    }

		// 3. Get the file contents to upload
    const blob = await fileData.blob();

		// 4. Set up error handling for your upload
    try {
	    // 5. Actually send the file contents to Convex
      const result = await fetch(postUrl, {
        method: "POST",
        // Note: Use the right mime type.
				//       iOS and Android use mp4 for audio recordings.
        headers: { "Content-Type": "audio/mp4" },
        body: blob,
      });
			// MOAR ERROR HANDLING!
      if (!result.ok) {
				// Note: You may actually want to inform the user of this.
        console.log("Failed to upload.");
        return;
      }

			// 6. Once successfully uploaded get the storageId
      const { storageId } = await result.json();

			// 7. Store custom metadata associated with this recording in Convex
      const uploadResult = await saveRecording({ storageId, author: user.id });

    } catch (err) {
			// Note: You may actually want to inform the user of this.
      console.error("Failed to upload.", err);
      throw err;
    }
  }
```

That’s it! To confirm everything is working, check the file uploads section of your [Convex Dashboard](https://dashboard.convex.dev/deployment/files).

![](https://cdn.sanity.io/images/ts10onj4/production/2759bbb740a9064844ade1176f1ff37b3735662f-1138x415.png)

And check the [data table](https://dashboard.convex.dev/deployment/data) to make sure the application specific metadata is saved.

![](https://cdn.sanity.io/images/ts10onj4/production/aecb66e0c2807777587b493de72431a5f6e40722-1137x424.png)

If it’s all there, then it’s working! Great work!

---

For completeness here are are the Convex mutations that match the upload code above.

```tsx
import { v } from "convex/values";
import { mutation } from "./_generated/server";
import { internal } from "./_generated/api";

// Generate the URL that you will actually upload the file to
export const generateUploadUrl = mutation(async (ctx) => {
  return await ctx.storage.generateUploadUrl();
});

// Mutation to save custom metadata for the file
export const saveRecording = mutation({
  args: { storageId: v.id("_storage"), author: v.string() },
  handler: async (ctx, args) => {
    const recId = await ctx.db.insert("recordings", {
      storageId: args.storageId,
      author: args.author,
      format: "audio",
    });
    ctx.scheduler.runAfter(0, internal.transcript.transcribe, { recId });
    return recId;
  },
});
```

Step by step guide to take a file URI provided by Expo media APIs and upload it to Convex in React Native.

Uploading files from React Native or Expo

One of our goals here at Convex is to provide the right level of functionality at the right time in your application’s journey. From the prototype where you want to side step binding decisions to a mature high usage application with many developers, we strive to provide the right tools at each step of your journey.

We’ve all used tools that are easy to get started with, but after a certain level of complexity their tooling or abstractions break down on some critical dimensions (think untyped languages for building large applications). Or we’ve used tools that feel like they require a PhD to even understand what they’re talking about (what’s a transclusion anyways?)

We hope that Convex is easy to get started, and then provides easy to use “power tools” as your application grows both in terms of developers and complexity.

Here are a few areas where this philosophy shows up in Convex:

## Schema (less-ish)

When you are first getting started, you may not fully know the schema of your application. You’ll just be stuffing data into tables. You’ll throw together different screens, you’ll test your application with your users, and only over time will find product market fit, that blissful state when users are clamoring to use your product. By this time you’ll learn what your application is truly about and only then want to formalize your schema. This is particularly helpful as your team grows larger, and your application gets a bit more sophisticated.

Turns out Convex has been tracking your schema all along! You can see it in the Convex dashboard by clicking on the Schema button next to each table. You can then take that Schema and decide to enforce it. Using schemas in Convex will only get better, stay tuned for some new features in this space soon!

![The messages schema](https://cdn.sanity.io/images/ts10onj4/production/7cc06b8db9a68d1da9053a13f27848207062edac-2000x1143.png?w=450)

## Indexes

Similar to schemas, indexes are more useful as you learn the performance characteristics of your app. For example, let’s say you have a Users table. But turns out you’re often querying it by email rather than by `Id` (the default index). Once you get enough users (yay! congrats!), you may find that this query by email is a performance bottleneck. At this point you’ll probably want to add a `by_email` index to speed up that query.

We’re actively working on adding custom indexes to Convex. Watch this space for an update in the near future. This is another great way we’re ensuring that you have all the tools you need to work with your data as your app scales.

## Caching

All Convex functions are [deterministic](https://docs.convex.dev/understanding/convex-fundamentals/functions#determinism). One great side effect of this is that it’s very easy to cache a query’s output. Convex does this automatically for you! If you call the same query again with the same set of inputs, you will get the data back faster because it’s already cached. Even better, if you’re subscribed to a query then we update that query only when the dependencies change, and then cache the results. There is no excess computation or data fetches due to polling or multiple requests for the same query.

Put another way, you don’t have to worry about whether your cache is valid or not, you just get the benefits without any extra work. This means as more people use your app the more the cache is used. Convex’s performance scales to your usage.

We hope this makes Convex the right product to chose for your application’s data needs. You don’t have to worry about the system locking you into a decision that seems convenient at first but is a headache to deal with later. We’d love to get your feedback on how we can make these decisions easier, [join our Discord](https://convex.dev/community).

You don’t have to worry about the platform locking you into a decision that seems convenient at first but is a headache to deal with later.

Indy Khare

All posts by Indy