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