Uploadable User Profile Picture - Uploading Images To Supabase in Flutterflow

Welcome. In this video you learn how to implement an uploadable user profile image page in Flutterflow, a no code software running on Flutterflow with a Supabase database. Learning to create mobile apps does not need to be hard nor stressful. It can be fast and simple with Flutterflow.
Uploading an image to Supabase through Flutterflow in your mobile app has never been easier with Flutterflow and Supabase. Here, I will teach you the easiest way to do so. This is an easy-to-follow, completely beginner friendly tutorial and walkthrough on how to upload an image to Supabase storage and retrieve images from the storage. I will also show how to allow users to update and upload their own profile pictures so that you can implement this function into your apps.
Add user customization with uploadable and editable user profile pictures to your mobile apps in minutes and bring your mobile app to the next level, one step closer to production. Easiest no code method to implement user authentication in FlutterFlow and Supabase.
#flutterflow #mobileapp #mobileappdev #supabase #profile #profilepictures #uploadphoto #upload #nocode #nocodedevelopment #beginners

[@togugram]

How to update bucket image when changing or updating profile image? Is there a way to delete old images to avoid accumulation of data to storage?

[@just_xolotl]

Yup there is definitely a way to do so but it requires custom code

[@TwinCityShredder]

Legend! Thank you!

[@just_xolotl]

Thanks!

[@NGStudios-w6y]

Videos Top, thanks

[@kulumbapaul3065]

Top video, thanks!

[@just_xolotl]

Thanks! ☺️

[@DinoProjects-o9g]

Hi! Thank you so much for this tutorial. But when i click save changes without changing the profile pic, but changing other profile info, the profile pic is updating itself as NULL. Can you please suggest any help?

[@just_xolotl]

Yup. The problem is that I forgot to save the profile pic in a page state variable then updating the supabase row with that page state variable instead so that it won’t be null. That’s an oversight on my part.

[@DinoProjects-o9g]

@@just_xolotl thank you for replying. But can you explain this in detail if you don't mind?

[@just_xolotl]

@@DinoProjects-o9g you can dm me on insta/facebook and i can explain more in detail there!

[@DinoProjects-o9g]

@@just_xolotl sure

[@rujhanjain725]

hey.. thanks for your help. But I am still facing an issue... When I'm pasting an image link copied manually from the bucket in the row of a user its displaying the image correctly but when I'm storing the link from uploaded file url of widget state its storing the image in the bucket and storing the link in the row but that link is not working in the app, its showing object event even though the link stored in the row is correct like yours. Whereas the entire link with tokens and timestamp, that link is working. But I cannot use that link automatically in the app for users. Can we connect somewhere and could you help?

[@just_xolotl]

Yup you can reach me on instagram @just_xolotl . Feel free to ask any questions! 😁

[@MounirNYEF]

I tried to upload a webp file in my flutterflow application to supabase storage it told me: "Invalid file format: image/webp". However when I try: - Upload the webp image in the flutterflow or supabase console it works. - Upload other formats like jpeg, png it works - Upload other webp files it doesn't work. - Display these webp images in an image editing application: it works Why?

[@just_xolotl]

Hi it’s because FF’s upload media action does not support webp files. You can use the upload file action instead. Please refer to this for more info: community.flutterflow.io/database-and-apis/post/firebase-invalid-file-format-image-webp-4rOkbgWmLYD2B2l

[@MounirNYEF]

@@just_xolotl Thanks

[@ApoloXBRZz]

very good video, thanks

[@just_xolotl]

Glad it helped 😁

[@onedayapp3534]

But when i click on upload image i should only load id locally nad show it on the image preview, then when i click on save changes is when i want to upload to supabase, otherwise users will be constantly uploading photos and could make a mess

[@just_xolotl]

Yup that’s a better way to do it.

[@onedayapp3534]

@@just_xolotl do you know how to delete the old picture from the database when the user uploads a new one?

[@just_xolotl]

That should be possible but requires some custom code and renaming of the saved files

[@starseedsdimension4093]

Hi, Joel. I have an API call that returns a image in base64. I use a custom function to decode it to a FFUploadedFile, which can be displayed properly. But I can’t upload this media/file to Supabase with the Upload utility. I even tried to set a page state variable as an uploaded file and pass the FFUploadedFile to the variable first, but I still couldn’t upload.

[@just_xolotl]

I would you mind sending me some pictures of your custom code + errors? Maybe on instagram? @just_xolotl Thanks

[@starseedsdimension4093]

@@just_xolotl Hi, Joel! Thanks for replying! I solved the problem! The thing is that for Flutterflow, it would be better to force the extension directly to png when decoding an image base64; otherwise the extension can be long and cause issues for Supabase Storage!

[@just_xolotl]

@@starseedsdimension4093 awesome! Glad you managed to find a solution! 😁

[@user-fk6kt7to5u]

and... Custom Action code for deleting storaged images in a supabase bucket. // Automatic FlutterFlow imports import '/backend/schema/structs/index.dart'; import '/backend/supabase/supabase.dart'; import '/actions/actions.dart' as action_blocks; import '/flutter_flow/flutter_flow_theme.dart'; import '/flutter_flow/flutter_flow_util.dart'; import '/custom_code/actions/index.dart'; // Imports other custom actions import '/flutter_flow/custom_functions.dart'; // Imports custom functions import 'package:flutter/material.dart'; // Begin custom action code // DO NOT REMOVE OR MODIFY THE CODE ABOVE! import 'package:supabase/supabase.dart'; final supabase = SupabaseClient('YOUR_API_URL','YOUR_API_KEY'); Future deleteImageFromBucket(String? imageUrl) async { if (imageUrl == null) { print('URL de imagen no proporcionada'); return; // Salir de la función si la URL de la imagen es nula } try { // Extraer el nombre del archivo de la URL final List urlParts = imageUrl.split('/'); final String imageName = urlParts.last; final response = await supabase.storage.from('YOUR_BUCKET_NAME').remove( ['YOUR_BUCKET_FOLDER/$imageName']); // Especificar la ruta completa de la imagen if (response.isEmpty) { print('Imagen borrada con éxito'); // Realizar cualquier otra acción después de eliminar la imagen } else { print('Error al borrar imagen'); // Manejar el error según sea necesario } } catch (e) { print('Error: $e'); // Manejar el error según sea necesario } } Replace your YOUR_API_URL and YOUR_API_KEY in code. Replace YOUR_BUCKET_NAME and YOUR_BUCKET_FOLDER in code. Pass imageUrl as imagePath parameter. Enjoy !!! Note: I assume it will work for any type of file stored in a bucket but I have only tested it with image type files.

[@itsxing1]

Is there any way to add an option to remove the current photo and show a default constant without the use of custom code?

[@just_xolotl]

Yup there is! You could create an app state variable for the profile image path (eg profileImagePath). Then add a button to set the profileImagePath to a default image path. Then you would set the image path property of your image to the profileImagePath variable. Hope this helps! If you still have problems feel free to dm me on instagram @just_xolotl

[@nasif3089]

Thanks for this, really useful. Could you create a tutorial on drop downs and supabase pls? how do I create a dropdown that references a table called 'disciplines' that has the following values: 'ux design', 'ui design'. it has a reference to another table called 'job profiles' which has a foreign key field called 'discipline_id'. I need to add values from the disciplines table that's in the dropdown and insert into the second table in the disciplines column.

[@just_xolotl]

Hi! Thanks for the question! To understand your situation better, do you mind sending me pictures of your tables on instagram? My handle is @just_xolotl . I’ll try my best to help you!

[@nasif3089]

Thanks! @@just_xolotl