Flutter: http post upload an image (Futuer<file>) - http

I get an image by image picker and I am also displying it in future file.
The issue that I hava that i cant send it by URL.
the parameter
Future<File> _profliePicture;
The image picker:
_pickImageFrom(ImageSource imageSource) async {
setState(() {
_profliePicture = ImagePicker.pickImage(source: imageSource);
});
}
My url file sender:
upload(File imageFile) async {
print("starts to upload...");
var stream = new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
var length = await imageFile.length();
var uri = Uri.parse("URL");
var request = new http.MultipartRequest("POST", uri);
var multipartFile = new http.MultipartFile('file', stream, length,
filename: basename(imageFile.path));
//contentType: new MediaType('image', 'png'));
request.files.add(multipartFile);
var response = await request.send();
print(response.statusCode);
response.stream.transform(utf8.decoder).listen((value) {
print(value);
});
}

Related

Is there any way to save flutter_tts file to firebase storage?

I am working on a flutter project in which user is supposed to create some scripts and by typing them in text and then flutter_tts library is supposed to convert them to audio file which works fine for that time being but I want to save that file into firebase storage for later user. I have tried the following code but it just saves blank audio file in the firebase storage. Any kind of help will be appreciated.
The code I have tried is:
final FlutterTts _flutterTts = FlutterTts();
late var fileName;
/// creation of audio script
Future createAudioScript(
String name,
String script,
String firebasepath,
) async {
await _flutterTts.setLanguage("en-US");
await _flutterTts.setSpeechRate(1.0);
await _flutterTts.setVolume(1.0);
await _flutterTts.setPitch(1.0);
await _flutterTts.setVoice(
{"name": "en-us-x-tpf-local", "locale": "en-US"},
);
await _flutterTts.speak(script);
fileName = GetPlatform.isAndroid ? '$name.wav' : '$name.caf';
print('FileName: $fileName');
var directoryPath =
"${(await getApplicationDocumentsDirectory()).path}/audio/";
var directory = Directory(directoryPath);
if (!await directory.exists()) {
await directory.create();
print('[INFO] Created the directory');
}
var path =
"${(await getApplicationDocumentsDirectory()).path}/audio/$fileName";
print('[INFO] path: $path');
var file = File(path);
if (!await file.exists()) {
await file.create();
print('[INFO] Created the file');
}
await _flutterTts.synthesizeToFile(script, fileName).then((value) async {
if (value == 1) {
print('generated');
var file = File(
'/storage/emulated/0/Android/data/com.solution.thriving/files/$fileName',
);
print(file);
moveFile(file, path, '$firebasepath/$fileName').then((value) {
print('move file: $value');
_app.link.value = value;
print('link: ${_app.link.value}');
});
}
});
}
/// move file from temporary to local storage and save to firebase
Future<String> moveFile(
File sourceFile,
String newPath,
String firebasePath,
) async {
String audioLink = '';
print('moved');
await sourceFile.copy(newPath).then((value) async {
print('value: $value');
await appStorage.uploadAudio(value, fileName, firebasePath).then((audio) {
print(audio);
audioLink = audio;
return audioLink;
});
}).whenComplete(() async {
customToast(message: 'Audio has been generated successfully.');
});
return audioLink;
}
After spending whole day and with the help of a friend, I finally managed to figure out the issue which was being caused because I was using synthesizeToFile() and speak() functions at the same time, which I managed to resolved the issue by changing my code to the following code snippet.
final FlutterTts _flutterTts = FlutterTts();
late var fileName;
/// converting text to speech
Future createAudioScript(
String name,
String script,
String firebasepath,
) async {
await _flutterTts.setLanguage("en-US");
await _flutterTts.setSpeechRate(1.0);
await _flutterTts.setVolume(1.0);
await _flutterTts.setPitch(1.0);
await _flutterTts.setVoice(
{"name": "en-us-x-tpf-local", "locale": "en-US"},
);
if (GetPlatform.isIOS) _flutterTts.setSharedInstance(true);
// await _flutterTts.speak(script);
fileName = GetPlatform.isAndroid ? '$name.wav' : '$name.caf';
log('FileName: $fileName');
await _flutterTts.synthesizeToFile(script, fileName).then((value) async {
if (value == 1) {
log('Value $value');
log('generated');
}
});
final externalDirectory = await getExternalStorageDirectory();
var path = '${externalDirectory!.path}/$fileName';
log(path);
saveToFirebase(path, fileName, firebasPath: '$firebasepath/$name')
.then((value) => {log('Received Audio Link: $value')});
}
/// saving converted audio file to firebase
Future<String> saveToFirebase(String path, String name,
{required String firebasPath}) async {
final firebaseStorage = FirebaseStorage.instance;
SettableMetadata metadata = SettableMetadata(
contentType: 'audio/mpeg',
customMetadata: <String, String>{
'userid': _app.userid.value,
'name': _app.name.value,
'filename': name,
},
);
var snapshot = await firebaseStorage
.ref()
.child(firebasPath)
.putFile(File(path), metadata);
var downloadUrl = await snapshot.ref.getDownloadURL();
print(downloadUrl + " saved url");
return downloadUrl;
}

