Flutter File Picker | Post File Through API Using DIO | XAMPP As An API Server

   

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

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/

-------------------------------

Step 1 : Import Dependencies in pubspec.yaml file. And in terminal run the command “flutter pub get”.

file_picker: any

http: any

dio: any

http_parser: ^4.0.1

-------------------------------

Step 2 : Add imports in main dart file.

import 'package:file_picker/file_picker.dart';

import 'package:dio/dio.dart';

import 'package:http_parser/http_parser.dart';

-------------------------------

Step 3 : On button pressed, replace the code with following. It may ask to create a function. Click it or you can manually add the following code in same class.

(){getHttp();}

-------------------------------

Step 4 : for getHttp function, add following code.

Note : Your apache’s ip-address may differ.

void getHttp() async {

FilePickerResult? result = await FilePicker.platform.pickFiles();

var path='';

var filename='';

if (result != null) {

PlatformFile file = result.files.first;

var path=file.path.toString();

var filename=file.name;

print(file.name);

print(file.bytes);

print(file.size);

print(file.extension);

print(file.path);

var formData = FormData.fromMap({

'name': '1',

'age': '2',

'fileToUpload' : await MultipartFile.fromFile(

path,

filename:filename,

contentType: new MediaType("image", "jpeg")

),

});

Response response = await Dio().post('http://<your-ipv4-address>/flutter_test/store_data_flutter.php', data: formData);

print(response.data.toString());

} else {

}

}

-------------------------------

Step 5 : Make sure to re-run the project. Otherwise the file-picker may not work.

Add the IPv4 address in DIO's post's path (<your-ipv4-address>).

-------------------------------

Step 6 : Enable XAMPP, start APACHE server. Create a folder "flutter_test" in HTDOCS folder. Create a php file there and paste the following code.

<?php

$request_body = $_POST;

if(isset($_FILES["fileToUpload"]))

{

$target_dir = "";//"uploads/";

$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);

move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file);

}

exit;

?>

-------------------------------

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.