How to create an upload progress bar?

You can bind to various progress update events and display a progress bar (similar to the one we display in Cloudinary's media library while uploading).

You can bind to the following events: fileuploadsend, fileuploadprogress, fileuploaddone, fileuploadfail.

You can find more details and options here: https://github.com/blueimp/jQuery-File-Upload/wiki

For example:

$('.cloudinary-fileupload').bind('fileuploadprogress', function(e, data) { 
$('.progress_bar').css('width', Math.round((data.loaded * 100.0) / data.total) + '%'); 
});

You can find some more examples in our photo album sample projects. For example, in Rails: https://github.com/cloudinary/cloudinary_gem/blob/master/samples/photo_album/app/views/photos/new_direct.html.erb#L53

Have more questions? Submit a request

Comments

Powered by Zendesk