Use Server Actions to Upload Files in Next.js with Cloudinary - Dev Hints

Поделиться
HTML-код
  • Опубликовано: 30 янв 2025

Комментарии • 66

  • @mariocrusso
    @mariocrusso Год назад +6

    Works on Localhost but when pushed to vercel, don't work.

    • @Sceppi
      @Sceppi Год назад

      Indeed, I have the same issue. I get an error 405 Method not allowed in production on Vercel.

    • @josuedavidkennedymamani3576
      @josuedavidkennedymamani3576 11 месяцев назад

      @@Sceppi Now I have the same problem, you still don't know how to solve it, it would help me.

    • @media-blinker
      @media-blinker 8 месяцев назад

      He also demonstrates in localhost 😂 this function is useless

    • @michaelrodrigues5892
      @michaelrodrigues5892 4 месяца назад

      make sure you pass the credentials

  • @jhkadvkj17
    @jhkadvkj17 Год назад +6

    Great video, just what I was looking for

    • @colbyfayock
      @colbyfayock Год назад

      awesome!! glad you found it helpful

  • @mystupidbrain5299
    @mystupidbrain5299 11 месяцев назад +1

    Thank you. Exactly the video I was looking for.

  • @blaqhakym
    @blaqhakym Месяц назад

    Thank you🙂. Now a subscriber to your own channel

  • @whezboo
    @whezboo 9 месяцев назад +1

    can we get the url for the uploaded image and store in a different database?

    • @colbyfayock
      @colbyfayock 8 месяцев назад

      absolutely! the upload will return an object containing the resource information, including a public ID (cloudinary ID) and URL, along with width, height, and other properties. you can grab those values and store it wherever you'd like immediately after the upload
      I recommend storing those values as well to help with being able to provide a width and height inside your application when visualizing it. some people and integrations store the entire resource object when possible.

  • @totallynotdavid
    @totallynotdavid Год назад +1

    Good video, I tried to build this with Cloudflare Pages with the nextjs-server-actions-upload project in the cloudinary-examples repo. But got this error:
    The following routes were not configured to run with the Edge Runtime: /index
    Is it not possible to deploy this through Cloudflare Pages?

    • @colbyfayock
      @colbyfayock Год назад

      is this a problem you've noticed with just the Cloudinary example or any server actions example? Generally speaking the Node.js SDK can't run on the Edge runtime AFAIK, so if the entire application is running on Edge, that may be the issue

  • @hichamamroussi9087
    @hichamamroussi9087 7 месяцев назад

    Why did you convert the image to a buffer and you didn't send it directly as a file ?

    • @colbyfayock
      @colbyfayock 7 месяцев назад

      the SDK only accepts a string or an instance of Buffer or Uint8Array

  • @elieserlaguerre3149
    @elieserlaguerre3149 11 месяцев назад

    thank you for posting this video, but I don't have a question though, do you have a version where the code is not in typescript? I was trying to follow along but I got stuck because I'm not using typescript.

    • @colbyfayock
      @colbyfayock 11 месяцев назад

      sorry don't currently have a non-TS example, will work on that, but in the meantime, here's the code itself: github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-server-actions-upload/src/app/page.tsx
      in the related snippet there should only really be the ": FormData" and "as File" that you can both remove

    • @evheniydan
      @evheniydan 6 месяцев назад

      TypeScript is just a superset of JavaScript so you can just don't use TypeScript-specific syntax.

  • @kaushaljoshi7190
    @kaushaljoshi7190 9 месяцев назад

    How can I setup cloudinary config in a separate file, and import it whenever I need to use cloudinary?

    • @colbyfayock
      @colbyfayock 8 месяцев назад +1

      something like this should work:
      import { v2 as cloudinary } from 'cloudinary';
      cloudinary.config({
      cloud_name: process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,
      api_key: process.env.NEXT_PUBLIC_CLOUDINARY_API_KEY,
      api_secret: process.env.CLOUDINARY_API_SECRET,
      });
      export function getCloudinary() {
      return cloudinary;
      }

  • @mphatsomtogolo6263
    @mphatsomtogolo6263 Год назад

    What if I wanted to submit a form with a couple of input fields and an image as well. Say for example, a blog. How can I do this? I used to use filepond with express js and I just started learning react.

    • @colbyfayock
      @colbyfayock Год назад

      here's an example of a standard form that captures input and send it to an API endpoint github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-upload-formdata

  • @Maskedlapis64
    @Maskedlapis64 8 месяцев назад

    Does this work the videos too? I want to upload videos and images

    • @daytatech-youtube
      @daytatech-youtube 8 месяцев назад +1

      If you are using Vercel, there are some severe limitations to large file uploads, namely getting the the callback functions setup in a backend api. Also, server uploads are limited to 4.5mb so you have to opt in to using a client component for large file uploads. Vercel has some documentation on how to do this but its tricky to setup. Good luck

    • @colbyfayock
      @colbyfayock 8 месяцев назад

      daytatech had some good information there about the limitations. it may make sense, as they say, to perform the upload clientside, where then, the idea route would be to create an endpoint that solely signs your upload parameters, then upload directly to Cloudinary from the client, to avoid having the function as a middleman. i dont have good resources to pass off other than the docs: cloudinary.com/documentation/authentication_signatures
      i can put together an example if this is something you would find helpful

    • @colbyfayock
      @colbyfayock 8 месяцев назад

      @@daytatech-youtube great points!

  • @SkyNightSnow
    @SkyNightSnow Год назад

    What would be the correct way if I wanted to upload an array of images?

    • @colbyfayock
      @colbyfayock Год назад

      there's not a native way to do this, but we just launched a video that helps show you how to do this easily with concurrency: ruclips.net/video/_bTX2L0jPzA/видео.html

    • @Codewithbilal123
      @Codewithbilal123 Год назад

      map over the array and upload

    • @cesarayalavargas3623
      @cesarayalavargas3623 Год назад

      The issue is that it doesnt work on the fly on NextJS Server Actions
      I got the following error using p-limit
      ./node_modules/p-limit/index.js:2:0
      Module not found: Can't resolve '#async_hooks'
      Did you mean './#async_hooks'?
      @@colbyfayock

  • @Code-prince
    @Code-prince 5 месяцев назад

    Exactly the video, Thank you

  • @MarkusNode20
    @MarkusNode20 Год назад

    Great video - thank you!
    Can you also please show - how I need to design a nextjs 14 component - to automatically upload the entire contents of a windows directory to Cloudinary and automatically tag all images via AI?

    • @colbyfayock
      @colbyfayock Год назад +1

      automatically uploading an entire in Windows would be tricky without direct access toe the filesystem, unless you mean giving someone the ability to select files from their filesystem then subsequently uploading them. you can use the CldUploadWidget component to do that:
      - next.cloudinary.dev/clduploadwidget/basic-usage
      - ruclips.net/video/ULp6-UjQA3o/видео.html
      Here's also a video for how you can automatically tag all of your uploads, it's in Node, but you would provide the same option to the upload widget:
      - ruclips.net/video/FlifTBr8pV8/видео.html

  • @HueCodes
    @HueCodes 10 месяцев назад

    i don't know what with this tool i use nextjs and use next-cloudinary it has the worst docs i don't how to get the image to show in my project. adn this video only make it more confusing to me

    • @colbyfayock
      @colbyfayock 10 месяцев назад

      hey sorry to hear about your experience, there's nothing Server Actions specific with the Next Cloudinary library, however i hope to add helpers in the future
      if you have any specific feedback on points i can address in the Next Cloudinary documentation (or any documentation) i'd love to hear it
      here's an example using Server Actions as well as how you can show them: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload
      you can also join the Cloudinary discord where you can ask your specific question and @ me there: discord.gg/cloudinary or DM me on Twitter

  • @AndrulisTravel
    @AndrulisTravel 10 месяцев назад

    Nice! It would be useful to have multiple image (with restriction to jpg, png and etc.) upload with some nice drag and drop functionality :)

    • @colbyfayock
      @colbyfayock 10 месяцев назад +1

      definitely agree, you can actually get that out of the box with the CldUploadWidget available with Next Cloudinary: ruclips.net/video/ULp6-UjQA3o/видео.html
      hoping to get a video on creating your own dropzone and uploading with Cloudinary, but i don't have an ETA on that

    • @AndrulisTravel
      @AndrulisTravel 10 месяцев назад

      @@colbyfayock another idea, also to use Cloudflare image service, 100k images with CDN just 5$ and multiple variants of image sizes included :) They have API and if you use custom loader with Nextjs Image, you will avoid Vercel's limit for image optimization, because Image component will use Cloudflare image CDN.

  • @Sbz-i2c
    @Sbz-i2c Год назад

    there is also a next-cloudinary package isn t it ?..

    • @colbyfayock
      @colbyfayock Год назад

      yes!! the Node package is just the easier way to work with Cloudinary in a node server environment at this time, but my intent is to add some convenient methods right in the package at some point

    • @Sbz-i2c
      @Sbz-i2c Год назад

      Thank you @colbyfayock , looking forward to it, Cloudinary is amazingly usefull but the documentation is awfull..

    • @colbyfayock
      @colbyfayock Год назад

      @@Sbz-i2c if you have any specific feedback on the docs im happy to pass it along

  • @alihammad8667
    @alihammad8667 Год назад +1

    Files error
    Error: Error: [object Object]

    • @colbyfayock
      @colbyfayock Год назад

      what is the error that `[object Object]` is specifying when you inspect it? here's the code if it helps: github.com/cloudinary-community/cloudinary-examples/blob/main/examples/nextjs-server-actions-upload/src/app/page.tsx#L28

  • @coding557
    @coding557 Год назад +1

    Its work perfectly in dev mode but in build it crash

    • @alonsvar
      @alonsvar Год назад

      I have the same problem. In Dev mode this works, but when I compile it it no longer works. Any suggestions on how you solved it or any clues as to what is causing it. I should clarify that it only fails with upload_stream.

    • @colbyfayock
      @colbyfayock Год назад +1

      @@alonsvar hey there ive deployed and tested this example on Vercel: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload

    • @colbyfayock
      @colbyfayock Год назад

      hey there ive deployed and tested this example on Vercel: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload

  • @Vir7uaLGameplays
    @Vir7uaLGameplays 10 месяцев назад

    Can you make a video with sharp?

    • @colbyfayock
      @colbyfayock 10 месяцев назад +1

      thanks for the idea, did you have a specific use case in mind that wouldn't be handled with Cloudinary?

    • @Vir7uaLGameplays
      @Vir7uaLGameplays 10 месяцев назад

      @@colbyfayock Everything would be handled on a server side function. I already managed to do it if you want to have a look just tell me

  • @lukassmida4885
    @lukassmida4885 10 месяцев назад

    This DOES NOT WORK for utf-8 characters.

    • @colbyfayock
      @colbyfayock 10 месяцев назад

      can you elaborate on whats not working? an example of code would help as well. feel free to jump into the discord and share with me: discord.gg/cloudinary
      also here's some example code that works: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload

    • @lukassmida4885
      @lukassmida4885 10 месяцев назад

      @@colbyfayock I used the same code as you in the video, just to be sure there are no differences to interfere with the upload pattern, it just remove the original encoding so utf-8 is converted to latin1 or so. The only option is to convert it back to utf-8 encoding in server action, but that is very ugly and unstable solution.

    • @colbyfayock
      @colbyfayock 10 месяцев назад

      ​@@lukassmida4885 yeah i agree that doesn't sound great, though i appreciate your patience here, do you have an example file you can point me to or something? do you suspect this is a Cloudinary SDK issue or a Next.js Server Action issue? i hadn't noticed any issues with the files i tried to upload, though i only tried images so far, but with that, they seemed to upload to the account as expected. mostly trying to figure out if this is something that i need to address in my example, something wrong with the SDK, or if it's somewhat out of our control if it's a Next.js limitation

    • @lukassmida4885
      @lukassmida4885 10 месяцев назад

      @@colbyfayock It's issue with server actions, have you tried to upload files that use characters from Czech or polish language set in their filename? You could try naming the file "český-přístav-žvaní.jpg" or something like that and see if the character encoding of the name is broken when sent and logged from server action receiving the FormData. It's surely not a problem with your Cloudinary :)

    • @colbyfayock
      @colbyfayock 10 месяцев назад +1

      @@lukassmida4885ah okay, yeah i see the file name in the File instance, bummer. im not really sure of how to better set that up, but might be worth an Issue on the Next.js GitHub? could at least see if they'd give an official recommendation if not a consideration on how to improve it in the library itself

  • @danipuntocom
    @danipuntocom 10 месяцев назад

    Hi Colby! Thanks for your awesome videos!
    I''m trying to combine server actions with react-dropzone (btw thank you for your explanation here! ruclips.net/video/8uChP5ivQ1Q/видео.html).
    Any idea on how can I remove files from the file array?
    I've managed to remove the previews, but the input file array stays intact.
    When I submit the form, the original file list is sent to the server action.
    Is there any way to send a modified file list through the server action?
    Thank you and keep it up!!

    • @colbyfayock
      @colbyfayock 10 месяцев назад

      hm, good question, do you happen to have example code anywhere with what you've put together so far? my understanding is you can't really mutate data between the form and the action, aside from passing in additional arguments: nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-additional-arguments
      you may be able to mutate the inputs managed on the page when you detect they've changed, but that could be a bit hacky
      maybe a good question would be, what kinds of files are you trying to remove? i wonder if it would be more appropriate to use React Dropzone restrictions? whether using existing options or their custom validation? react-dropzone.js.org/#section-custom-validation

    • @danipuntocom
      @danipuntocom 10 месяцев назад

      @@colbyfayockThank you Colby! I replied to you but somehow my comments get deleted! Maybe I'm not allowed to share github links?

    • @colbyfayock
      @colbyfayock 10 месяцев назад

      @@danipuntocom yeah it likely got filtered by RUclips from sharing a link :( do you have Twitter to DM me or Discord where you can join the Cloudinary server and share with me there? discord.gg/cloudinary

    • @danipuntocom
      @danipuntocom 10 месяцев назад

      @@colbyfayockThank you for the invite! I've just posted the question on Discord.