flutter upload multiple image , videos, files on server using api , jwt token

[Music] welcome to the Codex hello Let's uh today we're talking about how to upload the multiple images in a single request with the help of di so let's get started this is my application so I will explain it's about later that what is the working Office application but let's get started our main important thing is that the teaching how to upload the multiple videos Okay so this is my task details and in that purchase section I am going to be adding that multiple images upload using the library so you can see here there is I have a form so on that uh control text editing controller I have been declared for this fields which is uh you can see here okay so this is my some Style no need to be learn about that that is actually array where I storing the image paths okay which is picked by that image picker you have to declare that variable there's a must compulsory and this is form submission so I will explain about it later so let's get down and first thing I will show you that how it is working let me fill that form data I have been purchasing and something description about that and there is a amount of price or something okay so then that is a camera icon so what happened when someone is click on that camera icon so let's find okay that's my camera icon and when I click on it it will be called the function image picker okay what is inside this function so let's see there is a image speaker Library I have been copied from flutter Pub you can also get from there and I added I created that instance of that class you can see here and image peak images and provided a source as a camera so whenever someone click on it it will get the image into the file via your native camera no need to be additional camera input Implement in this application okay you can see this my camera is open I can capture the image and approve it and then it will show the Cropper for me actually I have an Implement another Library which can help me to crop the files you can see here a file is called not null then open my Cropper and that Cropper have some pretty decided ratios here you can see here and that will be a display here okay so let's cut there is a settings for the colors and other things and this is after cropping we adding that image array in that file path which is provided by Cropper okay I hope you understand if you could not get anything you can ask me in comment section so I'm adding capturing the another one image this is my monitor capture it okay it's done now let me Crop this file actually I have implemented a compressor and Cropper the both things in this so myself will use click let's come Zoom data and that will be easy to upload the file on the server with the within less data if you have entered close to slow internet then also it work so this is save button and it will be called the submit method foreign validation if anything error in this form there is I have been added the flutter form validation so it will show the error and this is all the form data there is no image data and I created that form date object and add it that is a product ID where is that okay this is vendor ID product name description that everything added here you can see here okay now what I did next you can see the for Loop where I am using the images in a file you saw that I already mentioned that that declared above so that come into the file and then form data form data dot files and all add into the map entry into the my form data into the map and the images don't forget this boxes if you forgot this there will be no multiple files it will be helpful to understand the HTML to server to get that it's a multiple array files so don't forget the packet and use the multi multi multi-part file dot form file and pass your file path here okay please provide the path here and uh if you don't know this is my token actually most of the API without token car Network also my API is secured by the token so I have captured that token from my station storage and this is My URL for the I'm heading into the header this is all the URL list so I make that a constant study class this is the authorization token I have added over there and data into the form data that form data this method is a post method if you are uploading anything you need to be postmitted don't use the get method and this is response if response is 2200 then it will be success and that and if the message sucks is equal to true then this message will be your uploaded successfully or if anything else another error will be shown in the rails hope you got everything now test this once this is exception actually uh first one is exception if anything around the server and the second word is Timeout if the internet is really slower then it will be automatically ended after 20 seconds submit the application this is save button so I'm going to click here and you can see the log here if it's successfully uploaded or not this is my server directory which I'm using the local server so let's save hooray you can got it you can see this you can see here the both files are uploaded successfully and even you can see the message into the console but just added successfully so this is a simple method you can use to upload the multiple files in your flutter project thanks for watching and also you can see here so my uploads also reflected in this section yeah thank you thanks for watching hit like and don't forget to subscribe

Channel: code x

Views: 7,717

Keywords: flutter upload image, flutter upload image to mysql, flutter tutorial, upload image flutter, flutter upload image to server, flutter upload image to rest api, upload image, how to upload image to mysql using flutter, how to upload image, multiple image upload in php mysql, flutter upload image to api, upload multiple image in database, flutter save image to mysql php, muliple upload image tutorial, flutter multiple image upload tutorial, flutter, flutter tutorial for beginners

Id: rbNVzd20a8E

Length: 7min 29sec (449 seconds)

Published: Sun Dec 25 2022