File Button > File Upload No Longer Works

App Building
1

The new file button provides the file as base64 data, which does not work when trying to upload to a rest endpoint via Form Data and selecting "file" for the body value type.

Your documentation still references the old file picker component that provides the correct file data object.
https://docs.retool.com/docs/apis#uploading-files

1 Like
2

The workaround seems to be to merge the value and files properties when using the new file upload/dropzone.

Assuming your file upload component is called "fileUpload", create a new transformer:

return {
  data: {{fileUpload.value[0]}},
  ...{{fileUpload.files[0]}}
}

Really, the files array should include the data property to make this just work out of the box.

1 Like
3

This is in the queue to be fixed!

2 Likes
4

thanks for the tips, fixed my issue

5

Thank you!!!!

6

Where/how can I create a new transformer? I am new to Retool and have been on/off talking to support for almost a week and still not going anywhere.

7

Hey jmc, you can create a new JS transformer in the query editor at the bottom of the page. In the same dropdown you would use to create any query type.


1 Like
8

any updates on this ticket? It was opened a while ago - would be great to have file components meet web standards.

9

Hey @andr3w unfortunately there are no updates at this time. I've updated the internal ticket to advocate for a permanent fix, but this ticket is still currently in the backlog. We can update this thread here when we have any additional information on its status.

10

It took me about 5-10 mins to build an upload app from scratch in React to get this done. On the other hand, i've been fiddling around in retool for a couple of hours and still can't get this to work because we don't expose the File object in the standard way you'd expect to attach to a FormData object. Is there some other way that i'm missing? Merging props doesn't seem to produce any better results

11

Hi @rhys-e Thanks for reaching out! Happy to help :blush:

What is the api that you're using? We've seen issues like this with certain apis - as discussed here and here.

Also, since you've already taken the time to build out a React solution, it might be worth trying to convert that to a custom React component inside of Retool