Flutterflow New File Upload functionality

kaan

Hi,

In the past Flutterflow did not allow files to be uploaded to other services beside Firebase.

This has changed as of last week (26/12/2022) but I couldn't figure out how to make it work.

I wonder if anyone managed to make it work?

If yes I would appriciate if you could post a tutorial or the steps you have taken

Greg Leininger

I'm in the same situation. Even though I set up Flutterflow to pass the file to Xano, I got a return error that the file parameter was missing when I called the API.

Ray Deck

So a thing to try: swap out the Xano URL for one that https://webhook.site gives you. You will be able to view what the actual outbound payload from FF is. That will give you more insight as to how to manage it from Xano. If it's not super obvious how to work with the data once you have it in hand, post it on this thread and we can look at it together!

Greg Leininger

Thanks Ray. I found out that FF found a bug on their end causing the issue and they are going to fix it in their next release. https://github.com/FlutterFlow/flutterflow-issues/issues/273#issuecomment-1368090072

kaan

I used make.com webhook and this is the data I received from Flutterflow.

I then managed to convert it using the Image Module and then upload to the Google Drive module in Make.

I wasn't able to make the integration work with Xano.

The post request from Flutterflow has to be multipart (not sure if makes a difference)

Ray Deck

Xano has support for multipart uploads, so I think there's hope! The key is getting better resolution on what exactly is getting sent. To do that, I would send the request from FF to https://webhook.site to evaluate the shape of the upload, and then configure a Xano endpoint with inputs that match that shape.

This is the kind of hard thing we look at in our State Change Pro office hours frequently! If you find yourself not making progress, would love to have you bring it as a hard problem. I'd be glad to issue you a complimentary ticket to a session so you can bring the issue and we can work it out. Our next two sessions are Monday 11p GMT (6pm EST) and Tuesday 12p GMT (7am EST)

kaan

@Ray Deck thank you for your reply.

I also used webhook.site and received the following data.

I will attend the pro office hours for sure. Thank you reminding me of this amazing service you provide on regular basis.

Ray Deck

Here's a ticket to join the pro OH: https://tickets.statechange.ai/ticket/2fb22ac6-12b8-49cd-9872-2d9b9202e20f

kaan

Thank you Ray!

Greg Leininger

@kaan I got the same result as you when using webhook.site. @Ray Deck When is your office hours?

Ray Deck

@Greg Leininger I run a private community, State Change Pro, to help people ship the hard parts of their nocode projects. Most of our clients use Xano with all sorts of sophisticated applications This kind of intersectional question is just what we work on together in the office hours. They alternate between 12p GMT and 11p GMT. (7a and 6p EST). Our next session is Monday 6pm EST and after that, Tuesday 7am! If you want to join to discuss your issue, here's a ticket for one complimentary session: https://tickets.statechange.ai/ticket/c436738c-e888-4935-85c0-97a63d28a4a7

Chris Coleman

This appears to have been due to an issue on Flutterflow's end; tested this setup and verified by @Greg Leininger to be working now with Xano. (thanks Greg!)

kaan

This is issue has been solved now.

@Ray Deck I emailed you back but I haven't heard back from you.

Guillem

Hi guys, I did as suggested by @Chris Coleman and @Greg Leininger but it doesn't work for me. I get this error:

I think maybe its because the type is "octet.stream" instead of jpg or similar?

What I dont get is that this image is comming directly from FF so you guys should also have this octet-stream type, dont you? 🤔

Chris Coleman

Hey, Guillem! What do your inputs look like on the Xano side? I just tested this again and it's still working for me (my type is octet-stream)

Guillem

Hey @Chris Coleman thank you for your answer! I configured it again on the FF side and it already works, it had something to do with the Authorization not being passed correctly!

Jeremymona

@Chris Coleman flutterflow seem to have removed the feature for file upload. Any ideas if theres a workaround?

The only reason i have firebase is for the file upload feature so would love to be able to crack this and stick to xano for everything!

Greg Leininger

@Jeremymona Click over to the Body tab (your screenshot shows you on the Variables tab) and select Multipart for the Body. Then add a parameter Name for your file, select From Variable for the value source, then select the file variable you created in the Variables tab (with type Uploaded File).

Jeremymona

Cheeky buggers just hid it on me!! Thanks Greg :)

Richard Chow

@Jeremymona @Greg Leininger I still stuck with this as I cant seems to add the variable during action. Any idea?

Greg Leininger

@Richard Chow If you could show a screenshot of where and exactly what issue you're having that will help people give you help.

Richard Chow

@Greg Leininger Thanks for the reply Greg. My problem as below, wonder where went wrong.

Greg Leininger

In your API Call, under Variables, change the image Type to Uploaded File. You have it set as an image path, but you are not getting an image path, you getting the actual file bytes. Xano will then give you the url to the image path. @Richard Chow

Richard Chow

I managed to change type to Uploaded File, which wasn't available until just now.

Is the "Body" multipart required or can I just remove it entirely.

Richard Chow

This is my XANO api, I did it correctly right?

Richard Chow

Tested with above amendment,
1. removed Body - multipart in Flutterflow
2. Changed variable to "uploaded file" type

yet still unable to store image to Xano.

Greg Leininger

Body must be Multipart in order to select Uploaded File in the Variable Type. Yes, that Xano api looks fine to me.

Richard Chow

Thanks @Greg Leininger , you are extremely helpful! It works.