Use Server Actions to Upload Files in Next.js with Cloudinary - Dev Hints
Vložit
- čas přidán 30. 10. 2023
- Upload files in a Next.js app to Cloudinary with Server Actions
We'll walk through using Server Actions to submit a file in a form, using FormData to capture the image file, and uploading the image buffer using the Cloudinary Node SDK upload stream API.
📝 Cloudinary Node SDK
cld.media/devhintsnextactions...
💾 Uploading Files to Cloudinary with Next.js Server Actions
github.com/cloudinary-communi...
Instructor: Colby Fayock (@colbyfayock)
--
Cloudinary helps developers build performant experiences for the web with powerful optimization and transformation APIs.
🚀 Get started with a free account!
cld.media/devhintsnextactions...
#cloudinary #devhints #nextjs #upload #serveractions #images #webdevelopment - Věda a technologie
Great video, just what I was looking for
awesome!! glad you found it helpful
Thank you. Exactly the video I was looking for.
💯
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?
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
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.
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
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?
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
- czcams.com/video/ULp6-UjQA3o/video.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:
- czcams.com/video/FlifTBr8pV8/video.html
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.
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
Nice! It would be useful to have multiple image (with restriction to jpg, png and etc.) upload with some nice drag and drop functionality :)
definitely agree, you can actually get that out of the box with the CldUploadWidget available with Next Cloudinary: czcams.com/video/ULp6-UjQA3o/video.html
hoping to get a video on creating your own dropzone and uploading with Cloudinary, but i don't have an ETA on that
@@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.
Works on Localhost but when pushed to vercel, don't work.
Indeed, I have the same issue. I get an error 405 Method not allowed in production on Vercel.
@@Sceppi Now I have the same problem, you still don't know how to solve it, it would help me.
same issue how to solve it
He also demonstrates in localhost 😂 this function is useless
How can I setup cloudinary config in a separate file, and import it whenever I need to use cloudinary?
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;
}
can we get the url for the uploaded image and store in a different database?
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.
What would be the correct way if I wanted to upload an array of images?
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: czcams.com/video/_bTX2L0jPzA/video.html
map over the array and upload
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
Why did you convert the image to a buffer and you didn't send it directly as a file ?
the SDK only accepts a string or an instance of Buffer or Uint8Array
there is also a next-cloudinary package isn t it ?..
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
Thank you @colbyfayock , looking forward to it, Cloudinary is amazingly usefull but the documentation is awfull..
@@user-he5uv6ij7e if you have any specific feedback on the docs im happy to pass it along
Does this work the videos too? I want to upload videos and images
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
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
@@daytatech-youtube great points!
Can you make a video with sharp?
thanks for the idea, did you have a specific use case in mind that wouldn't be handled with Cloudinary?
@@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
Its work perfectly in dev mode but in build it crash
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.
@@alonsvar hey there ive deployed and tested this example on Vercel: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload
hey there ive deployed and tested this example on Vercel: github.com/cloudinary-community/cloudinary-examples/tree/main/examples/nextjs-server-actions-upload
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
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
Files error
Error: Error: [object Object]
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
This DOES NOT WORK for utf-8 characters.
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
@@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.
@@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
@@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 :)
@@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
Hi Colby! Thanks for your awesome videos!
I''m trying to combine server actions with react-dropzone (btw thank you for your explanation here! czcams.com/video/8uChP5ivQ1Q/video.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!!
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
@@colbyfayockThank you Colby! I replied to you but somehow my comments get deleted! Maybe I'm not allowed to share github links?
@@danipuntocom yeah it likely got filtered by CZcams 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
@@colbyfayockThank you for the invite! I've just posted the question on Discord.