question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Any way to get access to a callback for progress updates? (for React)

See original GitHub issue

I’m using React instead of Blaze, so I can’t use the {{progress}} helper. Is there any way I can set up a callback or event listener to handle progress updates?

Issue Analytics

  • State:open
  • Created 8 years ago
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

14reactions
geetwocommented, Jun 17, 2016

oh my appologies @spawn-guy, here is how i used it to upload mp3 files with Meteor and react.

server/slingshot.js

Slingshot.fileRestrictions( "uploadToAmazonS3", {
  allowedFileTypes: [ "audio/mp3"],
  maxSize: 16 * 1024 * 1024
});

Slingshot.createDirective( "uploadToAmazonS3", Slingshot.S3Storage, {
  bucket: "<my-bucket-name>",
  acl: "public-read",
  region: "my-default-region",
  authorize: function () {
    return true;
  },
  key: function ( file , metaContext ) {
    //metaContext is used here to dinamically construct the file path
    return metaContext.prePath + file.name;
  }
});

imports/ui/components/song-upload.js

*I use react-dropzone to select the file and upload using mu Slingshot directive insde onDrop:

 onDrop(quality, files) {

      //Amozon Path prefix for the file returns something like
         // 'artist/album/128 (or 320)/'
      const pathPrefix = getPathPrefix( this.props.album, quality);
      const metaContext = {prePath: pathPrefix};

      //Upload file using Slingshot Directive
      let uploader = new Slingshot.Upload( "uploadToAmazonS3", metaContext);

      uploader.send( files[0], ( error, url ) => {

        computation.stop(); //Stop progress tracking on upload finish
        if ( error ) {
            this.setState({ progress: 0}); //reset progress state
        } else {
            this.setState({ url: url });
        }
      });

      //Track Progress
      let computation = Tracker.autorun(() => {
          if(!isNaN(uploader.progress())) {
            this.setState({ progress: uploader.progress() * 100 });
          }
      });
   }
4reactions
gsuesscommented, Sep 18, 2015

You don’t have to poll it. A better way is to the use Tracker.autorun:

uploader.send(this.props.file, function (error, url) {
  computation.stop(); // Stop the computation in order to save memory.
  //...
});

var computation = Tracker.autorun(function () {
  self.setState({progress: uploader.progress()});
});
Read more comments on GitHub >

github_iconTop Results From Across the Web

Any way to get access to a callback for progress updates? (for React)
I'm using React instead of Blaze, so I can't use the {{progress}} helper. Is there any way I can set up a callback...
Read more >
javascript - state update from a callback - Stack Overflow
It uses a callback to update the progress within the for loop which is then used to update the state (a progress bar)...
Read more >
Suspense for Data Fetching (Experimental) - React
In the long term, we intend Suspense to become the primary way to read asynchronous data from components — no matter where that...
Read more >
Understanding React's useEffect cleanup function
useEffect(() => { // set our variable to true let isApiSubscribed = true; axios.get(API).then((response) ...
Read more >
Developing Real-Time Web Applications with Server-Sent ...
So, let's take a look at how to use Server-Sent Events in a realistic ... After making our React application present some static...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found