[web] Path of selected file is null

[jhb-dev]

Describe the bug
On Fluttter Web when I select a file the path of it is null. Therefore I am getting an error and cannot convert it into a File object. The name however is not null and on android it is working.

Platform details

1. Platform: Windows
2. Browser: Google Chrome
3. Browser Version: 87.0.4280.88

Flutter Version details
Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 10.0.19042.685], locale de-DE) • Flutter version 1.24.0-10.2.pre at C:\flutter • Framework revision 022b333a08 (4 weeks ago), 2020-11-18 11:35:09 -0800 • Engine revision 07c1eed46b • Dart version 2.12.0 (build 2.12.0-29.10.beta)

My Code

var result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false);

if (result != null) {
   print(result.files.first.name);
   print(result.files.first.path);
   pickedFile = File(result.files.first.path);
} 

The log

test_image.jpg
null
Error: Invalid argument(s) (path): Must not be null
   at Object.throw_ [as throw] (http://localhost:57120/dart_sdk.js:4348:11)
   at Function.checkNotNull (http://localhost:57120/dart_sdk.js:123364:39)
   at Function._checkNotNull (http://localhost:57120/dart_sdk.js:52291:26)
   at new io._File.new (http://localhost:57120/dart_sdk.js:52297:30)
   at Function.new (http://localhost:57120/dart_sdk.js:51402:16)
   at _openFileExplorer (http://localhost:57120/packages/nestwaerme_kita_app/feed/add_edit_message_page/widgets/add_edit_message_form.dart.lib.js:1066:37)
   at _openFileExplorer.next (<anonymous>)
   at http://localhost:57120/dart_sdk.js:37956:33
   at _RootZone.runUnary (http://localhost:57120/dart_sdk.js:37810:58)
   at _FutureListener.thenAwait.handleValue (http://localhost:57120/dart_sdk.js:32771:29)
   at handleValueCallback (http://localhost:57120/dart_sdk.js:33319:49)
   at Function._propagateToListeners (http://localhost:57120/dart_sdk.js:33357:17)
   at _Future.new.[_completeWithValue] (http://localhost:57120/dart_sdk.js:33199:23)
   at async._AsyncCallbackEntry.new.callback (http://localhost:57120/dart_sdk.js:33222:35)
   at Object._microtaskLoop (http://localhost:57120/dart_sdk.js:38071:13)
   at _startMicrotaskLoop (http://localhost:57120/dart_sdk.js:38077:13)
   at http://localhost:57120/dart_sdk.js:33574:9

[miguelpruivo]

@devj3ns this is described on the docs. Paths on Web don't work as browsers don't provide valid paths. You must use the bytes property instead.

Thank you.

[jhb-dev]

@devj3ns this is described on the docs. Paths on Web don't work as browsers don't provide valid paths. You must use the bytes property instead.

Thank you.

Thanks for the quick answer. Unfortunately I cannot find any examples on how to convert bytes into a file. Could you please give me an example code snippet?

[miguelpruivo]

Usually you don't need to @devj3ns. If you are going to process the file for uploading or rendering, picking the bytes directly should do it.

[jhb-dev]

Usually you don't need to @devj3ns. If you are going to process the file for uploading or rendering, picking the bytes directly should do it.

Yes, you are right. In my case I can just pass the bytes to the putData method of Firestore storage.

[mukhtharcm]

@devj3ns can you please show the example code you use for putData in firebase storage?

[jhb-dev]

@devj3ns can you please show the example code you use for putData in firebase storage?

//get file
var result = await FilePicker.platform.pickFiles(type: FileType.any, allowMultiple: false);
if (result.files.first != null){
  var fileBytes = result.files.first.bytes;
  var fileName = result.files.first.name;
  
  // upload file
  await FirebaseStorage.instance.ref('uploads/$fileName').putData(fileBytes);
}

Of course @mukhtharcm This is some of my code.

[miguelpruivo]

@devj3ns I'm going to add this to the Wiki since this is not the first time that people come across with this question.

Thank you.