Upload Media Files To any API and any backend in FlutterFlow @FlutterFlow

In this FlutterFlow tutorial, we'll show you how to upload binary files using an API. Follow along with our step-by-step guide to learn how to upload any file to any backend that supports multiform data. We'll be using PocketBase for this demo, but you can apply the same principles to any backend that supports multiform data for file uploading.

First, we'll set up the UI to allow the user to preview the selected photo before uploading it. Then, we'll set up the API call to upload the image to our backend using multipart-form data. We'll also show you how to notify users with a Snackbar once the upload is complete.

Don't forget to like and subscribe to our channel for more FlutterFlow tutorials and tips!

Follow us on social media:

[billdonnelly]

At around 1:40, noting that "Uploaded File" is no longer an option for the variable type. It looks like it was replaced with image path, but it fails in the action editor if you try to assign the image file to that variable type

[angelicajoypanergo]

hi is this also helpful if i only want to create an attach file and submit that kind of feature in my app

[metehancetinkaya]

I have a FlutterFlow app that interacts with a Flask backend. The app sends a video file to the backend via a POST request, and the backend processes this video and returns a JSON object with two keys: predictions (an array) and summary (a string).

Here’s what I have done so far:

Set up the video upload functionality.
Configured the API call within FlutterFlow and the request is successful.
Added conditional actions to handle the API response based on success or failure.
My challenge is with the next steps after receiving a successful response:

I'm not sure how to extract and store the predictions and summary from the response.
I need to display this data in the app: show the summary as text and list the predictions.

[jejidyanjackson]

hey, thanks very much for your help, I have a question, is it possible to add dynamic api url ?!

i need To select API url from a variable, bcs i may need my vendors to pull products from their woocomrc api, pls help me this qstion

[normalYPersona]

What about json body? the API im using dont allow multipart

[skoowai]

hello, thanks for your video, i want for users to upload their photo and then pick that photo and transform it into image url variable and then execute the API call of GPT-4Vision, is it possible? the input of the user is image and the ouput is text from openAI GPT-4Vision text

[НешикІгор]

Hi, , thanks for this insightful video.
Do you have any idea how can i send uploaded file as base64 body?

[UnitedSystema]

HI, thanks for this insightful video, do you have any idea why in the "uploaded file" value on FlutterFlow, when we choose "uploaded local file (Bytes)" it asks for default value under it, in which we have tried all the value, nothing is accepted...

[ahmedjawad]

Thanks for the explination, how to upload the recorded audio? it stored in path variable, but where find it and how to save it?

[tattguy]

first! Tahnk you!
any thoughts on why mine is working perfectly but doesnt add the user in the user field thats a refference to the user field. any thoughts on how i can solve that?

[marianneketje]

Is it also possible to do this but from an uploaded file in firebase?

[centralviberecords]

Hello im creating an app my friend that is helping me is stuck trying to add profiles and avatar and sign in and sign out. And also trying to get people to upload there own video we don't know how to do that can you help us please in Flutterflow. Thanks Matthew