Flutter : Multipart File request not working - api

I want to upload image by multipart File request. With using this code When I pass two image files then it's working fine. But when I want to pass one image file and another is null then it's not working.
where is the problem? How can I solve this ?
Here is my code -
Future<Map<String, dynamic>> updateprofile(
UpdateProfileInfo updateProfileInfo,
File imageFile,
File signatureFile) async {
String url = "$baseAPIUrl/update-profile-info";
String _token = await SavedData().loadToken();
String authorization = "Bearer $_token";
final headers = {
'Content-Type': 'application/json',
'Accept': 'application/json',
"Authorization": authorization
};
var request = http.MultipartRequest("POST", Uri.parse(url));
request.headers.addAll(headers);
request.fields.addAll(updateProfileInfo.toJson());
request.files
.add(await http.MultipartFile.fromPath('image', imageFile.path));
request.files.add(
await http.MultipartFile.fromPath('signature', signatureFile.path));
print(" Update Profile Json ${updateProfileInfo.toJson()}");
print("Request Fields ${request.fields}");
http.StreamedResponse response = await request.send();
String respStr = await response.stream.bytesToString();
dynamic respJson;
try {
respJson = jsonDecode(respStr);
} on FormatException catch (e) {
print(e.toString());
}
print('API ${response.statusCode}\n $respJson');
bool isSuccess = response.statusCode == 200;
var data = json.decode(respStr);
return {
'isSuccess': isSuccess,
"message": isSuccess ? data["success"]["message"] : null,
"name": isSuccess ? data["success"]["name"] : null,
"classgroup": isSuccess ? data["success"]["classgroup"] : null,
"image": isSuccess ? data["success"]["image"] : null,
"error": isSuccess ? null : data['error']['message'],
};
}
Here is postman Screenshot
1.
2. POSTMAN Generated code for Dart - http

when one of your file is null, you should avoid adding it to the request body.
if(imageFile != null){
request.files
.add(await http.MultipartFile.fromPath('image', imageFile.path));
}
if(signatureFile != null){
request.files.add(
await http.MultipartFile.fromPath('signature', signatureFile.path));
}
its because signatureFile.path is going to cause an error here

