Uploadable User Profile Picture - Uploading Images To Supabase in Flutterflow

[@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

[@ComprehensiveSupervisor2]

Hi can you plz make a video on how to delete profile pic also from supabase using flutterflow, i mean if a user update his profile pic then older pic should be removed permanently and then upload new profile pic, in my case old pics are not getting removed and the new pic also stored in supabase bucket. so tell me how can remove older profile pic. thanks

[@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

[@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! 😁

[@rohailkhalid52]

Hi, what is we wanna delete a profile picture stored in supabase bucket by deleting user profile or deleting auth user row. when i delete a user row or profile from supabase its profile picture it still there in bucket.

[@rohailkhalid52]

hello can some one plz reply on this

[@TwinCityShredder]

Legend! Thank you!

[@just_xolotl]

Thanks!

[@ApoloXBRZz]

very good video, thanks

[@just_xolotl]

Glad it helped 😁

[@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! 😁

[@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

[@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

[@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

[@CloudingCamp]

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.