Lepozepo / cloudinary

MIT License
94 stars 42 forks source link

Upload progress #60

Closed arnoldgamboa closed 8 years ago

arnoldgamboa commented 8 years ago

Hi there!

Is there a trick available under this new version to check the progress of upload? Like, numerical percentage we can use for a progress bar?

-Arnold

Lepozepo commented 8 years ago

Same way as before :D

arnoldgamboa commented 8 years ago

I don't understand. Can you give an example please?

Sent from iPhone

On Wed, Nov 18, 2015 at 8:02 PM -0800, "Marcelo Reyna" notifications@github.com wrote:

Same way as before :D

— Reply to this email directly or view it on GitHub.

Lepozepo commented 8 years ago

You can do something like this:

    each files
        p {{percent_uploaded}} %
        p {{response.public_id}}
        if complete
            img(src="{{c.url response.public_id effect='blur:300' angle=10}}")
            img(src="{{c.private_url response.public_id effect='blur:300' angle=10}}")
            img(src="{{c.expiring_url response.public_id format='jpg' effect='blur:300' angle=10}}")

Where files is this:

Template.tester.helpers
    "files": ->
        Cloudinary.collection.find()

Use percent_uploaded to catch progress ^_^

coopermaruyama commented 8 years ago

For some reason, the above didn't work for me (tested in chrome), but this did:

Template.myImages.helpers({
  uploadProgress: function () {
    var instance = Template.instance();
    return instance.uploadProgress.get();
  }
});

Template.myImages.onCreated(function(){
  var instance = this;

  instance.uploadProgress = new ReactiveVar(null);

  instance.autorun(function(c) {
    // Note that this implementation is for a single file. Loop the find() method for multiple.
    var upload = Cloudinary.collection.findOne();
    var progress = upload && upload.loaded;
    var percentComplete;

    if (progress) {
      percentComplete = (progress / upload.total) * 100;
      instance.uploadProgress.set(Math.round(percentComplete));
    }
  });
});

template:

<template name="myImages">
{{#if uploadProgress }}
   Progress: {{ uploadProgress }} %
{{/if}}
</template>