Flutter_file_picker: Flutter Web: Invalid argument(s) (path): Must not be null

[Henzelix]

After choosing the file in my app, I get this error:
Invalid argument(s) (path): Must not be null
I tried it on Android, Windows and Linux, even tried puting it on Firebase Hosting - same results

1. Platform: Flutter Web.
2. Platform OS: Every.
3. Filetype: Every.
4. Flutter version: 1.20, beta (because of Flutter Web)

My code:
onPressed: () async { FilePickerResult result = await FilePicker.platform.pickFiles( type: FileType.custom, allowedExtensions: ['doc', 'pdf', 'docx', 'xlsx', 'xls', 'xltx', 'pptx', 'ppt', 'odt', 'txt'], ); if(result != null) { file = File(result.files.single.path); int sizeInBytes = file.lengthSync(); double sizeInMb = sizeInBytes / (1024 * 1024); if(sizeInMb > 10){ setState(() { error = 'Plik jest za duży'; }); file = null; } else{ setState(() { fileName = file.path.split('/').last.toString(); error = ''; }); print(fileName); } } }, ),

Detailed error:
at http://localhost:42803/dart_sdk.js:33243:9Error: Invalid argument(s) (path): Must not be null at Object.throw_ [as throw] (http://localhost:42803/dart_sdk.js:4334:11) at Function.checkNotNull (http://localhost:42803/dart_sdk.js:123416:39) at Function._checkNotNull (http://localhost:42803/dart_sdk.js:52289:26) at new io._File.new (http://localhost:42803/dart_sdk.js:52295:30) at Function.new (http://localhost:42803/dart_sdk.js:51408:16) at addFiles._HomeworkFilesState.new.<anonymous> (http://localhost:42803/packages/classy/pages/homeworks/addFiles.dart.lib.js:3093:44) at Generator.next (<anonymous>) at http://localhost:42803/dart_sdk.js:37603:33 at _RootZone.runUnary (http://localhost:42803/dart_sdk.js:37457:58) at _FutureListener.thenAwait.handleValue (http://localhost:42803/dart_sdk.js:32441:29) at handleValueCallback (http://localhost:42803/dart_sdk.js:32988:49) at Function._propagateToListeners (http://localhost:42803/dart_sdk.js:33026:17) at _Future.new.[_completeWithValue] (http://localhost:42803/dart_sdk.js:32869:23) at async._AsyncCallbackEntry.new.callback (http://localhost:42803/dart_sdk.js:32891:35) at Object._microtaskLoop (http://localhost:42803/dart_sdk.js:37718:13) at _startMicrotaskLoop (http://localhost:42803/dart_sdk.js:37724:13) at http://localhost:42803/dart_sdk.js:33243:9

[Henzelix]

PS. I'm using this package already in my Android app (I converted my app to Flutter Web) and it works fantastic!

[miguelpruivo]

@Henzelix hi! Paths aren’t supported on the web, you must use bytes property. :)

[Henzelix]

@miguelpruivo but bytes are part of PlatformFile, right? Is there a way to upload them to Firebase Storage?

[miguelpruivo]

@Henzelix right. Unfortunately firebase storage isn’t supported for web yet. You can try one of the solutions purposed here.

[Henzelix]

@miguelpruivo will something like that work for converting PlatformFile to normal Dart's File?
PlatformFile pickedFile = result.files.first; File file = pickedFile as File;
I need to convert it to File because I don't think Firebase Storage will accept PlatformFile

[miguelpruivo]

@Henzelix you can’t use dart:io library with dart web which uses dart:html. That’s a platform limitation. I’m sorry. 😔

You need to use the bytes and upload it using a multipart file. That’s how web usually does.

[Henzelix]

Ok thanks for help

[Henzelix]

@miguelpruivo I can't use http package to upload multipart file in my project due to technical reasons. I tried uploading file to firebase (with firebase plugin, plugin works correctly) using .put(bytes_that_got_from_file_picker) or .putString(base64). None of it is working. Idk if that's caused by plugin or not, but I have a certain question - why can't we also return a html.File with this function?:

FilePickerResult result = await FilePicker.platform.pickFiles();

As far as I know, in earlier version we could use getFile() and the return could be html.File except of FilePickerResult. Because FilePickerResult has many cool functions, like file.extension, going back to earlier version would only give me more problems. So why can't we return both things? It could work like this:

data = result.files.first; file = pickedFile;

We would use data for showing file extensions (data.extension) and pickedFile would be a dart:html File object only, because you would get dart:io File object from File.fromRawPath(data.bytes);.

Thanks to that, working with files would get 10 times easier. I can post new issue with this suggestion if you want :)

[miguelpruivo]

@Henzelix File instances from dart:io and dart:html are completely different from each other. Currently, firebase storage only accepts dart:io File instances, hence, it isn't supported for Flutter Web.

That's how Web works, actually. Previously the only thing that I gave you was html.File instances which are different from io.File instances — the ones that Firestore accepts, so you'd still have the same problem anyway.

You can check this SO answer for how to upload the files to firestore using Flutter Web, might help you somehow.

I'm sorry for any inconvenience.

[Henzelix]

@miguelpruivo wanted to only inform that I got it working finally, thank you for help. I will paste code here soon

[miguelpruivo]

@Henzelix did you used the bytes right? Waiting to see your implementation so it may help others. Thank you!

[Henzelix]

if(widget.pickedFile != null){ String mimeType = mime(p.basename(widget.pickedFile.name)); var metadata = fb.UploadMetadata( contentType: mimeType, );

  uploadTask = _storage.child('files/answers/${DateTime.now()}/${widget.pickedFile.name}').put(widget.pickedFile.bytes, metadata);
  fb.UploadTaskSnapshot taskSnapshot = await uploadTask.future;
  String downloadUrl = taskSnapshot.ref.getDownloadURL().toString();
  attUrl = downloadUrl;
  }`

[Henzelix]

@miguelpruivo it's hard to paste the code in one block here, so I will explain it with the image:

widget.pickedFile is a PlatformFile pickedFile = result.files.first; that i send via Navigator to different screen. In .put() you need to put blob, so first bytes from the file and then described contentType, named here metadata. I think everything else is self explanatory.

[Henzelix]

Packages I used:

1. firebase
2. path
3. mime_type

[miguelpruivo]

Thank you!

[Henzelix]

it's good to point out that pickedFile.name already contains file's extension

[miguelpruivo]

@Henzelix yes, it’s described on the docs. :)