Flutter File Storage Management and Image Upload with Supabase Storage

if you want to learn how to upload images to your supervised storage Bucket from your flutter app then you come to the right place in this video we're gonna take a look at how we can set up supervised stores and upload images from your flutter app this video continues building on top of a previously built user management app so if you haven't checked that one out yet the link is in the description if you want to follow along you can click the bonus profile photo section now we previously built three pages account pays login page and splash page but we're mainly going to focus on the account page today and specifically there's going to be a new Wizard up there um to upload a new avatar for the user so we are going to actually create a new Wizard and we're just gonna place it inside a components folder and cut we're going to call it avatar.dart now we are going to start out by creating a standard sales wizard name it Avatar and let's actually start up by creating a size box we want this widget to be a 150 by 150 box so we're just gonna do that now it's going to have a child of container and inside that container we're just gonna have a text that says no image now this habitat wizard is going to be placed inside the account page and it will receive some parameters from the account page so let's set up those parameters the first one is a image URL and the second one is on upload method image URL will contain the URL the image if it exists and unupload is a callback function that will call within this widget when we upload the image now we're going to use eternity operator to conditionally display this no image Wizard and when we actually do have an image URL we'll just display a network image we can also set the fit on the network image to make it look nicer and then let's wrap this entire thing in the column so that we can have a button just place right below it so we're gonna add the size box for some padding and then elevated button now we are going to write the entire upload logic inside this unpressed now in order to select images from the phone we are going to use the external library and we are going to use the image picker for that so let's add that in our pubspect.yaml file and run pubgat now there are also some additional configuration that we need to go through such as adding these in the info.plist file I'm going to skip through this step by your info.pls should look something like this and we're back to our flutter app now let me restart the debug session and while we do that let's start writing some code so let's look at some sample code I think we can copy and paste this part we can Auto Import the necessary packages and we're going to start up by converting the selected image into bytes away because that'll be the format that's used in the servers method that we're going to use today in case the user didn't select an image I'm just going to return the function now we can start calling some super based methods so our supervised start storage Dot from and we have to specify the bucket name but we haven't created any bucket yet so let's take care of that first just a quick overview of what we did before though inside our Super Bass dashboard we created a table named profiles we created this table by copying and pasting some SQL Snippets from the user management guide when we did that there were some Snippets at the bottom that I omitted because I said it was storage related it's probably time to go back to those Snippets so let's find them at the top of this guide we can find the SQL Snippets and at the very bottom of these Snippets are the storage related Snippets well let's take a deeper look at what these Snippets are doing the top one is inserting a row into the buckets table this is creating a bucket in Super Bass stores in the three statements following the insert statement is just creating rollable security policy to allow select insert and update for the created bucket instead of just copy and pasting these Snippets why don't we actually use the GUI to create the bucket and create the policies as well we're gonna go back to the Super Bass dashboard go to this toys menu and create a bucket named profiles and we are going to make this profiles bucket public because we want our profile images to be publicly available to everybody everything looks good let's hit save and a bucket is created now even for public buckets by default all uploads are denied so let's set some row level security policy to allow uploads let's create a policy from scratch give it a name we are going to make an insert policy for Target roles we want to Target authenticated because we want our users to be logged in when they upload files and the policy definition we are going to compare the text representation of the author uid with the first element in the path of our uploaded files so this means that every single authenticated users will have their own folder inside this profiles bucket and that folder name has the master user ID let's also create some additional policies we're going to give it a name for the allowed operations we're going to check update and we're also going to check select because otherwise we wouldn't be able to update the previously uploaded file now for the Target rules we're going to select authenticate it and we're going to have the same policy right there notice that I'm using a supervised defined function called storage.folder name this is a convenient function to get path name separated into arrays of text now we should be ready to go back to our app and complete the code so Superstars Dot from then profiles and then we want to specify the path that we want to upload the files to so-called upload binary and then for path it's going to be the user ID slash something and let's get the user ID up here which is going to call superbase.auth occurring user and we're just gonna say we know that users sign in so it's never null and Dot ID properly update the path in the upload binary method and we're just gonna say we are going to upload it on their slash profile and data is just going to be image bytes that we got up there and that's actually all we need to upload an image now once an upload is complete we have to call the on upload callback with the image URL so we have to get the image URL somehow and for that we can use get public URL we're gonna need damage path multiple times I'm just going to extract it as a single variable up here and we can call get public URL to get our image URL once we have the image URL we can just pass that to the own upload callback and I think it looks good I just forgot to give a gray background to this container so I'm just going to do that right now and I think we are ready to check how this widget works let's actually go back to the account page places Avatar was it and set up some necessary variables to get it going let's add a size box for padding and the Avatar was it now let's just skip the image URL available but we can create the on upload callback it's going to take an image URL and then for now we're gonna have a empty method now for image URL we can just create a new variable up here we can just take this variable and pass it to the Avatar widget and on the on upload callback we can just set State and set the underscore image URL to the image URL I think it's time to test out the Avatar widget we can click the upload button allow access to photo library and I'm just going to select one of the default images at the bottom and it looks like image upload is working fine we can confirm by heading to the Super Bass dashboard hit reload and we see the image right there it seems like though the mine type didn't go through so let's fix this let's go back to our flutter code and we're going to utilize the file options to set the mine type of DMS file so let's hit the file options in file options contains three properties the one that we're interested in is the content type and upset let's actually set up 32 first this allows us to upload the image or update them as if there's already a image at the same path we want our users to be able to update their image so we'll set it to two and for the content type we're just going to hard code it with image slash and then we're just gonna get the extension of the image this is a quick and dirty way there are actually more proper way of getting the mine type but we just want to get something quick and dirty here so I'm just gonna take the image extension by creating aims text set extension variable and get the a first element after the dot pretty much and also make it lowercase now that we have the image extension we can just add that right here and set the proper mind type and this error is coming because the file option is set to cons so I can just remove that and I think we are set let's try it out again I'm just gonna hit refresh just in case click the upload button and I'm just going to choose the leaf image at the bottom here and the upload is completely except where did the leaf go let's check out Subaru stores and what we have and it seems like we do have the leaf image in the stores but we are not seeing that on the client side all right it's got to be the cash cash is great because it saves the user from extra bandwidth but in this case we want to update them as as soon as the user uploads a new image we are going to dynamically change image URL by appending a random timestamp query parameters onto the image URL we're going to use the url.pause Constructor and use the replace to dynamically change the create parameters with key of T and then value is going to be the current timestamp in milliseconds the T doesn't have to be T necessary doesn't really have any meaning it can be anything and then we're just gonna uh convert that into string and reassign it to the image URL again now that we have a dynamic URL Let's test it out let me upload this image and yep it is working just fine finally let's fix the problem where the Avatar URL is not persisted on the users database so upon on upload we are going to update the user's profile and the profile actually has a column called Avatar URL so we're just going to pass the image URL is the Avatar URL and now the user profile image is persisted on the user's database make sure to set the EQ filter to Target only this user's profile when we update the profile information and we also can get this Avatar URL when we initially load the data from database so we're just going to add one row here saying image URL equals data of key of Avatar URL and just like that our user image is persisted so let's try to re-upload a image one last time I'm just gonna hit this one and as we refresh the app the image is persisted and we can confirm that in our storage the profile image upon refreshing is the proper one and that is how you can upload images from your flutter app thanks for watching and I'll see you later with more fluttering Super Bass content

Channel: Supabase

Views: 9,389

Keywords:

Id: SZ09mPSNu4k

Length: 14min 29sec (869 seconds)

Published: Tue Aug 29 2023