<p>The following example uploads the selected file to the Cincopa platform. Upload is done in chunks which makes sure to retransmit in case of a chunk failure.<br>To use this code on your account get the static upload URL and set it in the code (line 6)</p>

<script type="text/javascript" src="https://wwwcdn.cincopa.com/_cms/ugc/uploader.js?cmsver=15"></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>


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,options) {
      console.log(options.rid);
      $(".status-bar").html("File has been successfully uploaded");
    },
    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