File upload to server using REST - POST - Form Data

I can upload file using postman like below but I can't upload using retool till now..

The first argument must be of type string or an instance of Buffer, ArrayBuffer, or Array or an Array-like Object. Received undefined

1 Like

Hi there! Would you mind sharing a screenshot of your current query in Retool?

@victoria i am facing same issue. screen shot attached

Thank you for that screenshot, Aditya! Would you also mind sharing a screenshot of your left panel showing file_upload.files[0]?

Hi @victoria PFA screen shot of left panel

Thank you for sharing that! So it looks like file_upload.files[0] is just file information. Could you try passing in file_upload.value[0]? That's a base64 string of the uploaded file!

Same issue here, this is only happening with your "upgraded" components, in the deprecated file upload component we had no issues, we tried both with .files[0] and .value[0]
But nothing seems to work, works perfectly via postman

Hey @davidl!

This is definitely a "bug"/feature that came with the new file component. We're currently speaking in this thread:

but for discoverability/anyone viewing this thread, the issue is that the metadata and base64 of the image are separated once uploaded. The current workaround is to use something like this to re-assemble the two:

{{ {...fileButton1.files[0], "data": fileButton1.value[0] } }}

Hey @victoria!

Will this work around continue to work after the bug fix or is this just a stop gap solution?

Ah, excellent question! Let me check with the engineers looking into this. Will get back to you once I hear back :+1:

1 Like

hello, I am facing the same error. how can I upload a photo with filedropzone? thanks.

Hi @alicem! Would you mind sharing a screenshot of your current setup?

hi, I did that from your reply. It was my fault at start Thanks :slight_smile:

Oh, awesome! Glad to hear it's working for you :blush::raised_hands:

Hi @victoria .

I am trying to send an image file via REST API as form-data. I tried your suggestion and the request was sent but the req.body was {} and req.files was undefined.

I am using File Dropbox to take the input. I have also tried using File Input but was of no use.

Below is a screenshot of the query.


Hi @agent515!

Thank you for sharing this! Are you getting any specific errors? And do you know exactly what content-type your endpoint expects? It may not be a File type for the image key. Have you tried passing in binary data? So basically just add_visual_dictionary_record_image.value[0]

Let me know!

@victoria Thanks for the quick response!

The endpoint expects "multipart/form-data" as the header. Here is a screenshot of the request being sent successfully (200 OK) on Postman.

"You must have to upload Dictionary Image" is the error message that is returned, when the request is sent. You can refer to the code snippet from the Backend (node.js) below.

export const createVisualDictionary = async (req: Request, res: Response) => {
  try {
    const { body } = req;
    const { keywords, description } = body;

    console.log("req.body",body, req.headers)
    console.log("files", req.files)

    const image = req.files;

    if (!image?.["image"])
      return errorResponse(res, "You must have to upload Dictionary Image");
 } catch (error: any) {
    return errorResponse(res, error.message);

And, yes, I have tried passing binary data (base64 directly). Gives the same error.

I hope this message gives enough context to you about the problem.


Thank you so much for sharing that! As the tiniest sanity check before we dig into other things, could you try putting a space between your double curlies and your single object curly?

{{ {...fileDropzone1.files[0], "data": fileDropzone1.value[0] } }}

instead of

{{{...fileDropzone1.files[0], "data": fileDropzone1.value[0] }}}

I'm not sure if this is fully related, but I do know Retool can heave unexpectedly with triple curlies.


And this is a REST query, not a GraphQL query, correct? I do know we don't support multipart requests for GraphQL queries.

See relevant community forum post here.

This worked for me, thanks! Also I didn't have to set the "Content-Type" header.

1 Like