Upload Images to AWS S3
Fullstack Social iOS NodeJS REST
Before we can upload post objects from mobile, its best to test that things are working correctly in the browser. In this lesson, we'll be updating our Post creation from to include a file selector input to pick images from our computer. Once we submit our form, we'll use the skipper-s3 library to easily upload images to our AWS S3 storage area. You'll have to be careful not to expose your credential keys when putting this type of information in your source code.

Comments (7)
bmilts
3 years ago
After I create the post with an image, I get the following error. any idea where it's coming from? The image still loads into the S3 bucket so it must be connected correctly. [ UploadedFileMetadata { fd: 'f65cde84-53ed-491a-a7fe-f3beebb11628.jpg', size: 8022, type: 'image/jpeg', filename: 'images-2.jpg', status: 'finished', field: 'imagefile', extra: undefined } ] /Users/brendanmilton/Desktop/fullStackSocial/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/brendanmilton/Desktop/fullStackSocial/social/node_modules/express/lib/response.js:767:10) at ServerResponse.send (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/express/lib/response.js:170:12) at ServerResponse.json (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/express/lib/response.js:267:15) at Object.sendOK (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/sails/lib/hooks/responses/defaults/ok.js:61:14) at /Users/brendanmilton/Desktop/fullStackSocial/social/api/controllers/post/create.js:21:20 at cb (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/skipper/lib/private/Upstream/prototype.upload.js:80:14) at Writable.allFilesUploaded (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/skipper/lib/private/Upstream/prototype.upload.js:141:5) at Object.onceWrapper (events.js:286:20) at Writable.emit (events.js:203:15) at Writable.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 _uploadFile (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/skipper-s3/index.js:176:20) at ManagedUpload._buildS3Client.upload [as callback] (/Users/brendanmilton/Desktop/fullStackSocial/social/node_modules/skipper-s3/index.js:226:14) [nodemon] app crashed - waiting for file changes before starting...
Brian Voong
3 years ago
bmilts
3 years ago
Thanks so much Brian! I went ahead and saw in the code you had commented out the res.end() so sorry to trouble you with the question! I will try to harder to investigate in the future! Loving the course.
Nishant Raithatha
3 years ago
Why do we use AWS to store images?? Cannot we store this images on mongo? Trying to understand the rationale behind using AWS
Brian Voong
3 years ago
Nishant Raithatha
3 years ago
got it thank you so much
AlfieLBTA
3 years ago
Hey Brian - i tried for several hours to implement it with Firebase (AWS will take a day to allow me to create S3 buckets) - the issue im havving is that the "var file = req.file('imagefile');" returns an upstream but i can't get the name and to the method storageRef.put() it doesn't seem to be a valid Blob or File , any pointers in how to debugg that ?
alejandro
3 years ago
im getting this error everytime i reload the page : img%20url:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Danny S
3 years ago
hi Brian, I'm trying to upload image to my local disk with code as below, the file is upload properly and data has been insert into my table, the question is when res.redirect('/post') is executing, the home page can not render the image, but if i right click the image broken icon and open it to another chrome tab, it shows good. can you please help to check? //upload file to local disk req.file('imagefile').upload({ // don't allow the total upload size to exceed ~10MB dirname: '../../assets/images/gallery', maxBytes: 10000000 },async function (err, uploadedFile) { if (err) { return res.serverError(err); } // If no files were uploaded, respond with an error. if (uploadedFile.length === 0){ return res.serverError("No files were uploaded!"); } // Use this log all the uploaded file info console.log(uploadedFile[0]); // Get the name of the file var fileName = uploadedFile[0].filename; console.log("filename = " + fileName) // Get the file descriptor and remove the directory details var fileUID = uploadedFile[0].fd.replace(/^.*[\\\/]/, ''); fileUID = "http://localhost:1337/images/gallery/" + fileUID // Create the image in your Database const userId = req.session.userId await Post.create({ title: title, text: postBody, appraisal: appraisal, user: userId, imageUrl: fileUID }).fetch() res.redirect('/post') }); ######home.ejs########## <% allPosts.forEach(p => { %> <div class="card"> <div style='font-weight: bold'> <%=p.user.fullName %> </div> <div style="color: rgb(186, 186, 186)"> <%= new Date(p.createdAt).toLocaleTimeString() + " " + new Date(p.createdAt).toLocaleDateString() %> </div> <div class="textbody"> <%- p.text %> </div> <img style="max-width: 400px;" src='<%= p.imageUrl%>' /> </div> <% }) %>
gerkov77
3 years ago
Hey Brian! My solution of getting rid of the 'missing image icon' is simply let the "scr" string empty . like that: <img scr=""> No need to write additional code, and nothing breaks.
gerkov77
3 years ago
src ofcourse, my bad..
Lazaro Ambrosio
2 years ago
This is an awesome course. I am learning so much so far!
HELP & SUPPORT