upload image using multipart in flutter - image

Question

i want to upload a image which has come from signature pad which is in the form of unit8list and i want to upload that image using multipart in flutter.
my signature pad code is:-
import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_app/Screens/next.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:signature/signature.dart';
class signature_pad extends StatefulWidget {
#override
_signature_padState createState() => _signature_padState();
}
class _signature_padState extends State<signature_pad> {
var file;
String bytes2;
GlobalKey _globalKey = GlobalKey();
final SignatureController _controller = SignatureController(
penStrokeWidth: 5,
penColor: Colors.black,
exportBackgroundColor: Colors.white,
);
setsignePref(var sign) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
setState(() {
sharedPreferences.setString("sign", sign);
});
}
#override
void initState() {
super.initState();
_controller.addListener(() => print('Value changed'));
}
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Builder(
builder: (BuildContext context) => Scaffold(
body: ListView(
children: <Widget>[ // SIGNATURE CANVAS
Signature(
controller: _controller,
height: MediaQuery.of(context).size.height/1.12,
backgroundColor: Colors.white,
),
//OK AND CLEAR BUTTONS
Container(
decoration: const BoxDecoration(color: Colors.black),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
//SHOW EXPORTED IMAGE IN NEW ROUTE
IconButton(
icon: const Icon(Icons.check),
color: Colors.blue,
onPressed: () async {
if (_controller.isNotEmpty) {
final Uint8List data = await _controller.toPngBytes();
await Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: [
Center(
child: Container(
color: Colors.grey[300],
child: Image.memory(data),
),
),
Padding(
padding: const EdgeInsets.all(20),
child: new RaisedButton(
onPressed: () {
Navigator.push(context, MaterialPageRoute(builder: (context)=> next(image : data)));
},
child: new Text('Submit'),
),
), ],
),
);
},
),
);
}
},
),
//CLEAR CANVAS
IconButton(
icon: const Icon(Icons.clear),
color: Colors.blue,
onPressed: () {
setState(() => _controller.clear());
},
),
],
),
),
],
),
),
),
);
}
}
and my upload page is:-
import 'dart:convert';
import 'dart:io';
import 'dart:typed_data';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/Screens/navidrawer.dart';
import 'package:flutter_app/Screens/signature_pad.dart';
import 'package:flutter_app/Url.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:image_picker/image_picker.dart';
import 'package:path_provider/path_provider.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
class next extends StatefulWidget {
final String CompanyCode;
final Uint8List image;
final String docketno;
next({Key key,this.CompanyCode,this.image,this.docketno}) : super(key: key);
#override
_nextState createState() => _nextState();
}
class _nextState extends State<next> {
List<OriginModel> OriginModelList = [];
String selectedOrigin;
// final networkHandler = NetworkHandler();
bool circular = false;
final _globalkey = GlobalKey<FormState>();
final ImagePicker _picker = ImagePicker();
PickedFile _imageFile;
bool _obscuredText = true;
var okData;
var user_id;
var responseResult;
var loading = false;
var count = 0;
var myData;
final _formKey = GlobalKey<FormState>();
var bytes;
Future<String> getUserIdPref() async{
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
setState(() {
user_id = sharedPreferences.getString("user_id");
});
return user_id;
}
void UploadImage() async {
var request = http.MultipartRequest('POST', Uri.parse(URLs.image));
request.fields['CompanyCode']= "${widget.CompanyCode}";
request.fields['empCode'] = "$user_id";
request.fields['documentType']= "POD";
if (_imageFile != null && widget.image == null) {
print('AddingUserProfilePic ${_imageFile.path}and $user_id');
request.files
.add(await http.MultipartFile.fromPath('file', _imageFile.path));
}
else if(widget.image !=null && _imageFile == null){
bytes = (await rootBundle.load(Image.memory(widget.image).toString())).buffer.asUint8List();
request.files.add(http.MultipartFile.fromBytes('file', bytes));
}
var response = await request.send();
var responseBody = await http.Response.fromStream(response);
myData = json.decode(responseBody.body);
print('Status code is : ${response.statusCode} && ${response}');
if (response.statusCode == 200) {
Fluttertoast.showToast(msg: 'Uploaded Successfully');
Navigator.popUntil(context, (route) {
return count++ == 2;
});
} else {
Fluttertoast.showToast(msg: 'Upload Failed');
}
}
#override
void initState() {
super.initState();
this .getUserIdPref();
}
List<Widget> _buildForm(BuildContext context) {
var l = List<Widget>();
// Image img = Image.memory(widget.image);
Container container = Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
alignment: AlignmentDirectional.topCenter,
child:Form(
key: _formKey,
child: SingleChildScrollView(
child: Container(
child:Column(
children: [
SizedBox(height: MediaQuery.of(context).size.height/20 ),
Container(
margin: EdgeInsets.only(top: 15),
child:
_imageFile == null && widget.image == null ? CircleAvatar(
radius: 80.0,
backgroundImage: NetworkImage(
"https://img.freepik.com/free-vector/illustration-document-icon_53876-37007.jpg?size=626&ext=jpg&ga=GA1.2.1768032709.1573116529")
) :
_imageFile != null && widget.image == null ?
CircleAvatar(
radius: 80.0,
backgroundImage: FileImage(File(_imageFile.path)),)
: Container(
color: Colors.grey[300],
child: Image.memory(widget.image),
),
),
SizedBox(height: MediaQuery.of(context).size.height/30 ),
Column(
crossAxisAlignment : CrossAxisAlignment.start,
children: [
Container( margin: EdgeInsets.only(left: 10,right: 10),
child: Text(
'DOCUMENT TYPE'.toUpperCase(),
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold),
),
),
SizedBox(height: MediaQuery.of(context).size.height/40 ),
Container(margin: EdgeInsets.only(left: 10,right: 10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: Colors.cyan,
border: Border.all()),
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.all(10.0),
child: DropdownButtonHideUnderline(
child: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.cyan,
),
child: new DropdownButton<String>(
hint: new Text("Select Document Type",style: TextStyle(color: Colors.white) ,),
value: selectedOrigin,
isDense: true,
onChanged: (String newValue) {
setState(() {
selectedOrigin = newValue;
});
print(selectedOrigin);
},
items: OriginModelList.map((OriginModel map) {
return new DropdownMenuItem<String>(
value: map.id,
child: new Text(map.name,
style: new TextStyle(color: Colors.white)),
);
}
).toList(),
),
),
),
),
],
),
GestureDetector(
onTap: (){
Navigator.push(context, MaterialPageRoute(builder: (context)=> signature_pad()));
},
child: Container(
margin: EdgeInsets.only(left: 10,right: 10,top: 30),
width: MediaQuery.of(context).size.width,
height: 70,
color: Colors.cyan,
child: Row(
children: [
Container(
child: Image.asset(
"assets/register.png"
),
height: 60,
margin: EdgeInsets.only(left: 5),
),
Container(margin:EdgeInsets.only(left: 10),child: Text("Signature",style: TextStyle(color: Colors.white))),
],
),
),
),
GestureDetector(
onTap: (){
_showAlertDialog();
},
child: Container(
margin: EdgeInsets.only(left: 10,right: 10,top: 20),
width: MediaQuery.of(context).size.width,
height: 70,
color: Colors.cyan,
child: Row(
children: [
Container(
child: Image.asset(
"assets/upload.png"
),
height: 60,
margin: EdgeInsets.only(left: 5),
),
Container(margin:EdgeInsets.only(left: 10),child: Text("Image",style: TextStyle(color: Colors.white))),
],
),
),
),
SizedBox(height: MediaQuery.of(context).size.height/30 ),
Padding(
padding: const EdgeInsets.all(30.0),
child: GestureDetector(
onTap: (){
if (_formKey.currentState.validate()) {
setState(() {
loading = true;
});
UploadImage();
}
},
child: Container(
height: 55.0,
width: 600.0,
child: Text(
'SAVE',
style: TextStyle(
color: Colors.white,
letterSpacing: 0.2,
fontFamily: "Sans",
fontSize: 18.0,
fontWeight: FontWeight.w800),
),
alignment: FractionalOffset.center,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(color: Colors.black38, blurRadius: 15.0)
],
borderRadius: BorderRadius.circular(30.0),
gradient: LinearGradient(colors: <Color>[
Colors.cyan[300],
Colors.cyan[600],
])),
),
),
),
],
),
),
),
),
);
l.add(container);
if (loading) {
var modal = Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
Opacity(
opacity: 0.3,
child: const ModalBarrier(dismissible: false, color: Colors.grey),
),
Center(
child: new CircularProgressIndicator(),
),
],
),
);
l.add(modal);
}
return l;
}
#override
Widget build(BuildContext context) {
OriginModelList = [
OriginModel('1', "POD"),
OriginModel('2', "SIGNATURE"),
];
return Scaffold(
appBar: AppBar(
title: Text(
'OPERATIONS',
style: TextStyle(color: Colors.white, fontSize: 16),
),
actions: <Widget>[
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: Icon(
Icons.chat,
size: 26.0,
),
)
),
Padding(
padding: EdgeInsets.only(right: 20.0),
child: GestureDetector(
onTap: () {},
child: Icon(
Icons.call,
),
)
),
],
elevation: 0,
backgroundColor:Colors.cyan,
brightness: Brightness.light,
),
body: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: _buildForm(context),
),
drawer: NaviDrawer(),
);
}
void _showAlertDialog()
{
showDialog(
context: context,
barrierDismissible: true,
builder: (BuildContext context)
{
return AlertDialog(
title: new Text('Make your choice!'),
content: Container(
height: 80,
child: Column(
children: [
GestureDetector(
onTap: (){
takePhoto(ImageSource.camera);
},
child: Row(
children: [
Icon(Icons.camera),
Container(
margin: EdgeInsets.only(left: 5),
child: new Text('Camera')),
],
),
),
GestureDetector(
onTap: (){
takePhoto(ImageSource.gallery);
},
child: Container(
margin: EdgeInsets.only(top: 10),
child: Row(
children: [
Icon(Icons.image),
Container( margin: EdgeInsets.only(left: 5),
child: new Text('Gallery')),
],
),
),
),
],
),
),
);
}
);
}
void takePhoto(ImageSource source) async {
final pickedFile = await _picker.getImage(
source: source,
);
setState(() {
_imageFile = pickedFile;
});
}
}
class OriginModel {
String id;
String name;
#override
String toString() {
return '$id $name';
}
OriginModel(this.id, this.name);
}
and the image type like Image.memory(widget.image) is uploading because it is a iamge type and like widget.image is also not uploading because it is unit8list type.
so how can i upload that?
thank you in advance.....