how to get image URL form firebase storage to firestore

i am trying to upload the image to firebase and get the URL in firestore. It does upload the image but it does not get the URL to Firestore.
this is how i get the image.
Future getImage1() async {
// ignore: deprecated_member_use
var firstImage = await ImagePicker.pickImage(
source: ImageSource.gallery, imageQuality: 65);
setState(() {
_image1 = firstImage;
});
}
this is how i upload and get the url.
uploadPic() async {
Reference ref = storage.ref().child("image1" + DateTime.now().toString());
UploadTask uploadTask = ref.putFile(_image1);
uploadTask.then((res) {
String url = res.ref.getDownloadURL().toString();
imageUrl1 = url;
return url;
});
}
this is how i get the link in firestore
"image 1 Url":(_image1 != null) ? await uploadPic() : null,
getDownloadURL is a Future, so how about you try it like this:
Future<String> uploadPic() async {
Reference ref = storage.ref().child("image1" + DateTime.now().toString());
UploadTask uploadTask = ref.putFile(_image1);
String url;
await uploadTask.whenComplete(() {
res.ref.getDownloadURL().then((fileUrl){
url = fileUrl as String;
});
});
return url;
}

Flutter Sending Image via Mailer

I'm trying to find a solution for my code. I'm trying to send mail with image attachment but I couldn't figured out how to do. I searched nearly all topics in this website but none of it helped me.
Without using attachment, I'm able to send email but when I use attachment and trying to send my image, nothing happens. I hid private information from the code.
File newImage;
uploadImage() async {
final _storage = FirebaseStorage.instance;
final _picker = ImagePicker();
PickedFile image;
image = await _picker.getImage(source: ImageSource.camera);
var file = File(image.path);
String filName = basename(file.path);
// Upload to Firebase
var snapshot = await _storage.ref().child(filName).putFile(file).onComplete;
var downloadURL = await snapshot.ref.getDownloadURL();
setState(() {
imageUrl = downloadURL;
newImage = image; // PickedFile can't be assigned to variable type File
});
}
main(message) async{
var options = new SmtpOptions()
// Hidden
var transport = new SmtpTransport(options);
var envelope = new Envelope()
..from = 'example#mail.com'
..fromName = 'example'
..recipients = ['example2#mail.com']
..subject = 'example'
..attachments.add(new Attachment(file: new File(newImage))) // File can't be assigned to parameter type 'String'
..text = "$message";
transport.send(envelope)
.then((_) => print('email sent!'))
.catchError((e) => print('Error: $e'));
}
You can try this code instead:
..attachments.add(new Attachment(file: new File(newImage.path)))

Flutter http request upload mp3 file

