Sample-content-javascript

Ask tech team
From QuickBlox Developers (API docs, code samples, SDK)
Jump to: navigation, search


Contents

Warning!

The Sample Content is deprecated from version 2.12.0 of the JavaScript QuickBlox SDK. The sample's documentation page will be deleted after few releases of JS QB SDK.


Sources

Demo http://quickblox.github.io/quickblox-javascript-sdk/samples/content/

Download ZIP — https://github.com/QuickBlox/quickblox-javascript-sdk/archive/gh-pages.zip


Overview

This sample demonstrates how to work with the QuickBlox Content API.
It allows you to organize a user's photo gallery.

It shows how to:

  1. Download a user's images
  2. Upload a new image



Guide: Getting Started with Content API

Getting a QuickBlox account

http://admin.quickblox.com/register

Creating an application on the Admin panel

http://admin.quickblox.com/apps/new

For further reading, there is also this 5 minute guide.

Connecting QuickBlox to your application

To get the information on how to connect to the QuickBlox library, please, refer to the Connect Javascript SDK to Web and Node.js applications page.

Adding a Content Management System (CMS) to your application

QuickBlox Content API is:

  • Content Management System (CMS) - Allows you to manage the apps contents and settings without having to re-publish it. Using a web interface you can control and make instant changes to the apps.
  • Unlimited Data Storage
  • Client SDKs that provide access to your content from code

Content Management System (CMS)

CMS allows you to manage the contents and settings of an app without having to re-publish it. You can upload any files through web interface, edit, delete - all typical operations.

Go to Admin panel, Content module. You can see list of your files:

CMS1.png

You may not have any files. To upload a new file just use the File Upload section below the table - select a file to upload using the Choose... button, then press the Upload button - the new file will be uploaded.

You can create rich HTML files using the wysiwyg redactor - just press the Add Text/HTML button - a 'New file' page will be opened. You can use the wysiwyg redactor to create rich content.

Next, let's show you how to work with Content API through the Javascript SDK:

Upload files

To upload a file using the Javascript SDK use code below:

var inputFile = $("input[type=file]")[0].files[0];
 
var params = {name: inputFile.name, file: inputFile, type: inputFile.type, size: inputFile.size, 'public': false};
QB.content.createAndUpload(params, function(err, response){
    if (err) {
        console.log(err);
    } else {
        console.log(response);	
        var uploadedFile = response;
        var uploadedFileId = response.id;
    }
});


Important! If you use NativeScript environment, then above method will not work because of some issues with FormData on NativeScript. Here is a code snippet how to upload a file on NativeScript https://gist.github.com/soulfly/b55d6c0dd9448bc1dc1133793a6ac22d


Read more about public argument here.

Retrieve files

You can use page parameters such as:

  • perPage - how many files will be displayed on each page (max 100)
  • page - current returned page


To retrieve a list of your own files use code below:

QB.content.list({page: 1, per_page: '9'}, function(error, response) {
    if (error) {
        console.log(error);   
    } else {
        var totalEntries = response.total_entries;
        var entries = response.items;
    }
});


Download files

To download a file you just need to build an url for your img tag. Read more about url formation in a REST API section, Download file by UID

var fileUid = "859146a9821e4bef9c6d60e1e8c88b3c00";
var fileName = "white horse";
 
var imageHTML = "<img src='" + QB.content.privateUrl(fileUid) + "' alt='"+fileName+"' />";

Public/Private urls

There are 2 types of files in Content module:

  • Private files - can be accessed only by QuickBlox user with session token
  • Public files - can be accessed from anywhere in Internet, don't need to have a session token.

You can manage this type when you upload a file to Content module via public argument.


To access a private url use the following solution:

var fileUid = "859146a9821e4bef9c6d60e1e8c88b3c00";
var privateUrl = QB.content.privateUrl(fileUid);


To access a public url use the following solution:

var fileUid = "859146a9821e4bef9c6d60e1e8c88b3c00";
var publicUrl = QB.content.publicUrl(fileUid);