Flutter: Uploading Image to Server
From Title, it’s pretty clear that you are going to learn about uploading Image to the Server in Flutter application.
Most of the people know that how we can upload the image to the Firebase Server, that’s quite easy we just pass the File and that’s it. Firebase has strong Plugin which does everything for us but What if we don’t use the Firebase.
I am here to talk about that case only, what if we don’t want firebase to be our server. We want to do everything on our own server.
Today you will learn about Image uploading on our own server.
For Local Developement, you can use
1. Node.js
2. PHP [ You can use Xampp which works on all major OS ]
To upload on your own server you need some knowledge of backend programming. I’ll show the implementation in node.js and PHP.
I am just dividing the complete process into 3 Step
1. Building Flutter UI
2. Writing Flutter Controller
3. Writing Server-Side Code
Step 1
Let’s write the code for Flutter UI.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
onPressed: _choose,
child: Text('Choose Image'),
),
SizedBox(width: 10.0),
RaisedButton(
onPressed: _upload,
child: Text('Upload Image'),
)
],
),
file == null
? Text('No Image Selected')
: Image.file(file)
],
),
);
}
}I am having a very simple UI and I’ll show the output at end of the post. This UI is having two buttons 1 for choosing Image and others for uploading and if there is any Image selected the I am also showing that image.
Step 2
Let’s write code for the controller and for the code of controller I am going to add some dependencies in your pubspec.yaml file
1. http: To send the request to the server we need http. It helps us in sending a request to the server.
2.image_picker: To send an image to the server first we need an image and this dependency will help us in picking an image
Here we will define two functions _upload and _choose.
1. _choose: This function will open your camera and will ask you to click an image.
2. _upload: This function will upload the selected image to the server.
First, let’s import some package which we will use in the function.
import 'dart:io';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';Let’s write the function
// My IPv4 : 192.168.43.171
final String phpEndPoint = 'http://192.168.43.171/phpAPI/image.php';
final String nodeEndPoint = 'http://192.168.43.171:3000/image';File file;
void _choose() async {
file = await ImagePicker.pickImage(source: ImageSource.camera);
// file = await ImagePicker.pickImage(source: ImageSource.gallery);
}
void _upload() {
if (file == null) return;
String base64Image = base64Encode(file.readAsBytesSync());
String fileName = file.path.split("/").last;
http.post(phpEndPoint, body: {
"image": base64Image,
"name": fileName,
}).then((res) {
print(res.statusCode);
}).catchError((err) {
print(err);
});
}
Here I had defined two endpoints, one for PHP and other for the node.js. You can also see that our EndPoint is little bit different than localhost this is because I am pointing to IPv4 address and you also need to do the same.
_choose is doing a very simple task, getting Image from user camera.
_upload is doing a little complex task, as we can’t send directly file to the server so instead of that, we are sending the string with the help of base64.
I am also getting the name of the file using simple logic and after that, we are sending that image as the string to our server.
This is how you can get the IPv4 address
localhost ( 127.0.0.1 ) will not be available on Android Emulator. localhost point to itself it means that when you are opening localhost on Android Emulator, it is pointing to itself ( Android Emulator ) and which is wrong.
To solve this issue you need your IPv4 address, which is your network address
Step 3
ServerSide Code
Node.js
var expess = require("express");
var bodyParser = require("body-parser");
var fs = require("fs");
var app = expess();
app.use(bodyParser.urlencoded({ extended: true, limit: "50mb" }));app.post("/image", function(req, res){
var name = req.body.name;
var img = req.body.image;
var realFile = Buffer.from(img,"base64"); fs.writeFile(name, realFile, function(err) {
if(err)
console.log(err);
});
res.send("OK");
});
app.listen(3000);
This is a basic program of express where we are receiving the data which was passed in the body and we are storing them in a variable. After that, I am Decoding this using Function Buffer.from( base64EncodeString, ”base64" )
Using File system I am just writing that image into our server.
php
<?php $image = $_POST['image'];
$name = $_POST['name'];
$realImage = base64_decode($image);
file_put_contents($name,$realImage);
echo "OK";?>
This is a more basic program of than node.js, where we are receiving the data which was passed in the body using method post and we are storing them in a variable. After that, I am Decoding this using Function
base64_decode( base64EncodedString ) .
This function is identical to calling fopen(), fwrite() and fclose() successively to write data to a file but I am not using that because using file_put_contents function I can write Image in one line of code.
Base64 is mostly used to store the image in the database. If you have a small image and you want to store that in the database or want to save as file the base64 approach is good for you.
There is one more approach of doing the same which is Multipart and that is used for the larger file. My next post may be about Multipart
