Basic File Upload

Introduction

If you have a scenario on your site where you would like to allow your site visitors to contribute content, the Basic Uploader can be utilized to provide upload functionality on your site. The Basic Uploader is available to all Basic, Bronze and Silver accounts. Some of the features of the Basic Uploader Include:

  • The Basic Uploader is a Flash Object that can be embedded on any web page.
  • Users can supply meta data such as Title and Description to describe the content of their submission.
  • The Basic Uploader also includes several JavaScript Callback functions (Silver and Gold Level Packages) that allows you to receive feedback from the uploader. This feedback includes:
    • notification of when a user selects a file (and what the file name is)
    • notification of when a user initiates an upload
    • notification of Upload Progress
    • notification of when the upload is complete
    • notification of error conditions

Getting Started

    1. To access the Basic Uploader, sign on to the VBOSS Control Panel.
    2. Once you are signed in, go to the Upload Tab. You will be presented with a page that has your uploader embedded for your use.
    3. In addition, you will find, below the uploader, a text box that includes the embed code for your uploader. Simply copy the embed code.
    4. Paste the copied embed code into the body of your web page.

    These steps will add provide the ability to upload content to your VBOSS account from your web page. Nothing further is required to facilitate successful uploads to the VBOSS service from your site

Callback Functions

Callback Functions are available to Gold and Silver Accounts.

If you want to capture information about the content submissions from the uploader to retain in a database, or you would like to display the resulting video somewhere on your site, you can use the Callback functions to gather information to support those activities. You can also receive notification of different events initiated by the user within the Uploader so that you can trace their steps as they move through the upload process.
All of the callbacks from the Basic Uploader can be accessed via the following Java Script functions:

Note:
To test javascript callbacks using a locally-saved file you must explictly include this file in your Local-Trusted Sandbox using the Adobe Flash Player Settings Panel. Files accessed from a remote location (i.e. a server) do not experience this restriction.

Contents

onFileSelected()

When the user selects a file using the Browse button, this function will be called.

Parameters Sent

  • filename = the file name of the file to be uploaded.

Sample Code

The following sample code demonstrates how you can capture the file chosen by the user after they have made their selection:

function onFileSelected(fileName)
{
myFile = fileName;
var myMsg = document.getElementById('selectedFileName');
myMsg.innerHTML = msg;
}

onBeginFileUpload()

When the user initiates the upload by clicking the Upload button.

Sample Code

The following sample code demonstrates how you can capture the file chosen by the user after they have made their selection:

function onBeginFileUpload(fileName)
{
myFile = fileName;
}

onUploadProgress()

Once the upload has been initiated by the user, you can monitor the progress of the upload using the onUploadProgress() function.

Parameters Sent

  • bytesLoaded = the number of bytes that have already been transmitted to the Fliqz Servers.
  • bytesTotal = the total number of bytes that the content contains.

Sample Code

function onUploadProgress(bytesLoaded, bytesTotal)
{
var myBL = document.getElementById('bl');
myBL.innerHTML = bytesLoaded;
var myTB = document.getElementById('tb');
myTB.innerHTML = bytesTotal;
}

Note: the above code assumes you have a div tag or a span tag with the id 'bl' and one with the id 'tb' to act as targets for the updated bytesLoaded and bytesTotal values returned from the uploader.

onUploadComplete()

When the Upload has completed, the onUploadComplete() function will be called.

Parameters Sent

  • params = an array of name-value pairs that represent metadata set for the asset that was uploaded by the user.

The array includes the following name-value pairs:

  • id = a unique id used to reference the new asset in the Fliqz repository.
  • title = the user assigned title for the asset.
  • description = the user assigned description for the asset.
  • previewUrl = an HTTP link to the thumbnail associated with the new asset.
  • simpleEmbed = a simplified version of the embed code for the player containing the new asset (may not work in all browsers)
  • embed = the complete version of the embed code for the player containing the new asset.
  • permalink = a link to a page that will display the new asset in your player.

For Silver and Gold Accounts Only

Keywords = the user assigned keywords for the asset.

Sample Code

You can address the contents of the params array in 2 different ways.

  • Iteration:

This example will iterate through all the name-value pairs returned from the uploader and display them in a target div or span tag ('completetext') set up to display the results.

function onUploadComplete(params)
{
paramList = '';
for (var mdName in params)
{
paramList += mdName + '=' + params[mdName];
paramList += ' <br> ';
}
var myMsg = document.getElementById('completetext');
myMsg.innerHTML = paramList;
}

Direct Access:

This example will directly access the title and description values returned from the uploader and display them in a target div or span tag ('completetext') set up to display the results.

function onUploadComplete(params)
{
paramList = '';
paramList += 'title=' + params.title;
paramList += ' <br> ';
paramList += 'description=' + params.description;
paramList += ' <br> ';
var myMsg = document.getElementById('completetext');
myMsg.innerHTML = paramList;
}

onCancelUpload()

If a user clicks the X in the upper right hand corner of the Uploader, the upload will be canceled. In the event that the user clicks this X, the event will trigger the onCancelUpload() function.
No parameters are passed to the onCancelUpload() function.

Sample Code

This example will display a message in a target div or span tag ('canceltext') set up to display the message.

function onCancelUpload()
{
var myMsg = document.getElementById('canceltext');
myMsg.innerHTML = 'Upload Cancelled';
}

onError

A callback method invoked when an error occurs during platform operation

Parameters Sent

The function returns a single parameter, error, an object which contains onr or more of the following parameters:

  • typeId: An ID (in the form of a GUID) which identifies the type of error. This is mandatory.
  • instanceId: An ID (in the form of a GUID) which identifies the specific error. This is optional and is only returned for certain error types.

