"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Get the resources you need to start building today
Microsoft chose Payload to tell the world about AI.
How to parse formData in custom endpoint?
Hi everyone,
I'm having some trouble getting form data through to my custom endpoint correctly. When I just pass JSON the data get's through to the api with no problem, however I can't do this with a file.
Any help would be greatly appreciated 🙂
I'm using Payload: 2.18.3
I'm not too familiar with express but I also tried a different express function format which then gives a file is too large error.
seems like an issue for payload team to address
not sure what the fix is
Ok 🙂 thank you
so have you changed default fileSize limits to something bigger that will fit your needs?
https://payloadcms.com/docs/upload/overview#payload-wide-upload-options
https://github.com/mscdex/busboy#apiHey
@390942669377110030Thanks for your reply. So as far as I am aware from the documentation you add the new limit to the payload config. The video file I am sending to the BE is 2.5 mb but I still get that error strangely.
try add this to your payload config, does it help?
express: { json: { limit: 100000000, }, },Ok let me give that a shot now 🙂
That would make sense actually as the one from the docs is for their native upload right?
Seems I still get the error though 😦
Do you think my endpoint config is set up correctly based on my screenshot?
Wondering if maybe the endpoint function isn't written or being used correctly or something
try add this to upload limits, maybe? I had similar problem but with lexical editor: I've added support for images and they are base64 encoded, which makes json body too huge to be parsed by default and payload did give me bunch of errors when I tried to save document
upload: { limits: { fieldSize: 1024 * 1024 * 1024, }, },Ok will try that also now 🙂
It's my first time really working with video so I'm not used to large files.
but 2.5mb should work 😅
dam that didn't work either.
yep, it's strange that upload fileSize limit didn't work
Do you think the function I am using is correct?
Wondering if it might be an issue with the way it's being called
hm, what are trying to achieve in your custom endpoint?
for now simply just to get the video file to the BE.
Why not just use regular payload client or rest api to upload file to media collection?
because in you express endpoint you bypass all the settings set to payload config and just use old regular express
Ah because I need to use a video hosting service similar to mux to upload the video to them as opposed to having it locally
Ah ok I see
can you revert back endpoint to the first variant(your first message images) and try again?
Yh sure. I think I went down this other route due to not knowing how to get the form data on BE 🙂
So with the first variant the data returns an empty object.
what req.files returns?
undefined
As I'm not using the default upload from payload but rather a simple input
Now it's just a guess what happens game 😄
I need to replicate your endpoint and upload component
happy to send you the code if you want for the two files?
if it's not sensitive you can, yes
Sure 2 seconds I'll zip them up
kk
That has the following:
1. payload config
2. mock js file for endpoints
3. video collection
4. plugin folder payload-plugin-api-video with upload component and endpoints
Main objective is to be able to upload videos to api.video with their node sdk. So that's why I went for a custom endpoint.
From trying previously with hooks and the regular payload upload logic, I wasn't able to get the file from the upload before the item was saved so I figured I had to make a custom upload button to access the file beforehand. But again maybe I wasn't checking the right hook and place from req.
I found an issue
@858366493972758528Do not append this header and everything should work fine, I guess
Ah thank you so much. I'll give that a shot now. Really appreciate you looking into it 🙏🏻
Amazing it worked!
So why is it that I have to use req.files to access the file and not req.body.file?
I think it's because payload uses body parser and busboy to parse formdata, so it makes your life easier for you
hahaha that's amazing. I couldn't work out for a while if I had to parse the data myself or not. I saw they used busboy but didn't fully understand the flow.
Need to find some resources to get more educated on the subject.
Thanks again though. Got me out of a 3 day head bang trying to work out what was wrong 😅
Are you working on any projects at the moment?
kind of, I'm trying to adapt lexical editor playground features to payload 2.0(will look into 3.0 when it is stable) using new payload lexical feature provider
It' junky and a bit buggy, but I need this features for my clients (tables, images)
Ah yh I was intrigued about using lexical as a page builder but I didn't have much luck at the time. It's a great looking thing. Just needs more docs ha
Yep, a bit hard to get into at first, but it has huge advantages over other editors:
1. Free, editor and its plugins are absolutely free
2. Customizable - you can do pretty much anything with it
I love that it has that notion feel to it. 🙂
Did you find the rendering of the lexical data part ok or difficult?
It's common to all the editors that output data in json format, you can use built-in html output(for custom nodes/features that are not supportrd by payload right now) you'll just have to provide your own
I was using html at first, but it was hard to deal with tables (regular old html tables have an issue of overflowing html body on X axis and to deal with it I had to use html parser on the backend to style them differently etc. , so I moved my code to use json and parse its structure on the backend, the bonus of this approach is that you can easily integrate any UI Libra out there (MUI, mantine, or components from shadcn etc.)
I can provide you with an example of how I parse json from lexical in my nextjs pages if you want
Sure sounds good 🙌🏻
it is stripped from lexical test, I plan to upload it to github later with full example on how to use lexical features to adapt or create new ones, how to parse its content on the backend or transform nodes to html, with some basic page
right now you'll have to just get the idea on how to parse lexical on the backend, e.g you have a page where you query you api, and you have a response with filled content which contains lexical nodes (btw when editor content contains too much text, tables, images and other nodes, your api response will be HUGE, so you should be prepared to that)
I use tailwind css and shadcn right now, example will use it too, but it will not be too much of a problem too adapt it to any other lib or just use vanilla css with classnames
Ah yh I also use tailwind and shadcn so all good 🙂 interesting I'll take a look 👌🏻
Star
Discord
online
Get dedicated engineering support directly from the Payload team.