Flutter File Picker | Post File To API Using DIO | XAMPP API Server | Android Studio | Quickstart

Note : Video speed was increased to make sure not to waste viewer's time.
-------------------------------
Flutter File Picker | Post File Through API Using DIO | XAMPP As An API Server
-------------------------------

Download Project:-
https://unpossiblepog.com/projects/FLUTTER+PHP/Add-File-Picker-And-Send-File-To-API

Blog Post:-
https://unpossiblepog.blogspot.com/2022/08/flutter-file-picker-post-file-through.html

Subscribe my Channel:-
http://www.youtube.com/user/SanketRooney?sub_confirmation=1

Facebook Page:-
https://www.facebook.com/UnpossibleNS

Twitter Account:-
https://twitter.com/UnpossiblePOG

Blog:-
https://unpossiblepog.blogspot.com/

Website:-
https://unpossiblepog.com/

Gaming Instagram:- (@unpog.gaming)
https://www.instagram.com/unpog.gaming/

-------------------------------
In previous tutorial, I made a video on how to post data to API where the API server is a local XAMPP server.

In this part, I shall show how to implement FILE-PICKER in flutter app and how we can send files to API in flutter application.

I shall make this video as simple and easy as possible.

I am referring points from blog which was made by me. So let’s get started.

I shall build the application from scratch.

From step 1, copy-paste the dependencies in pubspec.yaml file.

Paste it at the same level as flutter which is inside dependencies.

You can click on “pub get” link or simply type the command in terminal “flutter pub get”.

It will download dependencies into the project.

From step 2, copy-paste the import lines and paste it in main.dart file.

Let’s run the app. Wait for it to be displayed on mobile screen.

There will be a floating button, on it’s pressed event, paste the following code from step 3.

After saving, there will be an error, ignore that because we haven’t added any function yet.

The outermost curly bracket is the end bracket of class.

From step 4, copy the function code, and paste it just above the class’s end bracket.

From step 5, make sure that you rerun the application to make sure that FILE PICKER is properly implemented.

From step 6, create a folder called “flutter_test” in HTDOCS folder of xampp. Create a PHP file inside it. Give it a name as “store_data_flutter.php”.

For the IP address, open the command prompt, type “ipconfig” command. Use the IPv4 which is in my case is 192.168.56.1.

Copy-paste the code inside that PHP file. That code will help to store image in server.

Let’s test it.

There is a log info, and if you look inside the folder, the PDF file is stored.

Let’s try it again.

You will see the file appear.

So that is it.

You can download the whole project from the link given in the description.

Thanks for watching. Like, Share and Subscribe.