Im using this api to upload a mp3 file
using this method
Future<void> uploadRecord(String matchId, String filePath) async {
Uri url = Uri.parse(
Urls.baseurl + EndPoints.uploadRecordEndPoint + '${auth.token}');
final request = http.MultipartRequest('POST', url)
..fields['match_id'] = matchId
..files.add(http.MultipartFile.fromBytes(
'file', await File.fromUri(Uri(path: filePath)).readAsBytes(),
contentType: MediaType('audio', 'mpeg')));
final response = await request.send();
final responseStr = await response.stream.bytesToString();
print(responseStr);
}
but it doesn't work, it seems that no file uploading, am i missing something ? or is there any better solution ?
Please use flutter_upload package for uploading file
Or use below code for uploading the file using multipart :
static Future<String> fileUploadMultipart(
{File file, OnUploadProgressCallback onUploadProgress}) async {
assert(file != null);
final url = '$baseUrl/api/file';
final httpClient = getHttpClient();
final request = await httpClient.postUrl(Uri.parse(url));
int byteCount = 0;
var multipart = await http.MultipartFile.fromPath(fileUtil.basename(file.path), file.path);
// final fileStreamFile = file.openRead();
// var multipart = MultipartFile("file", fileStreamFile, file.lengthSync(),
// filename: fileUtil.basename(file.path));
var requestMultipart = http.MultipartRequest("", Uri.parse("uri"));
requestMultipart.files.add(multipart);
var msStream = requestMultipart.finalize();
var totalByteLength = requestMultipart.contentLength;
request.contentLength = totalByteLength;
request.headers.set(
HttpHeaders.contentTypeHeader, requestMultipart.headers[HttpHeaders.contentTypeHeader]);
Stream<List<int>> streamUpload = msStream.transform(
new StreamTransformer.fromHandlers(
handleData: (data, sink) {
sink.add(data);
byteCount += data.length;
if (onUploadProgress != null) {
onUploadProgress(byteCount, totalByteLength);
// CALL STATUS CALLBACK;
}
},
handleError: (error, stack, sink) {
throw error;
},
handleDone: (sink) {
sink.close();
// UPLOAD DONE;
},
),
);
await request.addStream(streamUpload);
final httpResponse = await request.close();
//
var statusCode = httpResponse.statusCode;
if (statusCode ~/ 100 != 2) {
throw Exception('Error uploading file, Status code: ${httpResponse.statusCode}');
} else {
return await readResponseAsString(httpResponse);
}
}
Try to add filename to the
http.MultipartFile.fromBytes()

How to set Timeout for MultiPart Request in Dart?

