QuickBlox Documentation

QuickBlox provides powerful Chat API and SDK to add real-time messaging and video calls to your web and mobile apps. Learn how to integrate QuickBlox across multiple platforms.

Content

Learn how to store and access files with QuickBlox file storage.

🚧

This is our documentation for beta version of QuickBlox React Native SDK. Please contact our Customer Support Team to provide your feedback, suggestions, and requests to improve this page.

The content module allows storing rich chat attachments, app content, and settings without having to republish them. Using a web interface you or your clients can control and make instant changes to the apps.

Visit our Key Concepts page to get an overall understanding of the most important QuickBlox concepts.

Before you begin

  1. Register a QuickBlox account. This is a matter of a few minutes and you will be able to use this account to build your apps.
  2. Configure QuickBlox SDK for your app. Check out our Setup page for more details.
  3. Create a user session to be able to use QuickBlox functionality. See our Authentication page to learn how to do it.

Upload file

Upload a file to the cloud using the upload() method below.

const url = 'path to file in local filesystem'
QB.content
  .upload({ url, public: false })
  .then(function (file) { /* file uploaded successfully */ })
  .catch(function (e) { /* handle error */ })

Argument

Required

Description

url

yes

URL of a file.

public

no

Boolean parameter. Specifies file visibility. If the file is public then it's possible to download it without a session token. Default: false.

In order to track upload progress for a particular file, you should subscribe to upload progress events using the QB.content.subscribeUploadProgress() method. This method will emit QB.content.EVENT_TYPE.FILE_UPLOAD_PROGRESS event each time an upload progress for this file changes. Once the upload is finished, you can unsubscribe from upload progress events using the QB.content.unsubscribeUploadProgress() method.

import { NativeEventEmitter } from 'react-native';
import QB from 'quickblox-react-native-sdk';

/**
 * @param {Object} event
 * @param {'@QB/FILE_UPLOAD_PROGRESS'} event.type Type of the event. For this event it will always be `QB.content.EVENT_TYPE.FILE_UPLOAD_PROGRESS`
 * @param {Object} event.payload
 * @param {string} event.payload.url URL (path in filesystem) of the file being uploaded
 * @param {number} event.payload.progress Progress value
 */
function uploadProgressChangeHandler(event) {
  const { type, payload } = event;
  // handle upload progress
}

const contentEmitter = new NativeEventEmitter(QB.content);
const subscription = contentEmitter.addListener(
  QB.content.EVENT_TYPE.FILE_UPLOAD_PROGRESS,
  uploadProgressChangeHandler
);

// path to a file picked from file system
const url = 'file path';
const subscribeProgressParam = { url };
const contentUploadParam = { url, public: false };

QB.content
  .subscribeUploadProgress(subscribeProgressParam)
    .then(function () {
    // subscribed to upload progress events for this file
    return QB.content.upload(contentUploadParam)
  })
  .then(function (file) {
    // file uploaded successfully
    // unscubscribe from upload progress events for this file
    return QB.content.unsubscribeUploadProgress()
  })
  .then(function () {
    // unsubscribed from upload progress events for this file
    // remove subscription if it is not needed
    subscription.remove();
  })
  .catch(function (error) {
    // handle error
  });

The maximum size of the uploaded file depends on the membership plan.

Basic

Startup

Growth

HIPAA

Enterprise

File size limit

10 Mb

25 Mb

50Mb

50Mb

Contact our sales team

Get file info

Get information about a file by ID using the getInfo() method below. This method allows to load the file description model from the server, not the content of the file itself.

const params = { id: 1234567 };

QB.content
  .getInfo(params)
  .then((file) => {
    // process result
  })
  .catch(e => {
    // handle error
  })

Argument

Required

Description

id

yes

ID of the file.

Get file URL

There are two types of file URLs that can be obtained: private and public.

  • Public URL allows anyone to access the file, no authorization token is needed.
  • Private URL can be accessed only by QuickBlox user with a session token.

Get public URL

To receive a public URL, use the code snippet below.

// using file retrieved previously
const getUrlParam = { uid: file.uid };

QB.content
  .getPublicUrl(getUrlParam)
  .then(function (url) { /* handle as necessary */ })
  .catch(function (e) { /* handle error */ })

Argument

Required

Description

uid

yes

File unique identifier. You can take the uid from the file recieved as a result of the getInfo() method.

Get private URL

To get a private URL of the uploaded file, use the following code snippet.

// using file retrieved previously
const getUrlParam = { uid: file.uid };

QB.content
  .getPrivateURL(getUrlParam)
  .then(function (url) { /* handle as necessary */ })
  .catch(function (e) { /* handle error */ })

Agrument

Required

Description

uid

yes

File unique identifier. You can take the uid from the file recieved as a result of the getInfo() method.

Updated 3 months ago



Content


Learn how to store and access files with QuickBlox file storage.

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.