Do Netlify Functions support FormData()?

Support
1

Hello.

I am building an HTML form in React that allows a user to upload an image. I would like to pass this image from React to a Netlify function that will then authenticate with a third party service and send the image on to be stored elsewhere.

The only viable method I can identify to pass the image from the React form to the Netlify function is using FormData(). Unless I’m missing something, I can’t find to get the image within the Netlify function. Am I missing something or would there be another recommended approach?

I realize Netlify has a Forms product, but am trying to do this with just Netlify Functions.

Thank you.

2

When using Netlify Forms, you can trigger serverless function calls when certain Netlify events happen, in this case a form submit, the submission-created event. Here’s a couple of useful resources:

You can also set the action of a form to a function like so:

<form action="/.netlify/functions/function_name" ></form>

Here’s some inspiration: https://functions-playground.netlify.app/

This comment might also help.

1 Like
3

Thanks for your reply Tom. Most of the resources you added point to using the Netlify Forms product (which I am not using) and none address how to capture an image submitted via a form within the function. You haven’t seen any resources on that last part have you?

4

One way to send binary data to a function would be to base64 encode the file and then sending the string as the payload. Then, in the function, you can decode the string back into the binary image file.

Let me know if that helps.