Next.Js 14 - AWS S3 Image Upload using API Route

Поділитися
Вставка
  • Опубліковано 23 гру 2024

КОМЕНТАРІ •

  • @RaddyDev
    @RaddyDev  6 місяців тому +8

    Hey everyone, I've come across a few S3 horror stories recently and wanted to share a word of caution. Please be mindful when using 'pay only for what you use' services, as bills can stack up quickly if something goes wrong. Regularly review your cost and usage reports and set up AWS Budgets for alerts. And like BobBoblsSwag said, please don't use the "NEXT_PUBLIC_" prefix before the environment variables.

  • @xovAvox
    @xovAvox Рік тому +8

    This is exactly the functionality I wanted to implement in my application, but I could never get it to work on my own. This tutorial is the only one out of many that I watched that actually worked for me! Thank you so much!

    • @RaddyDev
      @RaddyDev  Рік тому

      Glad to hear that the video was helpful!

  • @himynameisvirgil
    @himynameisvirgil Рік тому +4

    You save my life and my semester!!!!! Thank you so much for the tutorial. I read a lot but none was as clear as your tutorial.

  • @JustinTiell
    @JustinTiell Рік тому +3

    This video was amazing! I kept finding ones that almost solved the issue, but this was perfect for my needs.

  • @gabriele8339
    @gabriele8339 5 місяців тому

    Explained in a simple way without missing anything => perfect tutorial

  • @ambitious1z
    @ambitious1z 4 місяці тому

    Thanks!

    • @RaddyDev
      @RaddyDev  4 місяці тому +1

      What a legend! Thank you!

  • @RaddyDev
    @RaddyDev  Рік тому +1

    I hope that you find the video useful.

    • @FipHomes
      @FipHomes 11 місяців тому

      Did you make a video using server actions yet? If not, that would be very useful! Thanks, great job!

    • @RaddyDev
      @RaddyDev  11 місяців тому

      I did: ua-cam.com/video/3TaknF1kiN0/v-deo.html

  • @tanmaypant8493
    @tanmaypant8493 7 місяців тому

    THANK YOU SOOOOO MUCH FOR THIS MASTERPIECE!!
    I am really looking forward for more on aws!

  • @himynameisvirgil
    @himynameisvirgil Рік тому

    Thanks!

    • @RaddyDev
      @RaddyDev  Рік тому

      Wow that's super kind of you! That's my first super thanks, thank you! 🎉

  • @BobBobIsSwag
    @BobBobIsSwag Рік тому +51

    Hey, please don't use the "NEXT_PUBLIC_" prefix before the environment variables because this makes them publicly available to the client browser. These env variables are only supposed to be used Server Side through Api Routes/Server Actions. This creates a security vulnerability.

    • @RaddyDev
      @RaddyDev  Рік тому +7

      Thank you for pointing that out. I've pinned your comment so everybody is aware. I am am also trying to blur the public part 😄

  • @saadbaig3060
    @saadbaig3060 9 місяців тому

    Great Video! Thank you so much ❣

  • @anubhav5709
    @anubhav5709 Рік тому +1

    Great video Hope u create more on AWS Services from nextjs

  • @Perrynatufe9105
    @Perrynatufe9105 11 місяців тому

    Thank you so much. THis video was really helpful

    • @RaddyDev
      @RaddyDev  11 місяців тому

      Glad it was helpful!

  • @Rajvirnahar
    @Rajvirnahar 9 місяців тому +2

    Subscribed. can you do a video where you show how to add these stored images in S3 to to ur website front end?

  • @official_kaifansari
    @official_kaifansari 3 місяці тому

    How I get upload percentage to client side ???

  • @ambitious1z
    @ambitious1z 4 місяці тому

    amazing!

  • @ruchithsamarawickrama4604
    @ruchithsamarawickrama4604 7 місяців тому

    thank you , very clear

  • @amranmohamed377
    @amranmohamed377 Рік тому +2

    How do you get the policy; you justed pasted from out no where 😅

    • @RaddyDev
      @RaddyDev  Рік тому +1

      😁 When you Edit the Bucket policy you can click on Policy Examples or Policy Generator and create one that suits your needs. In Policy Examples you'll find a lot of good use cases which you can copy/paste and finally, you can look at the Varcel AWS S3 Image Upload example policy. They've added a few more actions:
      {
      "Version": "2012-10-17",
      "Statement": [
      {
      "Effect": "Allow",
      "Action": [
      "s3:DeleteObject",
      "s3:GetObject",
      "s3:ListBucket",
      "s3:PutObject",
      "s3:PutObjectAcl"
      ],
      "Resource": ["arn:aws:s3:::BUCKET_NAME", "arn:aws:s3:::BUCKET_NAME/*"]
      }
      ]
      }

    • @amranmohamed377
      @amranmohamed377 Рік тому +1

      @@RaddyDevThank you SOO much for your tutorial video Raddy! Please can you direct us how to do it with server actions, if you get a time tor that?

    • @RaddyDev
      @RaddyDev  Рік тому

      That's how I ended up doing it on one of my website - using server actions. I could do a video on that... I am strongly considering making one

  • @eraybaydemir8550
    @eraybaydemir8550 Рік тому

    my man it is very clear and good video. Thank you al lpt for your generous contribition. I loved your clear explanation and to the point statements and you have explained every little detail for us to understand completeyly keep it up buddy!!
    one thing I want to ask is why didnt we put headers params while writing the fecting request. I expected that we should write the classic:
    'Content-Type' : 'application/json'

    • @RaddyDev
      @RaddyDev  Рік тому

      I appreciate the comment. I should have done that to ensure that both client and server are in sync peaking the same language. I will update the GitHub repo, thank you

  • @togya4
    @togya4 2 місяці тому

    you are the best

  • @ongame2264
    @ongame2264 Рік тому +1

    How to get the image url or show the images to our website? I have tried using the AWS SDK Client S3 but it doesn't work.
    Can you give some explanation? Is there a tutorial about this? Thanks in advance🙌

    • @RaddyDev
      @RaddyDev  Рік тому +1

      You could do it manually:

    • @ongame2264
      @ongame2264 Рік тому

      Oh my gosh, this is a very nice idea!
      Thank you so much @@RaddyDev! 🙌

  • @YashKumar-cj6gx
    @YashKumar-cj6gx Рік тому +1

    Hey can you give the code which gives us the public link on the same page of our image after uploading it to S3

    • @RaddyDev
      @RaddyDev  Рік тому

      It should be in the description of the video

  • @z1982_
    @z1982_ 8 місяців тому

    Hello!
    The bundle size is 3.04 MB... Will it affect the performance of my next app?

  • @abhishekkumar-ud7dc
    @abhishekkumar-ud7dc Рік тому

    It was really helpful

  • @injamulhaque9641
    @injamulhaque9641 10 місяців тому

    the bucket policy given in the description is not working, I have added "s3:PutObject" in the Actions array then it is working, did I do it correct?

    • @RaddyDev
      @RaddyDev  10 місяців тому

      It's not the Action, but the Resource that you need to change. You need to add your bucket name, like I did in the video. This line: "Resource": "arn:aws:s3:::your-bucket-arn-name/*"

  • @aogunnaike
    @aogunnaike Рік тому

    Thanks for this 🙏

  • @sujan_shee
    @sujan_shee Місяць тому

    How can we get the URL after uploading an image to AWS? I mean in the code?

    • @RaddyDev
      @RaddyDev  Місяць тому

      You can store the file name into your database and then join the URL that Amazon S3 gives you when you create your bucket plus the file name. That would be the full path to a specific file. If you want to list all objects from your bucket, you could look into the command ListObjectV2

  • @nhanhuynh1845
    @nhanhuynh1845 Рік тому

    hey bro, when I click to Object URL of the image after uploaded in s3, it will auto download but i just want it to show the image. How can I fix it?

    • @RaddyDev
      @RaddyDev  Рік тому +1

      This sound like a browser setting problem to me. Can you try on another browser to see if the images open instead of download directly? It's probably a setting that you can change easily

    • @nhanhuynh1845
      @nhanhuynh1845 Рік тому

      ​@@RaddyDevtks I fixed it, I missed property ContentType when put command 😅

  •  Рік тому

    I don't get it - are You uploading image from the server? So you send image to Your server and then it sends to remote server?

    • @RaddyDev
      @RaddyDev  Рік тому +2

      The web server acts as a middleman. A person uploads a file using a form, web server receives the file (perform any operations - ex file optimisation, checks, etc...) and then we use the AWS SDK API to send the file directly to AWS S3. In this case nothing is stored on the web server and we just use it for processing, validation, optimisation etc..

  • @CaseStudyQB
    @CaseStudyQB Рік тому

    Great tutorial, i wish i knew how to get the final public path back through the api

    • @RaddyDev
      @RaddyDev  Рік тому +1

      Thank you! Copy paste from another reply: You could do it manually:

    • @CaseStudyQB
      @CaseStudyQB Рік тому +1

      @@RaddyDev awesome! Thanks so much for the reply! I will try this when I get home

  • @GeisaGamer
    @GeisaGamer 10 місяців тому

    Do you have a video with typescript?

    • @RaddyDev
      @RaddyDev  10 місяців тому

      I only have JS. Maybe you could ask AI to help you out convert them

  • @kdot78
    @kdot78 4 місяці тому +1

    How would you track the progress of the uploading task? also make a video about uploading multiple files and tracking progress of multiple files. that could be really interesting. Most of time when you upload files on the internet you get progress bar and you can also abort the task. thanks anyway tho, pretty good video 👍

    • @kdot78
      @kdot78 4 місяці тому

      just saw a video on your channel about multiple file upload. so thanks. but still consider the progress bar and abort feature

  • @maxmurakami-moses4728
    @maxmurakami-moses4728 7 місяців тому

    Can you create a tutorial with all the privacy things turned on? I don't want anyone on the web to be able to access my files.

    • @RaddyDev
      @RaddyDev  7 місяців тому

      You can turn the privacy ON and nobody is going to be able to access them. If you want to allow access to a specific IP, that's possible too. A good example of how to do this is provided in their documentation, which you can find near the Bucket Policy text area.

  • @jagdish1o1
    @jagdish1o1 4 місяці тому

    Instead of putting setLoading state in both try and cache, simply put that in finally block.
    And now we have server actions 🙌 so no more apis.

  • @Wannabvlogger
    @Wannabvlogger 10 місяців тому

    Thank you so much for this , can we go ahead one more step and show the data already stored in aws bucket in our frontend ?? Then i can make a porn web i guess i can put all the video manuallly in s3 and then i just have to show them in frontend
    Pls reply

  • @saulotarsobc
    @saulotarsobc 2 місяці тому

    +1

  • @suonvansak
    @suonvansak 5 місяців тому

    when deployed is not working 😢

    • @RaddyDev
      @RaddyDev  5 місяців тому

      Where did you deploy? It should work under any Node.js setup such as Render, Nginx/PM2, Docker, DigitalOcean App, Dokku, CapRover, Coolify, etc.

  • @berndeveloper
    @berndeveloper 5 днів тому

    why you ppl use .js instead of .ts? we waste our time with js, real apps don't work with js, TS PAY, not JS!