File upload for PubNub Chat Components for React Native

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. 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.

Document &amp; image modal for Android

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

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

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

Files

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

Download

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

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

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.

Image upload for Android

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

Image download for Android

Libraries

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

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.

Add attachment modal

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

Last updated on