cpUploadAPI

The cpUploadAPI is used to upload video files that are already recorded or selected by the user. It allows you to handle video uploads directly through JavaScript.

Include the Script

Add the following <script> tag to your HTML to load the uploader:

<script type="text/javascript" src="//wwwcdn.cincopa.com/_cms/ugc/uploader.js"></script> 

Initialize the Uploader

Use the following line to create a new upload instance:

var uploader = new cpUploadAPI(file, options); 

Parameters:

• file (required) - The video file (a File object) to upload.

• options (optional) - An object to configure upload behavior, e.g., setting upload_url.

Optional Callbacks

You can pass these callback functions in the options object to track upload events:

• onUploadComplete - Triggered when the upload finishes successfully.

• onUploadProgress - Provides live progress updates during the upload.

• onUploadError - Called if something goes wrong during the upload.

• onUploadAbort - Triggered when the upload is manually aborted.

{
   uploadState:'Complete',
   percentComplete: 100,
   loaded: LOADED_SIZE,
   total: TOTAL_SIZE,
   rid: UPLOADED_FILE_RID,
   file: FILE_OBJECT,
   xhr: XMLHTTPREQUEST_OBJECT
}

Callable Methods

There are several callable methods that you can use to execute certain predefined functions. The following are the allowed callable methods:

• start() - Starts the upload process.

• pause() - Pauses the upload temporarily.

• resume() - Resumes a paused upload.

• stop() - Aborts and resets the upload.

Example:

uploader.start(); // Start upload
uploader.pause(); // Pause upload
uploader.resume(); // Resume upload
uploader.stop(); // Abort upload

You can see below an example we created on CodePen for cpUploadAPI .

In the above CodePen example, we have added all the functionalities available for cpUploadAPI.

It contains an Input File to browse and upload media files from your computer and then Start, Stop, Pause or Resume the input file using the cpUploadAPI.

We have also added an HTML div with a class status-bar, where we will show the upload progress and a message to show when the upload is completed.

As mentioned in the CodePen article, do not forget to update the upload URL mentioned in line 6 of the JS code. Simply replace the URL with your Cincopa account’s upload_url and then all media files uploaded using the CodePen example above will be uploaded to your Cincopa Account’s Assets Library.