Meta data path returns blank

[Dan MacDonald]

When attempting to use the metadata path, all I ever get is blank

  Image fromPicker = await ImagePickerWeb.getImage(outputType: ImageType.widget);
  var meta = await ImagePickerWeb.getImageInfo;
  print('meta.path = ' + meta.filePath); // prints 'meta.path = '

Am I missing something?

EDIT: flutter information:

>flutter doctor -v
[√] Flutter (Channel beta, v1.17.0, on Microsoft Windows [Version 10.0.18362.778], locale en-CA)
    • Flutter version 1.17.0 at C:\development\flutter
    • Framework revision d3ed9ec945 (2 weeks ago), 2020-04-06 14:07:34 -0700
    • Engine revision c9506cb8e9
    • Dart version 2.8.0 (build 2.8.0-dev.18.0 eea9717938)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\danbm\AppData\Local\Android\sdk
    • Platform android-29, build-tools 28.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 3.5)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin version 42.0.1
    • Dart plugin version 191.8593
    • Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[√] Connected device (2 available)
    • Chrome     • chrome     • web-javascript • Google Chrome 80.0.3987.163
    • Web Server • web-server • web-javascript • Flutter Tools

• No issues found!

[Rebar Ahmad]

Actually it's trying to fetch the relativePath from the browser, but due to security reasons you can't get the local file system paths.

This part of the code was migrated without refactoring it on my own.

Maybe I'll just leave out the filePath completely.

So to answer your question: No you aren't missing anything. You've done everything correctly :).

[Dan MacDonald]

So how do I get an image AND it's path? I would like to display it and use the resource later on. I've tried the

html.File file = await ImagePicker.....
print(file.path); 

And it also doesn't return the path.

Edit. Path= relative path, I'm on mobile, but you get the idea.

[Rebar Ahmad]

So how do I get an image AND it's path? I would like to display it and use the resource later on. I've tried the

html.File file = await ImagePicker.....
print(file.path); 

And it also doesn't return the path.

Edit. Path= relative path, I'm on mobile, but you get the idea.

It's just a widget which you'll get. So you can display it directly in your build method. Just provide a variable and set the variable to the picked image, like the example code in the readme does.

It doesn't matter if you're on mobile or not. This package is targeting web, so also mobile web. For native mobile you have to use image_picker. There're plans to create a uniform platform interface, but that's the decision of the Flutter Google Team.

And if you want to save your image, you have to upload it somewhere and fetch the network url. I did a fully CMS system with images and videos with this package and used firebase for example as the backend. It's all possible, but to help you here I need a gist or dartpad example, what you're trying to do.

But the main topic of this issue is just answered: you can't fetch the path, because browsers (also mobile browsers) doesn't allow that. You can only get the name. Because this is just javascript under the hood which fetches a html.File. This package is providing the file in different ways that users can use for their own use cases and thats it.

There're two ways how you can save images:

1. Save it locally in your browsers storage (therefore you can save the bytes! so outputType: ImageType.bytes). Just use something like sqflite, hivedb, etc. and you can pass the bytes.

2. Save your file or bytes (depends on your backend) in your backend and retreive the network url and show your images with Image.network(...)

[Dan MacDonald]

Thanks for the in depth response! Ideally, what I want to do is:

onUploadButtonPressed()
{
  _fromPicker = await ImagePickerWeb.getImage(outputType: ImageType.widget);
}

... later on

onSaveButtonPressed()
{
  Firebase.upload(_fromPicker.path); 
}

I do something like this on flutter mobile with image_picker

  onSelectPicturePressed: () async {
    _pickedImageUrl = await ImagePicker.pickImage(source: ImageSource.camera);
   ....
  // pickedImageurl is used in an Image.fromFile(...) to display it on the UI
  },

// later on
Firebase.upload(_pickedImageUrl); 

But I didnt know this:

you can't fetch the path, because browsers (also mobile browsers) doesn't allow that

So I'll reverse the order & upload to FB, then show the image. Thanks for the help

[Rebar Ahmad]

Ah ok, you want to upload it to firebase.

No problem, here you go:

https://gist.github.com/Ahmadre/0b2ae119a355f80e8a9e59bcc29986b8

Here in the gist I passed Uint8List into the .put method, but you can also pass a html.File into it like this:

    fb.UploadTask uploadTask = storageReference.put(_cloudFile, meta);

There you'll find addImage and uploadImage that you can use for your cases.

I'll close this issue, because further discussions aren't related to the base question.