Sample Code

<script language="JavaScript">
function onError(error)
{
var msg = '';
if (error.typeId = 'F34B3FD4-26CD-4263-AEE5-2CA2F41215AA') {
msg += 'Connection Error: Failed to connect to a required resource.';
}
if (error.typeId = '1C89058D-9B7B-4945-947C-1F032D5E8B7E') {
msg += 'Account Suspended: The Account associated with this Uplaoder has been suspended.';
}
if (error.typeId = '64B3D85A-E1D4-4898-A963-9469115E5040') {
msg += 'Server Error - Error ID: ' + error.ID;
}
if (msg='') {
msg += 'An Unknown Error Occurred during the Upload';
}
var myMsg = document.getElementById('errortext');
myMsg.innerHTML = msg;
}
</script>

 

Standard Error Types

 

Error Type Id Error Type Other Parameters Description
F34B3FD4-26CD-4263-AEE5-2CA2F41215AA Connection Error None The platform could not load the an external SWF, connect to the configuration service or connect to some other service.
1C89058D-9B7B-4945-947C-1F032D5E8B7E Account Suspended None The Account associated with the given platform configuration has been suspended.
64B3D85A-E1D4-4898-A963-9469115E5040 Server Error ID An error has occurred when connected to the server. The ID parameter contains the ID of the error returned by the server.

 

Error Tracking and Reporting

Although it is not a requirement to log errors encountered by the uploader, you may want to track these errors on your server, and report them to Fliqz if they become a chronic problem. If you capture the error conditions and log them in your database, you can periodically review this information and report issues to support@fliqz.com.

Putting it all together

The following sample code puts all these pieces together on a demonstration page. This page can be used as the starting point for a page you place on your site.
The page displays the output from the Basic Uploader on the right hand side of your Uploader. You may not wnat to display them like this, simply remove or replace each statement in the java script functions that sets an innerHTML value. These are the java script statements that are displaying the values received from the uploader on the page. Next remove the table columns to the right of the uploader.
This page will serve as a means of testing the uploader functions in the context of your site. Once modified to achieve your needs, it can serve as your uploader page.

<head>
<title>Fliqz Sample Upload Page</title>
</head>
<body>
<!-- Page heading -->
<div style="position: absolute; top: 0px; margin-left: 300px; margin-top: 40px; text-align: center;">
<h2>Fliqz Sample Upload Page</h2>
</div>
<div style="margin-left: 75px; margin-top: 120px;">
<h3> Sample File Upload Page - Basic Uploader</h3>
<p> <b>NOTE:</b> This Uploader will populate the <b>myname@mycompany.com</b> Account</p>
<hr />
</div>
<script type="text/javascript" language="javascript" >
myFile = '';

function onFileSelected(fileName)
{
myFile = fileName;
var myMsg = document.getElementById('selectedFileName');
myMsg.innerHTML = myFile;
}

function onBeginFileUpload(fileName)
{
myFile = fileName;
var myMsg = document.getElementById('msgtext');
myMsg.innerHTML = myFile;
}

function onUploadProgress(bytesLoaded, bytesTotal)
{
var myBL = document.getElementById('bl');
myBL.innerHTML = bytesLoaded;
var myTB = document.getElementById('tb');
myTB.innerHTML = bytesTotal;
}

function onUploadComplete(params)
{
paramList = '';
for (var mdName in params)
{
paramList += '<b>' + mdName + '</b>=' + params[mdName];
paramList += ' <br> ';
}
var myMsg = document.getElementById('completetext');
myMsg.innerHTML = paramList;
}

function onCancelUpload()
{
var myMsg = document.getElementById('canceltext');
myMsg.innerHTML = 'Upload Cancelled';
}

function onError(error)
{
var msg = '';
if (error.typeId = 'F34B3FD4-26CD-4263-AEE5-2CA2F41215AA') {
msg += 'Connection Error: Failed to connect to a required resource.';
}
if (error.typeId = '1C89058D-9B7B-4945-947C-1F032D5E8B7E') {
msg += 'Account Suspended: The Account associated with this Uplaoder has been suspended.';
}
if (error.typeId = '64B3D85A-E1D4-4898-A963-9469115E5040') {
msg += 'Server Error - Error ID: ' + error.ID;
}
if (msg='') {
msg += 'An Unknown Error Occurred during the Upload';
}
var myMsg = document.getElementById('errortext');
myMsg.innerHTML = msg;
}

</script>

<table><tr><td valign="top">
<div id="My_Uploader" style="margin-left:100px;">
<!-- embed used for test -->
<!-- INSERT YOUR UPLOADER EMBED CODE HERE -->
</div>
</td><td valign="top" style="padding-left:20px">
<div id = 'message1'>
<p><b>Callback Responses</b></p>
<p><b>onFileSelected()</b></p>
<p><b>File Name:</b></p>
<p><span id = 'selectedFileName'> </span></p>
<p><b>onBeginFileUpload()</b></p>
<p><b>File Name:</b></p>
<p><span id='msgtext'> </span></p>
<p><b>Upload Progress</b></p>
<p><b>Bytes Loaded:</b></p>
<p><span id="bl"></span></p>
<p><b>Total Bytes:</b></p>
<p><span id="tb"></span></p>
</div>
</td><td valign="top" style="padding-left:20px">
<div id = 'message2'>
<p><b>onUploadComplete()</b></p>
<p><span id='completetext'> </span></p>
<p><b>onUploadCancelled()</b></p>
<p><span id='canceltext'> </span></p>
<p><b>onError()</b></p>
<p><span id='errortext'> </span></p>
</div>
</td></tr></table>
<hr />
</body>
</html>