File upload to server using REST - POST - Form Data

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: http://community.retool.com/t/uploading-files-fails-with-the-new-components/7106

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] } }}
4 Likes

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.

Thanks.

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) {
    console.error(error);
    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.

Thanks.

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.

2 Likes

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

oh my god this worked. was struggling for hours!

We're having the same issue, but your workaround doesn't seem to work. Is there a way to check what component version we're working with and revert it to the older one if needed?

Hi @Marcos_Rodriguez Only some components have downgrade paths, and I don't see one here. Can you provide screenshots of the component's state & the query?