Multiple Image Upload using Flutter GetX & Laravel API || Flutter || GetX

hi my name is Amar in this video I will discuss how to select multiple images with the help of image picker plugin after that I will display all those selected images into grid View and once I click on this upload button then the selected images will be uploaded to server if I click on the speak image button then from here I will be able to select the images once I click on select the images will be displayed in this grid View and once I click on this upload button then these selected images will be uploaded to server with the help of learnable API this portion I will discuss today here I have created this project after creating the project in the pubspec.eml file I have taken this image pickle plugin correct now I will move to the home controller and here I will write the code first of all here I will create the instance of image picker final image speaker equals to image speaker now after creating the instance here I will create a list of text file and I will name it as images and what I will do is that I will make it nullable and I'll name it as images and I will initialize with with mt array correct now after that here I will create a list of string and I will give the name as list of image path equals to I will also initialize it with empty array and here I will declare a variable as selected file count equals to I will initialize it to 0 and I will make it reactive with the help of dot OBS correct now here I will create a method that is void select multiple image fine now here I will write images equals to a weight and since I am using a weight I need to make it a sink of it then I will use the image speaker instance which contains a method which is called as pick sorry pick multiple image correct now here I will check if images is not equals to null this means if the user is selecting the image then with what will happen and if the user is not selecting the image then what will happen now if the user is not selecting the image then what I will do is that I will give a message git dot snack bar and here I will give the title as fail in the message I will give no image selected then I will specify the snack position as snack position dot button and I will set the background color as colors.red and in the color text I will specify colors dot white so if the user is not selecting the image then this particular message will be displayed but if the user is selecting the image that is if images is not equals to null then here I will use a loop in this Loop here I use X5 let me name it as file in all the images will be selected in this images array sorry images list and I will look through it and after that I will add all the image path to the variable list image path which I have created here you can see this list image path here I have created which is of type list of string so all the path I will add to this variable and to do so here I will call the add method and in the add method here I will use file dot path correct now once the image has been selected after that what I need to do I need to upload the image to the server correct and to upload the image let me do here one more change once the image has been selected then what I will do is that in the selected file count dot value equals to here I will use list of image path dot length this means the number of image selected will be stored to this selected file count variable correct now here I will create a method void upload image now what this method will do this method will upload the image to the server fine now to upload the image to the server here what I have done inside the data folder I have created a folder provided provider and inside the provider folder I have created a file named as image upload provider.dot and this is the file correct and this is the laravel URL API URL which will upload the image to the server correct now here I will create the function to upload the image to the server correct so let me create it future of spring let me give the method name as upload image and what this method will take this method will take the list of all image path which has been selected in our application so it will contain list of string let me give it give its name as list and let me declare this method as async so this list of string will actually contain the list of all images path which has been selected by the user correct now I will use try catch and if there is any exception then I will return future Dot sorry return future dot error and here I will pass exception dot to a string and inside the try block here first of all I will create the instance of form data and let me give its name as form equals to form data and let me give here a empty map now here I will use a loop for string path in list so it will Traverse the list and whatever path we will get I will add all the path to this form Dot Fields dot add and here I will pass map entry in the key I will pass file of array because we are selecting multiple files correct and then I will pass multipart file now this multi-pot file will take file of the path and here I need to pass the file name in the file name will pass dollar off date time dot now Dot millisecond since a pouch and then I will use a DOT that is the current time in millisecond dot after that the file extension correct and to get the file extension here I will use dollar off path Dot plate sorry path dot split Dot dot last okay and after that let me put a semicolon here now here I will declare final response equals to await then I will use the post and in the post I need to pass the URL which I have written here so I will simply copy this and paste it here and in the body I will pass the form correct now here I will check if response dot status dot as error means in the response if we have any kind of error then what I will do is that I will simply return this response dot body and if the response is successful then in the else what I will do is that I will return my response dot body and here I will pass the result correct now why I am passing a result that portion I will discuss while I will create the layerable API actually from the layerable app API I am passing the response in this result that's why here I have written result correct now what I need to do is that this image provider which we have created that I need to use in home controller where inside the upload image method so inside the uploads emit method so in the upload image method what I will do is that I will check if selected file count dot value if it is greater than 0 this means if the user has selected any file then only the image will be applied uploaded otherwise in the else I need to give a message to the user so I will copy this I will paste it here and here I will give the message no image selected fine and in the if portion here first of all when the image will be uploaded I need to display a progress bar and to do that here I will use get dot dialog in the get dot dialog I will use Center widget in the center widget as a child I will use circular progress indicator okay so this is our get dot dialog this will generate and let me use a const here this will generate a circular progress indicator while the image is being uploaded and here I can use one more parameter that is foreign and let me make it as false correct now here I will use the class which I have created that is image upload provider image upload provider dot now I will call the upload image method now this upload image method will take all the image path so I will pass list image path dot then and in the value let me change it to response and here let me give curly braces let me put a semicolon and here if the image is selected sorry if the image is uploaded then I will close the dialog and after closing the dialog I will check if response equals to equals to success means from the server if it is getting success response then I will display the message that image has been uploaded so let me paste it here and here I will change the background color to Green and let me give the message as image uploaded correct and once the image has been successfully uploaded then what I will do the image which has been selected by the user I will make it clear by assigning empty array I will do this and the list image path I will also initialize it with empty array and in the selected file count dot value dot value I will again initialize it with list image path dot length so ultimately it will be initialized with a zero correct and here I need to use on error in the on error again I need to close the dialog so I will use get dot back and I will simply copy this and I will paste it here and I will change the message to something went wrong fine now let me move to home view in the home view you can see already these two buttons has been created that is Peak image and upload now whenever the speak image will be called then or whenever the peak image button will be clicked and whenever the peak image button will be clicked at that time what I need to do is that I need to call controller Dot select multiple image fine and whenever this elevated button upload will be called then here I need to call controller Dot upload image fine now after selecting the image I need to display these into grid View and to do that here I will use OBX widget sorry I will use here OBX widget and in the OBX widget here I will return expanded and in the expanded as a child I will take grid view dot Builder and in the grid delegate here I need to pass silver grid delegate with fixed cross access count correct and and here I will pass in the cross axis count I will pass the value as free and in the cross axis spacing I will pass the value as 16 and let me use the main axis spacing here also I will pass the value as 16. fine now in the item Builder it will take context and index now here I need to return image Dot file and here I will pass file of controller Dot list image path of index correct and let me put a semicolon here let me give the width of the image as 100 and let me specify the height as 100 and in the fit property sorry and in the fit property here I will use boxfit Dot cover correct and let me make it as const okay so our flutter part is complete let me run the project and till the project is running let me move to the layerable project here you can see this is the layerable project which I have created if I go to the api.php this is the root so whenever the image will be uploaded at that time in the app controller I will call this image upload function so if you can see here inside the app inside the HTTP inside the controllers I have created this file app controller correct and inside this app controller here I will create the function to upload the file and to do that let me write the code public function it is generating some error I will show it later on first of all let me write the code for this variable image upload it will take a request fine now here I will create a variable dollar files equals to dollar of request file and after that I will give the name here which I have passed from here if you remember here I have passed the name as file of array correct so here I need to give the same name so here I will pass file after that here I will use a for each Loop in the Forest Loop I will use dollar of files as dollar of file then because all the files will be stored here inside this dollar files I will Traverse through each of the file and each of the file will be uploaded to do that here I will use dollar of file then store as I will give the path where it should be stored it should be stored inside the public images folder which I have already created and after that here I will pass dollar off file here I need to give the file name so here I file give the file name as get file sorry get file original name correct and after that here I will return the response return response this file gate file original name will use the same name which we are passing from the flutter correct so return response ingestion now here it will take the array and if you remember in the flutter I have given the name as a result so here in the result I will pass success that's it okay now let me go to the flutter app and let me check it out where the error is generating let me run the project once again improper use of get X okay okay sorry here I have not passed the item count okay so here I need to pass item count in the item count I will pass controller Dot selected file count Dot value now let me run it once again now it is running perfectly now let me select the image let me select these images okay now let me click on this upload button okay so it is giving uh something went wrong error let me check the laravel code okay in the level code here this upload spelling is wrong this will be upload a is missing and here get file original name instead of this it will be it will be get client original name correct now let me click on this upload button once again now it is a displaying message image uploaded now if I go to the folder then you can see all the images has been uploaded and here in home controller while the image is being uploaded successfully it will not be filled it will be success okay this is how we can upload multiple images to a server by using the label API in flutter using get X I hope you have liked my video if you have liked my video please subscribe to my channel thank you so much for watching

Channel: Ripples Code

Views: 7,220

Keywords: flutter getx tutorial, getx tutorial, state management using getx, mastering getx, getx tutorial for beginners, getx tutorial step by step, route management getx, dependency management getx, what is getx, why to use getx, advantages of getx, multiple image upload flutter, multiple image upload using flutter getx, multiple image upload using flutter getx and laravel api, how to upload multiple image in flutter

Id: 8qV7KjWipC0

Length: 25min 6sec (1506 seconds)

Published: Thu Sep 29 2022