(edgee) slingshot + (ryanswrt) autoform-slingshot

help
1

Hi! I’m trying out edgee:slingshot + ryanswrt:autoform-slingshot packages and so far, the upload feature works just fine.

However, the provided [Progress Bar code] (https://github.com/CulturalMe/meteor-slingshot#progress-bars) doesn’t seem to work when used with ryanswrt:autoform-slingshot.

Could anyone help with the above issue, please? Thanks!

2

If I were to take a guess (you haven’t provided much info) - you aren’t reading the progress correctly.

How about you do a console.log() of the this.uploader.progress() to see if you actually get a value for that.

3

Hi @cstrat, nothing appears in console.

[Schema] (https://github.com/aldeed/meteor-simple-schema) based on ryanswrt:autoform-slingshot [usage guide] (https://github.com/TheAncientGoat/autoform-slingshot/#usage)

picture_url: {
    type: String,
    optional: true,
    autoform: {
        afFieldInput: {
            type: 'slingshotFileUpload',
            slingshotdirective: 'myFileUploads',
        }
    }
},

product.html

{{> afQuickField name="picture_url" id="uploadFile"}}
<div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="{{progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{progress}}%;">
            <span class="sr-only">{{progress}}% Complete</span>
        </div>
</div>

product.js

Template.product.helpers({
   progress: function () {
       return Math.round(this.uploader.progress() * 100);
   }
});

Client and server

Slingshot.fileRestrictions("myFileUploads", {
  allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
  maxSize: 10 * 1024 * 1024 // 10 MB (use null for unlimited)
});

Server

Slingshot.createDirective("myFileUploads", Slingshot.S3Storage, {
   AWSAccessKeyId: Meteor.settings.private.s3.AWSAccessKeyId,
   AWSSecretAccessKey: Meteor.settings.private.s3.AWSSecretAccessKey,
   bucket: "bucket_name",
   acl: "public-read",

   authorize: function () {
       //Deny uploads if user is not logged in.
       if (!this.userId) {
           var message = "Please login before posting files";
           throw new Meteor.Error("Login Required", message);
       }
       return true;
    },
    key: function (file) {
       //Store file into a directory by the user's username.
       return "test/" + file.name;
    }
});
4

If you aren’t seeing anything in console for this.uploader.progress() then you must have the Slingshot object attached somewhere else. I think you need to attach the slingshot object to the Template to be able to use that exact line of code… I am not certain though, I am not on my dev machine so I can’t test for you either sorry!

5

Hi guys, I need help reviewing this PR.

It gives ryanswrt:autoform-slingshot lots and lots of improvements. Such as support for ionic, multiple directives per upload, i18n, no more hacks going on and more improvements.

Thanks in advance!

Cheers,
// Tim

6

I’ve just read the features that you added for ryanswrt:autoform-slingshot. Those are just awesome!

I’ll definitely try it out once I figure out how to use the merged PR >.<

Thanks for your contribution, @timbrandin!

7

Thx !!

Ryan just merged it, he only needs to publish the new version to meteor, but until then you could try timbrandin:autogiro-slingshot

But I think it’s just a matter of days before he publishes the new version.

Another option is to check out my fork in the correct branch in your packages folder, that works to. :slight_smile:

Cheers,
// Tim

Skickat från min iPhone

8

Hi @timbrandin,

I notice a few issues and wrote it at: https://github.com/TheAncientGoat/autoform-slingshot/issues/9

Please have a look. Thanks!