using dio package should work
Future<bool> updateImage(var pickedFile) async {
SharedPreferences sharedPreferences = await SharedPreferences.getInstance();` <br/>
var token = sharedPreferences.getString("token");
Dio dio = Dio();
final File file = File(pickedFile.path);
String fileName = file.path.split('/').last;
dio.options.headers["authorization"] = token;
FormData formData = FormData.fromMap({
"image": await MultipartFile.fromFile(file.path),
});
try {
var response = await dio.post(API.kBASE_URL, data: formData);
if (response.statusCode == 200) {
return true;
} else {
return false;
}
} catch (r) {
return false;
}
}

Related

how to get value from api with flutter

I have fake Api
https://fakemyapi.com/api/fake?id=220e0e14-8c78-45e9-9ef0-6ca516fde5be
and I want to print some data, I used this code
var headers = {
'Cookie': '__cfduid=d99061ead63f349023a08a33868eb7ef81619925287'
};
var request = http.Request('GET', Uri.parse('https://fakemyapi.com/api/fake?id=220e0e14-8c78-45e9-9ef0-6ca516fde5be'));
request.headers.addAll(headers);
http.StreamedResponse response = await request.send();
if (response.statusCode == 200) {
print(await response.stream.bytesToString());
}
else {
print(response.reasonPhrase);
}
and I get this response.
I/flutter (17790): {"first_ame":"Miguel","last_name":"Fay","photo":"https://s3.amazonaws.com/uifaces/faces/twitter/dhooyenga/128.jpg","email":"Keven.Cole#gmail.com","title":"Regional Functionality Developer","job_type":"Supervisor","telephone":["567.700.9452","1-701-720-0774 x9918","1-716-687-6317 x670"],"address":{"zip_code":"20909","street":"Myrtis Pines","city":"West Mekhifort","country":"Greece"},"friends":[{"first_name":"Carlie","last_name":"Kilback","email":"Erich_Emmerich90#gmail.com"},{"first_name":"Clarabelle","last_name":"Runolfsson","email":"Elise_Schroeder#gmail.com"}]}
so how to print the first name and zip code?
finally I got this solve by trying again and again,
var headers = {
'Cookie': '__cfduid=d99061ead63f349023a08a33868eb7ef81619925287'
};
var request = http.Request(
'GET',
Uri.parse(
'https://fakemyapi.com/api/fake?id=220e0e14-8c78-45e9-9ef0-6ca516fde5be'));
request.headers.addAll(headers);
http.StreamedResponse response = await request.send();
if (response.statusCode == 200) {
var item =
JsonDecoder().convert("${await response.stream.bytesToString()}");
print("item $item");
print("first_ame ${item['first_ame']}");
return item;
} else {
print(response.reasonPhrase);
}

call api on local server in flutter

this is my code to get data from api in flutter but I received statuscode: 400!!!
please help.
void getProductList(String action, List<Product> list) async {
if (list.length == 0) {
var url = "http://10.0.2.2:8000/api/product";
final http.Response response= await http.get(url);
print(response.statusCode);
if (response.statusCode == 200) {
List jsonResponse = convert.jsonDecode(response.body);
for (int i = 0; i < jsonResponse.length; i++) {
setState(() {
list.add(new Product(title: jsonResponse[i]['title'],
img_url: jsonResponse[i]['img_url'],
price: int.parse(jsonResponse[i]['price'])));
});
}
}
}
}
Update
try requesting another endpoint to see if the problem is in your local server, try this:
var url = "https://jsonplaceholder.typicode.com/todos/1";
final response= await http.get(url);
print(response.statusCode);
if it worked then the problem is server-side.
Old Answer
If it's giving you StatusCode 400 then it means that the server is working fine, so probably the problem is in the request itself, try adding headers to your request.
await http.get(url, headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
);
if this was not the issue, can you please add the error message!

Show message and download file after password verified - Razor pages

Before download the file, user need to enter the password. So I want to show the message if password is correct and in the same time start the download the file to the user.
public async Task<IActionResult> OnPostAsync()
{
var getFileUpload = await _context.FileUpload.FirstAsync(c => c.Guid == Guid && c.ExpiredOn.HasValue);
if (!ModelState.IsValid)
{
var message = string.Join(" | ", ModelState.Values
.SelectMany(v => v.Errors)
.Select(e => e.ErrorMessage));
return BadRequest(message);
}
if (DateTime.Today > getFileUpload.ExpiredOn.Value.AddDays(1))
{
Exception = "File already expired. Please ask administrator to share again";
return Page();
}
try
{
bool verified = BCrypt.Net.BCrypt.Verify(Password, getFileUpload.PasswordHash);
if (!verified)
{
Exception = "Password is wrong, please enter correct password";
return Page();
}
byte[] fileBytes = System.IO.File.ReadAllBytes(getFileUpload.Path);
var fileName = getFileUpload.FileName;
File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);
Success = true;
return Page();
}
catch
{
Exception = "Failed to download the data";
return Page();
}
}
I can see the message, but file cannot download.
But when I change return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName);, file able to download but cannot not alert the message.
Any idea how I can fix this?
You can verify the password with ajax first, and get the file after success. This is the pagemodel code.
public async Task<IActionResult> OnPostAsync()
{
//other code
if (true)
{
return new JsonResult("success");
}
else
{
return BadRequest();
}
}
public IActionResult OnGetFileAsync()
{
//get file from header
StringValues filename;
Request.Headers.TryGetValue("filename", out filename);
var stream = System.IO.File.OpenRead("file path");
string fileExt = Path.GetExtension("1.png");
var provider = new FileExtensionContentTypeProvider();
var memi = provider.Mappings[fileExt];
return File(stream, memi, Path.GetFileName("filename"));
}
Ajax in the page.
function verify() {
$.ajax({
url: '/?handler',
method: 'post',
headers: {
RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val()
},
success: function (data,status) {
fetch("/?handler=file", {
//Write the filename to be obtained into the http header
headers: {
'filename': data
}
}).then(res => res.blob().then(blob => {
var a = document.createElement('a');
var url = window.URL.createObjectURL(blob);
var filename = res.headers.get('content-disposition').split(';')[1].split('=')[1]
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
}));
//set successful message
},
error: function () {
console.log('e')
//set the error message in the page
}
})
}

How to setup a base URL and where do I declare it in flutter dio for api calls?

like how to fix boilerplate code in separate file and use it in ui pages.
I Need to declare this uri variable in separate file and access across over all pages:
static var uri = "https://xxx/xxx/web_api/public";
static BaseOptions options = BaseOptions(
baseUrl: uri,
responseType: ResponseType.plain,
connectTimeout: 30000,
receiveTimeout: 30000,
// ignore: missing_return
validateStatus: (code) {
if (code >= 200) {
return true;
}
}); static Dio dio = Dio(options);
In UI page i have to declare that uri variable and BaseOption variable in this future function:
Future<dynamic> _loginUser(String email, String password) async {
try {
Options options = Options(
headers: {"Content-Type": "application/json"},
);
Response response = await dio.post('/login',
data: {
"email": email,
"password": password,
"user_type": 2,
"status": 1
},
options: options);
if (response.statusCode == 200 || response.statusCode == 201) {
var responseJson = json.decode(response.data);
return responseJson;
} else if (response.statusCode == 401) {
throw Exception("Incorrect Email/Password");
} else
throw Exception('Authentication Error');
} on DioError catch (exception) {
if (exception == null ||
exception.toString().contains('SocketException')) {
throw Exception("Network Error");
} else if (exception.type == DioErrorType.RECEIVE_TIMEOUT ||
exception.type == DioErrorType.CONNECT_TIMEOUT) {
throw Exception(
"Could'nt connect, please ensure you have a stable network.");
} else {
return null;
}
}
}
You can create app_config.dart file and manage different environments like below:
const _baseUrl = "baseUrl";
enum Environment { dev, stage, prod }
Map<String, dynamic> _config;
void setEnvironment(Environment env) {
switch (env) {
case Environment.dev:
_config = devConstants;
break;
case Environment.stage:
_config = stageConstants;
break;
case Environment.prod:
_config = prodConstants;
break;
}
}
dynamic get apiBaseUrl {
return _config[_baseUrl];
}
Map<String, dynamic> devConstants = {
_baseUrl: "https://devapi.xyz.com/",
};
Map<String, dynamic> stageConstants = {
_baseUrl: "https://api.stage.com/",
};
Map<String, dynamic> prodConstants = {
_baseUrl: "https://api.production.com/",
};
Maybe instead of statically declaring your Dio object you could put it in a class, also put your loginUser function in there, and use Provider to obtain that object to call it where you need it.
class Api {
static var uri = "https://xxx/xxx/web_api/public";
static BaseOptions options = BaseOptions(
baseUrl: uri,
responseType: ResponseType.plain,
connectTimeout: 30000,
receiveTimeout: 30000,
// ignore: missing_return
validateStatus: (code) {
if (code >= 200) {
return true;
}
});
Dio dio = Dio(options);
Future<dynamic> loginUser(String email, String password) async {
try {
RequestOptions options = RequestOptions(
headers: {"Content-Type": "application/json"},
);
Response response = await dio.post('/login',
data: {
"email": email,
"password": password,
"user_type": 2,
"status": 1
},
options: options);
//the rest of your code here
}
https://pub.dev/packages/provider
Provider(
create: (_) => Api(),
child: ...
)
https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html
YourWidget(
child: Consumer<Api>(
builder: (context, api, child) {
return FutureBuilder<dynamic>(
future: api.loginUser('mail#mail.com', 'user_password')
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (snapshot.hasData) {
//show a widget based on snapshot.data
} else {
//show another widget
}
}
},
),
)

How to send data through API in Flutter?

When I try to login (email and password parameter) through APIs, data passes in row format, but I want to post data in form format.
Because of this problem, when I pass data it does not accept parameter value and shows null and gives error.
So, how can I solve this problem?
> This _loginUser() method In call on login button click.
_loginUser(context) async {
Map<String, dynamic> loginBodyResponse = {
"email": _emailController.text,
"password": _passswordController.text,
};
try {
setState(() {
_isLoading = true;
});
> APIs call
Map loginResponse = await NetworkHttp.postHttpMethod(
'${AppConstants.apiEndPoint}${AppConstants.loginApi}',
loginBodyResponse);
print('email:' + _emailController.text);
print('Password:' + _passswordController.text);
print(loginBodyResponse);
print('===================Login Response=========================');
print(loginResponse['body']);
print(loginResponse['body']['login']);
print("---------------------------");
if (loginResponse['body']['status'] != "success") {
setState(() {
_isLoading = false;
});
String errormessage = loginResponse['body']['msg'];
print("---------------------------");
print(errormessage);
ErrorDialog.showErrorDialog(context, errormessage, "Error");
} else {
print("Login Successfully");
print("============================================");
setState(() {
_isLoading = false;
});
NavigatorHelper.verifyOtpScreen(context);
}
} catch (e) {
setState(() {
_isLoading = false;
});
ErrorDialog.showErrorDialog(context, e.toString(), "Error");
print('error while login $e');
}
}
NetworkHttp class which I used in above mention code. when I try to login it shows null parameter in console
class NetworkHttp {
static Future<Map<String, String>> _getHeaders() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
final String token = prefs.getString('token');
if (token != null) {
return {
'Content-type': 'application/json',
'Accept': 'application/json',
'AccessToken': '$token',
};
} else {
return {
'Content-type': 'application/json',
'Accept': 'aapilcation/json',
};
}
}
static Future<Map<String, dynamic>> postHttpMethod(String url, body) async {
print('url');
print(url);
print('body');
print(body);
Map headers = await _getHeaders();
print('headers');
print(headers);
http.Response response = await http.post(
url,
headers: headers,
body: json.encode(body),
);
Map<String, dynamic> responseJson = {
'body': json.decode(response.body),
'headers': response.headers
};
return responseJson;
}
Just add headers with the json_data .
Future<login> requestLogin(String username, String password , String device_id) async {
Map<String, String> headers = {"Content-type": "application/x-www-form-urlencoded"};
var json_body = { 'email' : username , 'password': password ,'device_id': device_id};
if(token != null){
headers.addAll({"Authorization" : "Bearer "+token});
}
// make POST request
final response = await http.post(baseUrl+ "/login", headers: headers, body: json_body);
print(response.body);
if (response.statusCode == 200) {
// If server returns an OK response, parse the JSON.
// return Post.fromJson(json.decode(response.body));
print(response.body);
return login.fromJson(json.decode(response.body));
} else {
// If that response was not OK, throw an error.
throw Exception(response.body);
}
}
With your post request just pass your parameters like this
your post request should look something like below.
response = await http.post("your_api_url",
body:{"email" : "value",
"password" : "value"});