multipartfile upload in flutter web

[andrea antonello]

Hello all,
I am trying to upload a file using flutter web.

Looking around the net I found I should do that via multipartfile of
the html package.
But dart:html doesn't contain a MultipartFile class.

Can anyone redirect me right in this?

Thanks,
Andrea

[Andy Greenshaw]

Take a look at the dio package.

Cheers,

Andy

 

---

From: flutt...@googlegroups.com on behalf of andrea antonello <andrea.a...@gmail.com>
Sent: Thursday, October 3, 2019 1:54 pm
To: flutt...@googlegroups.com
Subject: multipartfile upload in flutter web

 

--
You received this message because you are subscribed to the Google Groups "Flutter Development (flutter-dev)" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/flutter-dev/CACck5jO3ggV%2BRjab1xwXnUXUKMbMiRxoAw-8GM5N%2B72cui%3Dnqw%40mail.gmail.com.

[andrea antonello]

> Take a look at the dio package.

I am using it for flutter android/ios, but I thought (I have to look
where I saw that on the dio page) it would not work for flutter for
the web.
Just to make sure: you confirm it works for flutter web?

Thanks a ton,
Andrea

[andrea antonello]

Sorry for the double-post, I found it once I had sent already.

As the issue tracker states, dio is not supported on flutter web:
https://github.com/flutterchina/dio/issues/313

They suggest to use the official html package but I haven't been able to do so.

Cheers,
Andrea

[andrea antonello]

Fond the solution. Just as information for anyone else interested,
dart:html has FileUploadInputElement, which can be called from onTap
and works in flutter web:

onTap: () async {
InputElement uploadInput = FileUploadInputElement();
uploadInput.click();

uploadInput.onChange.listen((e) {
final files = uploadInput.files;
if (files.length == 1) {
final file = files[0];
final reader = new FileReader();
reader.onLoadEnd.listen((e) {
print("loaded: ${file.name}");
print("type: ${reader.result.runtimeType}");
});
reader.onError.listen((e) {
print(e);
});
reader.readAsArrayBuffer(file);
}
});
},


Credits go toi:
https://stackoverflow.com/questions/56457214/is-there-any-plugin-or-way-to-upload-file-to-server-using-flutter-web

Cheers,
Andrea





On Thu, Oct 3, 2019 at 3:33 PM andrea antonello

[vinay sharma]

sir, after reading file as arrayBuffer how to proceed to upload it on server?

[Travis Dixon]

I was literally just reading this thread looking for the same :P

Here's what I came up with: https://gist.github.com/thetrav/eef0770f79ec29b682616fa63faae6fe

Note though that it appears to freeze animations while large files upload, so CircularProgressIndicator is not a good spinner for this case

[vinay sharma]

ty for replying sir ;P

i already saw that implementation but the problem is how should i convert the File \
that i read as ArrayBuffer to List<int> (or Uint8List to use that image in Flutter  widget) ;(
?

[Travis Dixon]

If you're using android studio (maybe works for vscode too I don't know) you can control click on reader.result and you'll see that if it's got a Buffer it converts it to a specialized form of Uint8List.

If it's got a string (eg, if you called the function that reads as text) it returns a string.

Here's my (fairly clunky) file picker widget with the relevant line highlighted, feel free to re-use any/all/none as you will:

https://gist.github.com/thetrav/9823df5fbcda256cdfeb56a9c44ac2af#file-gd_file_input-dart-L52

[vinay sharma]

wow! ty sir ;P

Actually i ws doing same thing but only problem ws i wsnt  changing my state variables in setState inside ;( 
ty for helping ;P

[Travis Dixon]

Maybe I should tidy it up, convert it to a plugin and publish it on pub.dev