<p>The following example allows your user to upload a file directly from your page to your Cincopa account.<br>
Upload is done in chunks which makes sure to retransmit in case of a chunk failure.<br>
When upload is complete the video/audio will be available for watching immediately using Cincopa player, see onUploadComplete().<br>
Replace A4HAcLOLOO68 (default video player) and AEFALSr3trK4 (default audio player) with your player/gallery code to customize the player.<br>
Paste this code to your page, don't forget to replace the static upload URL (line 4) with your upload URL. You can get this URL from https://www.cincopa.com/cincopamanager/api or use Cincopa REST API https://www.cincopa.com/media-platform/api-documentation-v2 method asset.get_upload_url.json</p>

<script type="text/javascript" src="https://rtcdn.cincopa.com/libasync.js"></script>
<script type="text/javascript" src="https://wwwcdn.cincopa.com/_cms/ugc/uploader.js"></script>
<input type="file" class="fileuploader" id="upload-input">
<div class="status-bar"></div><button type="button" class="start">Start</button><button type="button" class="stop">Stop</button><button type="button" class="pause">Pause</button><button type="button" class="resume">Resume</button>
<br><br>
<div id="dropArea" style="width:500px;height:200px;border:1px solid red;">Example of a drop area</div>
<br><br>
<div id="thediv"></div>


var uploader;

var options = {
    url: "https://media.cincopa.com/post.jpg?uid=1411253&d=AAAAcAQtIWBAAAAAAEJqhoA&hash=x521bdtt1lmc3rau4i4qxx4rj3oqhp4b&addtofid=0",
    chunk_size: 10, // MB
    onUploadComplete: function (e) {
      console.log("onUploadComplete");
      console.log(e);
      $(".status-bar").html("File has been successfully uploaded rid=" + e.rid);
      if (e.type.startsWith("video"))
        cincopa.boot_gallery({"_object": "thediv", "_fid": "A4HAcLOLOO68!"+e.rid})
      else if (e.type.startsWith("audio"))
        cincopa.boot_gallery({"_object": "thediv", "_fid": "AEFALSr3trK4!"+e.rid})
    },
    onUploadProgress: function (e) {
      console.log(e);
      $(".status-bar").html(parseInt(e.percentComplete) + '%');
    },
    onUploadError: function (e) {
      console.log(e);
      $(".status-bar").html("Error accured while uploading");
    }
};


$('.fileuploader').change(function (e) {
  var file = e.target.files[0];
  uploader = new cpUploadAPI(file, options);
});

var dropArea = $('#dropArea')[0];
dropArea.ondragover = function (e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
}; 
dropArea.ondragleave = function (e) {
  e.stopPropagation();
  e.preventDefault();
  return false;
};
dropArea.ondrop = function (e) {
  e.preventDefault();
  var file = e.dataTransfer.files[0];
  uploader = new cpUploadAPI(file, options);
  
  $('#dropArea').html("dropped " + file.name + " click start");
};

$(".start").click(function () {
    uploader.start();
});
$(".stop").click(function () {
    uploader.stop();
});
$(".pause").click(function () {
    uploader.pause();
})

$(".resume").click(function () {
    uploader.resume();
})


External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js