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.

JavaScript
const contentUploadParams = {
  url: 'path to file in local filesystem',
  public: false
};

QB.content
  .upload(contentUploadParams)
  .then(function (file) { /* file uploaded successfully */ })
  .catch(function (e) { /* handle error */ })

The upload() method accepts one argument of the object type that has the following fields:

FieldRequiredDescription
urlyesURL of a file.
publicnoBoolean 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.

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

BasicStartupGrowthHIPAAEnterprise
File size limit10 Mb25 Mb50Mb50MbContact 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.

JavaScript
const params = { id: 1234567 };

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

The getInfo() method accepts one argument of the object type that has the following fields:

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

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

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

The getPublicUrl() method accepts one argument of the object type that has the following fields:

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

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

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

The getPrivateURL() method accepts one argument of the object type that has the following fields:

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

Was this page helpful?

Raise issue