Flutter web upload file - flutter

Question

I want to upload files using Flutter web, but I encountered some problems, my steps are as follows:
/// choose file
void _chooseFile() {
InputElement uploadInput = FileUploadInputElement();
uploadInput.accept = ".mp4";
uploadInput.multiple = true;
uploadInput.click();
uploadInput.onChange.listen((event) {
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
final reader = FileReader();
reader.onLoadEnd.listen((event) {
print('loaded: ${file.name}');
print('type: ${reader.result.runtimeType}');
print('file size = ${file.size}');
_uploadFile(file);
});
reader.onError.listen((event) {
print(event);
});
reader.readAsArrayBuffer(file);
}
});
}
/// upload file
/// file: in dart:html package not in dart:io package
void _uploadFile(File file) async {
FormData data = FormData.fromMap({
'file': MultipartFile.fromBytes(
List<int>, // -----------------------------> problem line
filename: file.name,
)
});
Dio dio = new Dio();
dio.post('upload file url', data: data, onSendProgress: (count, total) {
print('$count ==> $total');
}).then((value) {
print('$value');
}).catchError((error) => print('$error'));
}
The problem is that MultipartFile.fromBytes(List<int> value, {...}), but I don't know how to conver file ( in dart:html not in dart:io ) to List<int>.
Thanks!!!

Answer 1

You need to convert the reader, as below:
List<int> _selectedFile;
Uint8List _bytesData;
void _handleResult(Object result) {
setState(() {
_bytesData = Base64Decoder().convert(result.toString().split(",").last);
_selectedFile = _bytesData;
});
}
call the func:
_handleResult(reader.result);
then, pass _bytesData to your MultipartFile.fromBytes(...) or have return func type as List<int> and call it anywhere you need.
For example, this is what I have done to get the image:
List<int> imageFileBytes;
/// Browse Image:
_setImage(int index) async {
html.InputElement uploadInput = html.FileUploadInputElement();
uploadInput.multiple = false;
uploadInput.draggable = true;
uploadInput.accept = 'image/*';
uploadInput.click();
html.document.body.append(uploadInput);
uploadInput.onChange.listen((e) {
final files = uploadInput.files;
final file = files[0];
final reader = new html.FileReader();
reader.onLoadEnd.listen((e) {
var _bytesData = Base64Decoder().convert(reader.result.toString().split(",").last);
setState(() {
imageFileBytes = _bytesData;
});
});
reader.readAsDataUrl(file);
});
uploadInput.remove();
}

Answer 2

InputElement uploadInput = FileUploadInputElement();
uploadInput.accept = 'image/*';
uploadInput.click();
uploadInput.onChange.listen(
(changeEvent) {
final file = uploadInput.files.first;
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onLoadEnd.listen(
(loadEndEvent) async {
_file = file;
setState(() {});
},
);
},
);
That code Work fine for me.