Here is my MultiPartRequest code
var request =
http.MultipartRequest("POST", Uri.parse(EMPLOYEE_PUNCH_IN_URL));
request.fields['uid'] = userId;
request.fields['location'] = location;
request.fields['punchin_time'] = punchInTime;
request.fields['punchin_location_name'] = address;
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension"));
request.files.add(multiPartFile);
http.StreamedResponse response = await request.send();
var responseByteArray = await response.stream.toBytes();
employeePunchInModel = standardSerializers.deserializeWith(
EmployeePunchInModel.serializer,
json.decode(utf8.decode(responseByteArray)));
......
I know how to set timeout to a normal http request. I have followed this link
Set timeout for HTTPClient get() request
I have tried adding timeout function in following ways but it won't work and my request gets completed
1.
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension")).timeout(const Duration(seconds: 1));
2.
http.StreamedResponse response = await request.send().timeout(const Duration(seconds: 1));
3.
var responseByteArray = await response.stream.toBytes().timeout(const Duration(seconds: 15));
But none of the above timeout works.
Using http package, this is my approach :
Create a Streamed Response that we're going to use for onTimeOut callback
StreamedResponse timeOutResponse({
#required String httpMethod,
#required dynamic error,
#required String url,
}) {
Map<String, dynamic> body = {
'any': 'value',
'you': 'want for $error',
};
int statusCode = 404;
Uri destination = Uri.parse(url);
String json = jsonEncode(body);
return StreamedResponse(
Stream.value(json.codeUnits),
statusCode,
request: Request(httpMethod, destination),
);
}
Use the modified http multipart function from Mahesh Jamdade answer
Future<http.Response> makeAnyHttpRequest(String url,
Map<String, dynamic> body,
{Function onTimeout,
Duration duration = const Duration(seconds: 10)}) async {
final request = http.MultipartRequest(
'POST',
Uri.parse('$url'),
);
final res = await request.send().timeout(
duration,
onTimeout: () {
return timeOutResponse(
httpMethod: 'MULTIPART POST',
error: 'Request Time Out',
url: url,
);
},
);
return await http.Response.fromStream(res);
}
this way, instead of timeout exception, you can return the onTimeOut Http Response.
Use Dio package with following code:
try {
final response = await Dio().post(requestFinal.item1, data:formData, options: option,
onSendProgress: (sent, total) {
print("uploadFile ${sent / total}");
});
print("Response Status code:: ${response.statusCode}");
if (response.statusCode >= 200 && response.statusCode < 299) {
dynamic jsonResponse = response.data;
print("response body :: $jsonResponse");
final message = jsonResponse["msg"] ?? '';
final status = jsonResponse["status"] ?? 400;
final data = jsonResponse["data"];
return HttpResponse(status: status, errMessage: message, json: data);
}
else {
dynamic jsonResponse = response.data;
print('*********************************************************');
print("response body :: $jsonResponse");
print('*********************************************************');
var errMessage = jsonResponse["msg"];
return HttpResponse(status: response.statusCode, errMessage: errMessage, json: jsonResponse);
}
}
on DioError catch(error) {
print('*********************************************************');
print('Error Details :: ${error.message}');
print('*********************************************************');
dynamic jsonResponse = error.response.data;
print('*********************************************************');
print("response body :: $jsonResponse");
print('*********************************************************');
var errMessage = jsonResponse["message"] ?? "Something went wrong";
return HttpResponse(status: jsonResponse["status"] , errMessage: errMessage, json: null);
}
Hope this helps!
I suggest that
var request = http.MultipartRequest("POST", Uri.parse(EMPLOYEE_PUNCH_IN_URL));
request.fields['uid'] = userId;
request.fields['location'] = location;
request.fields['punchin_time'] = punchInTime;
request.fields['punchin_location_name'] = address;
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension"));
request.files.add(multiPartFile);
await request.send().timeout(Duration(seconds: 1), onTimeout: () {
throw "TimeOut";
}).then((onValue) {
var responseByteArray = await onValue.stream.toBytes();
employeePunchInModel = standardSerializers.deserializeWith(
EmployeePunchInModel.serializer,
json.decode(utf8.decode(responseByteArray)));
}).catchError((){ throw "TimeOut";});
hey you can also use dio 3.0.4
A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.
Here is the link :Http client for Dart
You can try this which uses http package
declare your multipart function like this with your desired arguments
Future<http.Response> makeAnyHttpRequest(String url,
Map<String, dynamic> body,
{Function onTimeout,
Duration duration = const Duration(seconds: 10)}) async {
final request = http.MultipartRequest(
'POST',
Uri.parse('$url'),
);
final res = await request.send().timeout(duration, onTimeout: onTimeout);
return await http.Response.fromStream(res);
}
and then call it within a try catch block and you can catch the timeout exception by throwing the desired value on Timeout.
try{
final res = makeAnyHttpRequest("<url>",{"body":"here"},onTimeout:(){
throw 'TIME_OUT'; // Throw anything
});
}catch(_){
if (_.toString() == 'TIME_OUT') { // catch the thrown value to detect TIMEOUT
/// DO SOMETHING ON TIMEOUT
debugPrint('The request Timeout');
}
}
}
The above approach would work for any http request as long as you have a onTimeout call back

Resources