Maintaining the Slingshot package

packages
#1

We just started using Slingshot on a project, partly because the way it works looks much more efficient to passing uploads through the server (which loads the server).

It hasn’t been touched for 6 years, which at first seems like a reason not to use it, but there appear to be people that are using it successfully. So I persevered, and got it to work.

The doco shows how to set up CORS permissions, but it does not work (perhaps outdated). I found a way to fix it, and would like to update the documentation.

I may also want to make other changes (like add some proper tests)

What I am saying is that I might be putting my hand up to maintain it. How would I do that?

9 Likes
#2

First try to contact the original creator/maintainer to see if you can get the needed access to become the new maintainer. Best if you can get more people to help you with it.

Also check out MCP, that is the second option to establish a longer solution if the first one isn’t possible or sufficient.

#3

Thanks Jan, I emailed the biggest contributor, Garik Suess, we’ll see what he comes back with

1 Like
#4

I use that package as well.

#5

I might be putting my hand up to maintain it.

This is awesome, I am also a heavy user of edgee:slingshot. Works reliably ever since.

1 Like
#6

Yeah, that package has been working fine for years…knock on wood :sweat_smile:

#7

Ok, let’s do this. I’ve looked through the code, and it’s simple enough.

I have forked it to https://github.com/Back2bikes/meteor-slingshot

I might review the old PR’s first and merge as many of those as make sense.

Please let me know if you would like to help.

#8

I am getting stuck in now - has anyone had success in doing an upload progress bar in React? I am clearly missing something on how to do it.

#9

I have done it but im not in my pc rigth now, ill share it tomorrow with you.

#10

This is what I’ve:

First I declare a Slingshot uploader:

const uploader = new Slingshot.Upload('File-Uploader');

And I wrap the uploader.progress within tracker that would call the progress function passed.

const uploadToS3 = (file, uploader, progress) =>
  new Promise((resolve, reject) => {
    uploader.send(file, (error, s3Url) => {
      if (error) {
        console.log(error);
        reject(error);
      } else {
        resolve({ fileName: file.name, s3Url, type: file.type });
      }
    });
    if (progress && typeof progress === 'function') {
      Tracker.autorun(() => {
        progress(uploader.progress());
      });
    }
  });

And from the UI, the progress function will get called with a percentage change each time it changes. When this function gets called, I set the state of the progress react component:

    progress: value => {
          console.log(`current value: ${value}`);
          if (!isNaN(value)) {
            this.setState({
              progress: value * 100
            });
          }
        }

I hope that helps.

Fun fact, Ryan Dahl, the creator of node, stated that the real-time progress bar implementation was his motivation for creating NodeJS in the first place.

2 Likes
#11

@alawi Thanks, that did the trick… but there is no need to wrap a promise around the uploader.send, it worked fine without that.

One question though, is Tracker.autorun() the right way for React? I’m used to using withTracker, and I wonder if there is way to use that instead?

@pmogollon I would be interested to see your approach

1 Like
#12

That depends on the use-case. If the functionality has a limited scope, like a component or a tree of components, I would always prefer withTracker(), so tracking will stop once the component(s) are unmounted.

If you want do track changes at a “central” location in your app, e.g. to check the connection status, Tracker.autorun() comes in handy.

1 Like
#13

Last time I tried, the cors has been a problem for me too.

I think several among us would be glad to loearn how you solved it :slight_smile:

This package is good, though I might get some useful update to make the progress / resume / pause thing a little bit easier and straightforward, mainly when not using blaze :slight_smile:

#14

You have to set-up CORS in the bucket settings, under “Permissions”. You can find the correct CORS config in the slingshot docs.

image
image1025×546 25.7 KB

Also, you have to disable “Block public access”:

image
image1025×469 51.8 KB

2 Likes
#15

@waldgeist has provided help above, which is how I solved it too.

And yes, I am planning on updating the docs and providing some examples to make it easier to get started. I have thought about using axios instead of the raw XMLHttpRequest, although that starts introducing module dependencies. Feel free to offer opinions on that :slight_smile:

The repo is now at https://github.com/Back2bikes/meteor-slingshot. I have merged the old PR’s from 6 years ago. Tests needed

4 Likes
#16

@storyteller Garik has come back to me and said we can do a transfer. We will meet at the weekend. The old organisation doesn’t exist any more. We can either move it to Back2bikes (A bicycle recycling NFP that I run), or we can go to MCP - what do you think?

3 Likes
#17

I vote for MCP, slingshot is a power package just like Meteor account, it makes the meteor ecosystem pleasure to work with.

But I think MCP will soon need a shared funding account with a voting ranked backlog of tasks given the growing number of packages under its umbrella.

#18

Right, sure. Is MCP funded, or you think it should be?

#19

I think it should be. It seems it has a significant scope of work to run on volunteer/donation basis, at least to me. But with shared funding, it will need some basic governance as well.

#20

I also vote for MCP.