Not receiving return after upload file window closed

[VictorHomsi]

Hi,

After calling await ImagePickerWeb.getImage(outputType: ImageType.widget); and closing the file upload window, or pressing back on the smartphone, there is not a return from this call. I believe that a null was expected, so that I can dismiss a loadbar or anything like this on the page.

Tested on chrome and firefox.

Thanks,

[TesteurManiak]

Can you please provide a minimal reproducible code sample for this issue.

[VictorHomsi]

Hi @TesteurManiak,

I built a simplified version of my original class but still reproducing the behavior.

photoHistory_add_view.txt

[TesteurManiak]

Thanks I am going to take a look at it.

[TesteurManiak]

I've tested your code but I cannot reproduce your issue. Here's the full code I've only made some minor changes compared to the one you've send and it works perfectly:

import 'package:flutter/material.dart';
import 'package:image_picker_web/image_picker_web.dart';

const Color kDarkGray = Color(0xFFA3A3A3);
const Color kLightGray = Color(0xFFF1F0F5);

class PhotosHistoryAddPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => ImagePickerWidget();
}

enum PageStatus { LOADING, ERROR, LOADED }

class ImagePickerWidget extends StatefulWidget {
  @override
  _ImagePickerWidgetState createState() => _ImagePickerWidgetState();
}

class _ImagePickerWidgetState extends State<ImagePickerWidget> {
  final _photos = <Image>[];
  PageStatus _pageStatus = PageStatus.LOADED;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Container(
            height: 100,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: _photos.length + 1,
              itemBuilder: (context, index) {
                if (index == 0) {
                  return _buildAddPhoto();
                }
                var image = _photos[index - 1];
                return Stack(
                  children: <Widget>[
                    InkWell(
                      child: Container(
                          margin: EdgeInsets.all(5),
                          height: 100,
                          width: 100,
                          color: kLightGray,
                          child: image),
                    ),
                  ],
                );
              },
            ),
          ),
          if (_pageStatus == PageStatus.LOADED)
            Container(
              margin: EdgeInsets.all(16),
              child: ElevatedButton(
                onPressed: () {},
                child: Text('Save'),
              ),
            )
        ],
      ),
    );
  }

  InkWell _buildAddPhoto() {
    if (_pageStatus == PageStatus.LOADING) {
      return InkWell(
        onTap: () => null,
        child: Container(
          margin: EdgeInsets.all(5),
          height: 100,
          width: 100,
          color: kDarkGray,
          child: Center(child: Text('Please wait..')),
        ),
      );
    } else {
      return InkWell(
        onTap: () => _onAddPhotoClicked(context),
        child: Container(
          margin: EdgeInsets.all(5),
          height: 100,
          width: 100,
          color: kDarkGray,
          child: Center(
            child: Icon(
              Icons.add_to_photos,
              color: kLightGray,
            ),
          ),
        ),
      );
    }
  }

  Future<void> _onAddPhotoClicked(context) async {
    setState(() {
      _pageStatus = PageStatus.LOADING;
    });

    Image image = await ImagePickerWeb.getImage(outputType: ImageType.widget);
    print(image);

    if (image != null) {
      setState(() {
        _photos.add(image);
        _pageStatus = PageStatus.LOADED;
      });
    } else {
      setState(() {
        _pageStatus = PageStatus.LOADED;
      });
    }
  }
}

[VictorHomsi]

Hi @TesteurManiak,

I saw your code (much better syntax and formatting, my bad .. I'm totally new to dart, flutter and the IDE haha).. but i can still reproduce on my PC (chrome) and I also tested on my smartphone.

I did a small capture of my screen using your code.

image-picker.mp4

Flutter version 2.3.0-16.0.pre
image_picker_web: ^2.0.2

[TesteurManiak]

Here is a video from me too and as you can see your code is working as intended.

localhost_62735_._.-.Google.Chrome.2021-06-15.00-13-38.mp4

Here's also the result from my flutter doctor -v:

PS D:\Documents\Projects\image_picker_web\example> flutter doctor -v
[√] Flutter (Channel stable, 2.2.1, on Microsoft Windows [version 10.0.19042.1052], locale fr-FR)
    • Flutter version 2.2.1 at C:\src\flutter
    • Framework revision 02c026b03c (3 weeks ago), 2021-05-27 12:24:44 -0700
    • Engine revision 0fdb562ac8
    • Dart version 2.13.1

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Guillaume\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: D:\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

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

[√] Android Studio (version 4.1.0)
    • Android Studio at D:\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.101
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 91.0.864.48

• No issues found!

I would recommend you to test again after switching your flutter version to the stable channel, as the dev channel might have some unpredictable behavior.

It also seems on the video you have sent that you are using linux, the issue might come from the way linux file system is handling the file picking. I've never tested the package on a browser running on a linux environment as I don't have a linux machine configured.

[VictorHomsi]

Hi @TesteurManiak ,

I believe I wasn't clear.

The image picker works fine, the problem is when i close the file picker popup without choosing a file, using the back button on the smartphone or clicking on Cancel button.

[TesteurManiak]

Okay sorry I didn't understood your issue correctly. You are right it seems that by clicking on the cancel button the Future does not complete itself properly I am going to investigate that.

[TesteurManiak]

Good news ! Your issue has been fixed and is now available on the version 2.0.3 of the package on pub.dev.

You can test it and tell me if it is working correctly for you so I can close this issue.

[VictorHomsi]

Hi @TesteurManiak ! Thanks for the quick reponse!

It worked fine on my PC, but unfortunately it didn't work on my Smartphone (I tested on my wife's smartphone too). Both smartphones are Android using Google Chrome browser.

I've made a video from my Smartphone, I don't know how to get logs or anything from the smartphone browser. In the video I pressed the back button to close the image picker.

image-picker-smartphone.mp4

Edit: it seems to be something related to the focus.. if I close the app and open again it seems to detect the new focus event and conclude the Future.. look in this video:

image-picker-smartphone2.mp4

[TesteurManiak]

Yes it might definitely be related, as when you are on a mobile browser you don't have a popup window for the file picker so you don't really loose the focus to trigger the completion.
I am going to make some research on it to find another event I could listen to, but as debugging on the phone browser is not available for Flutter it might take a bit of time.

[TesteurManiak]

After testing the code on my phone browser I did not succeed on reproducing this behavior could you try the hosted example available here: https://testeurmaniak.github.io/image_picker_web_test/
It might be that your issue persisting on your phone was a cache problem if you did not empty it before re-testing after the newest release.

[VictorHomsi]

Unfortunately the behavior is the same using your hosted example:

image-picker-smartphone3.mp4

I tested on my Smartphone and my wife Smartphone too (both using Android with Chrome), using the back button of the Smartphone and the back button on the page. It only works when I force to lose the focus (closing and opening the app again)

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.