$(document).ready(function(){ //file upload example var container = $('#indicatorContainerWrap'), msgHolder = container.find('.rad-cntnt'), containerProg = container.radialIndicator({ radius: 100, percentage: true, displayNumber: false }).data('radialIndicator'); container.on({ 'dragenter': function (e) { msgHolder.html("Drop here"); }, 'dragleave': function (e) { msgHolder.html("Click / Drop file to select."); }, 'drop': function (e) { e.preventDefault(); handleFileUpload(e.originalEvent.dataTransfer.files); } }); $('#prgFileSelector').on('change', function () { handleFileUpload(this.files); }); function handleFileUpload(files) { msgHolder.hide(); containerProg.option('displayNumber', true); var file = files[0], fd = new FormData(); fd.append('file', file); $.ajax({ url: 'service/upload.php', type: 'POST', data: fd, processData: false, contentType: false, success: function () { containerProg.option('displayNumber', false); msgHolder.show().html('File upload done.'); }, xhr: function () { var xhr = new window.XMLHttpRequest(); //Upload progress xhr.upload.addEventListener("progress", function (e) { if (e.lengthComputable) { var percentComplete = (e.loaded || e.position) * 100 / e.total; //Do something with upload progress console.log(percentComplete); containerProg.animate(percentComplete); } }, false); return xhr; } }); } });
Script Copy url Copy url with Tag
Bootstrap CSS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css copy copy script
Bootstrap JS https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js copy copy script
Jquery https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js copy copy script

Related Snippets

view all snippets
Latest snippets
About this snippet

Bootstrap 4 A file upload example with radial indicator snippet is created by BBBootstrap Team using Bootstrap 4.0.0, Javascript 3.2.1. This snippet is free and open source hence you can use it in your project.Bootstrap 4 A file upload example with radial indicator snippet example is best for Bootstrap file-upload, responsive.A great starter for your new awesome project with 1000+ Font Awesome Icons, 4000+ Material Design Icons and Material Design Colors at BBBootstrap.com.

Join BBBootstrap community

Contribute an awesome snippet to help other developer and designers