Easily upload files in React Native

It’s been a few months since I released React-Uploady to the world.

rpldy/react-uploady

Today, I’m happy to say that as of version 0.5.0, RU will work in React-Native.

There is very little you need to do to get Uploady working in RN. The main difference is that you need to install @rpldy/native-uploady and will need to implement your own button or other element that will initiate the upload.

Let’s see how.

Below is code for a small demo app that allows the user to select a local image from the mobile device and upload it using React Uploady. Once the file uploads, the app will display the image using the URL from the server response.

I’ve tried this with both expo and pure RN apps. Both seem to work well.

For this demo I used an app I created using:

npx react-native init MyUploadyTest

Then added native-uploady:

yarn add @rpldy/native-uploady

Next, install a file picker (RN doesn’t provide one natively). A popular one is: react-native-document-picker.

yarn add react-native-document-picker.

Just like with React web applications, we start by surrounding our app or part of it with: <NativeUploady> (not <Uploady>).

Inside, we can use any of the hooks that Uploady provides.

We provide the upload server end-point using the “Destination” prop.

Inside NativeUploady, we render an Upload component that for this demo looks like this:

The button that <Upload> renders will trigger the file picker and use its result as the input for:

uploadyContext.upload(...)

This will initiate the actual upload.

In the demo above, we use a few hooks. The ‘useItemFinishListener’ is used to retrieve the response from the server once upload finishes and provide the URL of the uploaded image to the app.

The image tag will show the uploaded image after a successful upload.

Note: There seems to be an issue with uploads in react-native 0.62.* (and higher). So the fix in this comment was needed to make it work for me.

The demo in this article focuses on image upload as an example, but important to note that its not limited to images only.

React-uploady aims to make it as simple as possible to use it while providing powerful customization features. For React-Native this should be the same.

Check Uploady out on Github.