<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=13"></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>
var uploader;

$('.fileuploader').change(function (e) {
	var file = e.target.files[0];
	var options = {
		url: "https://media.cincopa.com/post.jpg?uid=1411253&d=AAAAcAQtIWBAAAAAAEJqhoA&hash=x521bdtt1lmc3rau4i4qxx4rj3oqhp4b&addtofid=0",
		chunk_size: 10, // MB
		onUploadComplete: function () {
			$(".status-bar").html("File has been successfully uploaded");
		},
		onUploadProgress: function (e) {
			$(".status-bar").html(parseInt(e.percentComplete) + '%');
		},
		onUploadError: function () {
			$(".status-bar").html("Error accured while uploading");
		}
	};

	uploader = new cpUploadAPI(file, options);
});
$(".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