File upload for PubNub Chat Components for React Native

Migrate to Chat SDK

PubNub will stop supporting Chat Components on January 1, 2025 but you are welcome to contribute. Learn how to migrate to the Chat SDK here.

The file upload feature allows you to upload and share images and files with other users in the application. You can upload all types of images or documents of up to 5 MB in size and attach text to them. This feature is commonly used in social apps to share images or in medical apps to share medical records for patients.

When a file is uploaded on a channel, it's stored and managed on your key using a storage service. Subscribers of that channel receive a file message with a file name (file ID for Android). You can download the attached file directly from the chat.

Enable file upload

File upload is a part of the Message Input component and it's not enabled by default. To enable it, you must configure the Message Input component and set up the required upload and download permissions for images and files in your Android or iOS app. Read the subsections for details.

Required Expo package installation

For a bare React Native app, make sure you have the Expo package installed and configured to use Expo modules in your app.

Define fileUpload

Add the fileUpload parameter to the Message Input component and set its value either to image or all.

    <PubNubProvider client={pubnub}>
      <Chat {...{ currentChannel, theme }}>
        <MessageList />
        <MessageInput fileUpload="image"/>
      </Chat>
    </PubNubProvider>

Each value gives different options and UI views:

• image - allows for uploading and downloading images of all extensions. When you set this value, tapping the Image icon next to the message input field opens up an image gallery.

• all - allows for uploading and downloading images and files of all extensions. When you set this value, tapping the File icon next to the message input field opens up a modal to share either an image from the gallery or a document from the local file explorer.

Android

iOS

Define required permissions

Your app requires specific permissions to share and download images and files. Depending on whether that's a bare or managed app, you must either specify these permissions yourself or they are set by default.

Images

Bare Android app

Add the READ_EXTERNAL_STORAGE permission to your app's AndroidManifest.xml file.

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

Bare iOS app

Add the NSPhotoLibraryUsageDescription parameter to your app's Info.plist file.

(<key>NSPhotoLibraryUsageDescription</key>
<string>The app accesses your photos to let you share them with your friends.</string>)

Expo-managed app

The photosPermission parameter is set by default with this message: Allow $(PRODUCT_NAME) to access your photos. To change this default message, modify the value of this entry in your app.json or app.config.js file:

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos."
        }
      ]
    ]
  }
}

Read the Expo docs for more details.

File Sharing

You don't need extra permissions to upload files in Android and iOS apps.

Download

Bare Android app

Add the WRITE_EXTERNAL_PERMISSION permission to your app's AndroidManifest.xml file.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_PERMISSION" />

Bare iOS app

Add the NSPhotoLibraryAddUsageDescription parameter to your app's Info.plist file.

(<key>NSPhotoLibraryAddUsageDescription</key>
<string>The app allows you to save images and photos to let you download them with your friends.</string>)

Expo-managed app

The savePhotosPermission parameter is set with the default message: Allow $(PRODUCT_NAME) to save photos. To change this message, modify the value of this entry in your app.json or app.config.js file:

{
  "expo": {
    "plugins": [
      [
        "expo-media-library",
        {
          "photosPermission": "Allow $(PRODUCT_NAME) to access your photos.",
          "savePhotosPermission": "Allow $(PRODUCT_NAME) to save photos.",
          "isAccessMediaLocationEnabled": true
        }
      ]
    ]
  }
}

Read the Expo docs for more details.

Usage

When you enable image or file upload in your app, you can:

• upload images or files by tapping the Image or File icon. Choose an attachment from the local gallery or file explorer, and confirm your choice by tapping the Send button. Before you send the image or file, you can still remove the previously selected attachment by tapping the Close icon that will be visible next to the File icon.

Android image

iOS image

Android file

iOS file

• download images or files by tapping the Download icon and saving the choice in the local gallery or file explorer.

Android image

iOS image

Android file

iOS file

Libraries

PubNub Chat Components for React Native use the following libraries for uploading images and files:

• expo-image-picker
• expo-document-picker

File payload

PubNub Chat Components for React Native use the PubNub's sendFile method that passes the SendFileParameters as payload to PubNub:

    interface SendFileParameters {
        channel: string;
        file: StreamFileInput | BufferFileInput | UriFileInput;
        message?: any;
        cipherKey?: string | undefined;
        storeInHistory?: boolean | undefined;
        ttl?: number | undefined;
        meta?: any;
    }

Read the JavaScript SDK docs for detailed parameter descriptions.

Customization

You can customize the modal that pops up on UI when you tap the File icon (for the fileUpload parameter set to all). This modal allows you to choose whether to attach a photo or a document as a message.

To customize the modal, use the fileModalRenderer parameter and change it to a different JSX.Element.