Make S3 Files Public with ACL
Fullstack Social iOS NodeJS REST
With the files we've uploaded into s3, you'll notice that they are not publicly readable inside of our website. To fix this, you'll want to create a publicly accessible bucket inside of your AWS S3 console. Once you have your bucket ready, we'll update our upload process to use skipper-better-s3 that allows ACL configuration options. Make sure to use your own access key and secret since I'll be disabling the ones used in these videos.

Comments (11)
pdefilippi
4 years ago
Brian, How do we handle gitHub commits when there are files that contain sensitive information. This is my first time using a paid service and including a key / secret in my code which leads to credit card info. Is this where git ignore comes in?
Brian Voong
4 years ago
pdefilippi
4 years ago
Lesson 48 is exactly what I was trying to do. Perfect
Brian Voong
4 years ago
jsayer7
3 years ago
hey Brian, when I add the better-skipper call into the project, then I get the following when I create a post with an image: <- POST /post (194ms 200) /Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/aws-sdk/lib/request.js:31 throw err; ^ Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client at ServerResponse.setHeader (_http_outgoing.js:470:11) at ServerResponse.header (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/express/lib/response.js:767:10) at ServerResponse.json (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/express/lib/response.js:264:10) at ServerResponse.send (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/express/lib/response.js:158:21) at file.upload (/Users/james.sayer/Source/Sails_Sandbox/web_social/api/controllers/post/create.js:30:13) at cb (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/skipper/lib/private/Upstream/prototype.upload.js:80:14) at Uploader.allFilesUploaded (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/skipper/lib/private/Upstream/prototype.upload.js:141:5) at Object.onceWrapper (events.js:286:20) at Uploader.emit (events.js:203:15) at Uploader.EventEmitter.emit (domain.js:448:20) at finishMaybe (_stream_writable.js:646:14) at afterWrite (_stream_writable.js:486:3) at onwrite (_stream_writable.js:476:7) at ManagedUpload.scope.client.upload [as callback] (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/skipper-better-s3/lib/uploader.js:85:14) at Response.finishSinglePart (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/aws-sdk/lib/s3/managed_upload.js:671:12) at Request.<anonymous> (/Users/james.sayer/Source/Sails_Sandbox/web_social/node_modules/aws-sdk/lib/request.js:364:18) [nodemon] app crashed - waiting for file changes before starting... The image actually does get uploaded to my bucket however, so I'm not sure what exactly is going on.
jsayer7
3 years ago
Nevermind. I didn't comment out the bottom returns lol
omari
3 years ago
Hi Brian, It would be awesome and very helpful to connect Python Machine Learning Code to our Sails MVC Backend. For example it should work like this: 1.) Click upload image button to upload your image 2.) Click Detect object button to detect objects on your image (The image should be transferred to the backend as input for the python code) 3.) The result is displayed to the user on the website (Html) Can I create a python file inside of my sailsmvc project containing all the ML code. Or does only Javascript work? How can I transfer the uploaded image to the backend and execute the code. A small example would be awesome to illustrate the mechanism.
Bobur Pakhriev
3 years ago
Hey Brian, i signed up to aws s3 and when i tried to sign in it's askin account id or Alias. How can i get this? i looked for it inside the aws but couldnt find
DHM
3 years ago
just type your email address in the account id
noorajaa
3 years ago
Hi Brian, I wonder, how you limit upload file sized ?
DHM
3 years ago
on behalf of Mr. Brain if anyone from Middle East and when you create your bucket and you choose Middle East region you need to type your region in the skipper code as if you don't it will show you some error because the default region is us
turtle0001
3 years ago
Hi, Do you guys also encountering an error if you post without uploading an image? I'm getting an error on the console: Part if the error message: (node:28683) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This err or originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:28683) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecat ed. In the future, promise rejections that are not handled will terminate the Node.j s process with a non-zero exit code.
Brian Voong
3 years ago
jke661s
3 years ago
Hi mate, I met the exactly same issue with you when I tried to post without an image. Finally I figured out that it was because the files object in the closure function doesn't have an attribute called "extra" because of not attaching an image. So it would be stuck on "const fileUrl = files[0].extra.Location". My solution regarding to this issue is to wrap this line of code into a try catch as below. Not sure if it is the best solution, but at least the error vanishes. var imageUrl = '' try { imageUrl = files[0].extra.Location } catch (error) { imageUrl = '' } Hopefully it helps. Cheers, Jiaqi
gerkov77
3 years ago
Same here! Cool, thanks! Cheers, Greg
Lazaro Ambrosio
2 years ago
Hello Jiaqi is it possible to send the code here? I wanted to compare if I did it right. From your help I did this! file.upload(options, async (err, files) => { if (err) { return res.serverError(err.toString()) } var fileUrl = "" try { fileUrl = files[0].extra.Location } catch(error) { fileUrl = "" } const userId = req.session.userId var imageUrl = "" try { imageUrl = files[0].extra.Location } catch (error) { imageUrl = "" } await Post.create({text: postBody, user: userId, imageUrl: fileUrl }).fetch() res.redirect('/post') }) I was able to post without using images.
gerkov77
3 years ago
Hey Brian , could you give us just a little bit more explanation on these bucket ACL publicity settings? You stated , that It can be very expensive, if everything iis unchecked there, but then you left them unchecked. I can't afford to pay a lot for these buckets, when I do not even completely understand what they are, and how they work. I read all those options about the different settings, but I don't understand a word of them. Which one I should check to my app work, but not paying a lot of money for this service? Thanks In advance: Greg
Brian Voong
3 years ago
gerkov77
3 years ago
Thanks, Brian! So basically, as long as I am just running this web-app on my local machine, and no one accesses it other than my ios app on simulator, I have nothing to be afraid of. And I can make some further decisions later when I go in production.
Brian Voong
3 years ago
gerkov77
3 years ago
Wow! Good to know! Thank you for bringing my attention to it!
omq78
3 years ago
hi brian my S3 Bucket in AWS is private I can write to it but the link is not showing the image is there a way to read my image links in .ejs file without changing it to public thanks
Brian Voong
3 years ago
omq78
3 years ago
thanks
omq78
3 years ago
hi brian all good for now but when i try to post text without image it gives error this is my create.js file excluding comments and console log s //========================================================= module.exports = async function(req, res) { const postBody = req.body.postBody const file = req.file('imagefile') const options = { // This is the usual stuff adapter: require('skipper-better-s3') , key: '*************************' , secret: '**************************************************' , bucket: '***************' // Let's use the custom s3params to upload this file as publicly // readable by anyone , s3params: { ACL: 'public-read' } // And while we are at it, let's monitor the progress of this upload , onProgress: progress => sails.log.verbose('Upload progress:', progress) } file.upload(options, async (err, files) => { if (err) { return res.serverError(err.toString()) } const fileURL = files[0].extra.Location const userId = req.session.userId await Post.create({text: postBody, user: userId, fileUrl: fileURL}).fetch() res.redirect('/post') }); }
Brian Voong
3 years ago
omq78
3 years ago
Thank you
kevingalloway
2 years ago
There's a bug that keeps saying Login to Download Project even when I am logged in or try to log in... happens on both Chrome and Safari
kevingalloway
2 years ago
Weird, seems like its just this page. Was able to download module 13. All good though now.
Lazaro Ambrosio
2 years ago
Same here. I downloaded the files section video 14. Which helped me out!
Lazaro Ambrosio
2 years ago
Section 15*
HELP & SUPPORT