Uploadable User Profile Picture - Uploading Images To Supabase in Flutterflow

[Music] hello and welcome to this easy and simple tutorial on how to upload images to superbase and reload them from superbase into your flat Flow app all right so in this video what we want to do is to allow the user to upload and edit their own profile picture we store in super base and then whenever the user Rel their profile they'll be able to see their new and updated profile picture so I have mainly two pages first is the profile page where it displays all of their information and also an update their profile page page so here in this update profile page they are able to change their profile picture and they can save the changes which will save the changes to a super base project over here all right so here I have have a very simple and bad bones super base table for user info which consists of columns of their name their profile picture which will be the link to the profile picture and their user ID for filtering purposes all right so let's get started for the whenever they want to upload an image we will try to click on this button and we'll open the upload image button action flow editor then we'll add an action and to allow the user to upload an image we'll just search for upload and under upload data there's this one there's this action to upload and save media which is what we want for the upload type we'll just say change it to super base since we are using a super base back end and now there's this uh values that we have to set which is the bucket name as well as the upload folder path so we have to go to our super base project and in this left hand side column we have to click on storage so this storage is where we are able to save files and media such as videos or even pictures for our in our super based project to be able to use in our flutter Flow app so we need to create a new bucket can name it anything you want name it user profiles and you have to set it to a public bucket so we save it now inside the user profiles bucket that we just created we'll create a folder called piic and then we save it and also for this we have to create some policies to allow our users to be able to insert uh insert pick new pictures and read the pictures so under the user profiles bucket that we just created we'll just click on new policy and we'll click on full customization we give it a policy name since we are not dealing with ro level security we'll just say full access to all users because that is what we want to do then we'll just click on everything select insert update and delete and for this we'll just save it as that we'll just leave it as that and then we'll review then we'll save the policy all right so now that the policies are created we can go back to our flut Flow app and under bucket name we can just type in the exact bucket name that we just created so in this case user profiles exactly like that it has to be note it has to be the exact name of the bucket and for the folder path we type in pic which is the folder that we created so just type in exactly the same piics for the media Source you can choose what whether you want to allow the user to get the picture from either the camera or the gallery or you can even choose just the camera or just Gallery we just leave it as either camera gallery for now you can also set some of these you can allow for video you can resize the image and you can even uh specify the image quality that you want and there are also many other options but we'll just leave it as now for now we just pick the simplest one so that's basic how you upload the media and then now if we want the up newly uploaded image to reflect in this image over here what we do is you just click on the image scroll down to the image path right now I've set it to a global property which I've defined a global constant which I've defined earlier which is just this uh now image now user image so we just moove this and if you want it to display the uploaded image all you have to do is go to widget State and you see there's this uploaded file URL so just click on [Music] that all right so that's basically it will Now display it over here and one last thing that we want to do is we want to save this uploaded file uploaded image file URL into our super base table in our user info we want to save it over here in the profile pick so that we can retrieve it whenever we want so to do that we go under save changes and we add an action which is to update our super base row and the table is user info and we want the matching rows you want to filter by our user ID is when our the user ID is equal to our authenticated users [Music] ID and then we want to set some fields we want to set the new image we want to set the new profile pick to our newly uploaded image path which is under widget State and uploaded file URL all right so that's basically it and now when we upload an image it should reflect the new uploaded image should reflect here and when we press save changes it should uh update the rle in our user info table over here okay let's try and test it out right now all right so tesma has just loaded up and let's test the edit profile functionality now all right so as you can see since there we didn't specify any image this uh image over here is an error image so when me try to upload an image you can see you can try to choose from the [Music] gallery and then it'll open the gallery and let's just choose this image right [Music] here and voila you can see that our profile picture has successfully been updated over here so we can click save changes and now we can go back to our super base and we can see that the profile pick has the link to the profile pick has been saved over here you can click check our storage as well and we can see if the file has been saved here can click on pick and you can see that indeed has been saved here so that's all successful then you can click back um but there's a problem you see this has not been updated why is that that is is because if you go to this one you can see that it's still the global constant of the empty image path so we have to change this as well we have to change this to our user info row and we have to change it to our profile pick so you can click confirm and now if we H reload our test mode it should update properly and you can see when we hot reloaded our test mode the image our profile picture now has been changed to the one that we changed it to just now now let's try one more thing what if we try to edit our profile again you can see that this one still gives us the error image and that is because when we update our profile and we see this image sorry when we see this image when we click on this image then we go to this path what we are assigning to this image is the uploaded file URL but when we first go into our update profile page there is no uploaded file and it gives this uh now image error so what we can do is we can create a page State variable so for example if is uploaded if image if New Image is uploaded is false that means if there's no new image uploaded then we can set it as this default Global constant uh image path if not if there is a new image uploaded then we can just set it as the uploaded file URL the new image so to do that is very simple we just go to the page and under local page State variables we can add a field so we can say is New Image uploaded we can set the type as a Bo and the initial value can be a false so now we can go to the image and instead of just the uploaded file URL we'll remove this for now and then we want to make a conditional value so we can set if and then page state is New Image uploaded so if the new image is uploaded then we can set it as the uploaded file URL else if there's no new image upload we can just set it as a default variable which I have already defined as a constant as empty image path so we can just confirm that and also when we upload the image we have to change the page State variable we have to go to this upload image button and we have to add one more action after uploading the media which is to set the state variable update page State variable set the new is New Image uploaded to true so set the value to true and we also rebuild the current page all right so that's basically it everything should be working good now we can do one last part reload and we can test out our newly uh newly fixed update profile picture function it in flut flow in super base all right so it just reloaded we can try edit profile and you can see that it is no longer an error image and is Instead This default one actually we can actually change the initial image not to this default one but actually to our previous one our current one the one that the one we have before we upload another image so to do that is very simple click on the image instead of this empty image path we can remove this and then we can pass a page parameter of from the previous profile page of the current [Music] image and the current image will be whatever is inside this one so it'll be this our user info row profile pick so to do that is to pass the page parameter we have to go to edit profile and when we navigate to we'll pass a parameter which is the current image and the current image parameter will be from the user info Ru and it will be the profile pick over here which is our current profile pick so now we can try instant reloading one more time and we'll see if our profile picture updating functionality [Music] works all right so the current image is this Exel AO image can try edit profile and you can see that is the same Exel Auto image can try to upload a new image choose it from the gallery and let's just try this at picture icon wait for it to load and you can see that the image has been uploaded we can save changes then we can go back and you can see it's updated here also and if you reload and under the storage of super base if you reload you can see that the picture that we just uploaded was saved here as well all right so that's basically it on how to change and how to upload pictures into super base store it in the storage store it in store the URL the uploaded image URL into your table so that you can retrieve it again and display it in your flutter Flow app UI I hope this video has been informative and helpful to everyone and I hope to see you in the next video [Music] [Music] goodbye

Channel: just xolotl

Views: 431

Keywords:

Id: JL1hjidXsZI

Length: 14min 51sec (891 seconds)

Published: Thu Feb 29 2024