Forbidden 403 when using this.uploader.url(true)

[radiegtya]

When I was using this code from example

<template name="myPicture">
  <img src={{url}}/>
</template>
Template.myPicture.helpers({
  url: function () {
    //pass true to download the image into cache (preload) before using it.
    return this.uploader.url(true);
  }
});

I am getting error message:
GET https://piyiku.s3.amazonaws.com/brendan-rodgers-soccer-friendly-manchester-city-vs-liverpool-fc-850x560.jpg/ 403 (Forbidden)

The image actually have been uploaded correctly, but I can't display the image using above helpers example.

Any suggestion about this?

Thanks

[delgermurun]

If it happens when downloading the file, here are few common things to check:

• The acl was set "public-read" during upload.
• The policy set on the bucket allows public read access.
• CORS is properly set up.

via #23

[radiegtya]

Cool, Thanks @delgermurun . But unfortunately I got another error.

the image preview return

GET https://piyiku.s3.amazonaws.com/asumeteorssss.jpg/ 404 (Not Found)

It was because the correct url is
https://piyiku.s3.amazonaws.com/asumeteorssss.jpg (without slash "/" on the back)
but now the returned preview url was
https://piyiku.s3.amazonaws.com/asumeteorssss.jpg/ (using slash "/" on the back)

any suggestion about this? thanks

[delgermurun]

@radiegtya Did you check your create directive code? Maybe you add / on key function. https://github.com/CulturalMe/meteor-slingshot/blame/master/README.md#L64

[radiegtya]

Here are my simple code sample:

CLIENT:

var uploader = new Slingshot.Upload("myFileUploads");
 Template.hello.events({
        'click button': function() {
            // increment the counter when button is clicked
            Session.set("counter", Session.get("counter") + 1);

            uploader.send(document.getElementById('file').files[0], function(error, downloadUrl) {
                console.log(downloadUrl) //LINK HERE ARE CORRECT
            });
        }
    });

Template.myPicture.helpers({
        url: function() {
            //pass true to download the image into cache (preload) before using it.
        return uploader.url(true); //NAH THIS PART RETURNING THE INCORRECT LINK WITH SLASH
        }
    });

SERVER:

Slingshot.createDirective("myFileUploads", Slingshot.S3Storage, {
        bucket: "piyiku",
        allowedFileTypes: ["image/png", "image/jpeg", "image/gif"],
        maxSize: 0,
        acl: "public-read",
        authorize: function() {
            return true;
        },
        key: function(file) {            
            return file.name;
        },
        AWSAccessKeyId: "myAccessKeyID",
        AWSSecretAccessKey: "mySecretWife",
    });

Any Suggestion about this? Thanks

[gsuess]

What version of slingshot are you using? Image pre-loading with .url(true) is not supported in the latest release yet, but it should not trigger the behaviour that you describe here either.

[frco9]

There's a typo in the doc :

 <img src={{url}}/>

Should be

 <img src="{{url}}" />