[file_selector_web] Listens to file input cancel event. (#3683)

While using package ``file_selector`` making for multiple file request in web platform we are not able to get any data if user clicks cancel button on file selection window. This PR fixes it by watching the ``focus event`` and if ``onChange`` is not fired then return empty array, Empty array will only return if multiple selection is enabled with ``openFiles()``.

*List which issues are fixed by this PR. You must list at least one issue.*
[Issue #121328](https://github.com/flutter/flutter/issues/121328)

.ci/scripts/dart_unit_tests_pathified.sh

@@ -12,7 +12,7 @@ set -e
 # re-checked.
 dart ./script/tool/bin/flutter_plugin_tools.dart dart-test --run-on-dirty-packages \
     --log-timing --exclude=script/configs/dart_unit_tests_exceptions.yaml \
-    $PACKAGE_SHARDING
+    "$@" $PACKAGE_SHARDING
 # Restore the tree to a clean state, to avoid accidental issues if
 # other script steps are added to the enclosing task.
 git checkout .

.ci/targets/dart_unit_tests.yaml

@@ -9,3 +9,4 @@ tasks:
     # that depend on it.
   - name: Dart unit tests - pathified
     script: .ci/scripts/dart_unit_tests_pathified.sh
+    args: ["--platform=vm"]

packages/file_selector/file_selector_web/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.9.2
+
+* Adds and propagates `cancel` event on file selection.
+* Changes `openFile` to return `null` when no files are selected/selection is canceled,
+  as in other platforms.
+
 ## 0.9.1
 
 * Adds `getSaveLocation` and deprecates `getSavePath`.

packages/file_selector/file_selector_web/README.md

@@ -13,3 +13,15 @@ should add it to your `pubspec.yaml` as usual.
 
 [1]: https://pub.dev/packages/file_selector
 [2]: https://flutter.dev/docs/development/packages-and-plugins/developing-packages#endorsed-federated-plugin
+
+## Limitations on the Web platform
+
+### `cancel` event
+
+The `cancel` event used by the web plugin to detect when users close the file
+selector without picking a file is relatively new, and will only work in
+recent browsers.
+
+See:
+
+* https://caniuse.com/mdn-api_htmlinputelement_cancel_event

packages/file_selector/file_selector_web/example/integration_test/dom_helper_test.dart

@@ -21,9 +21,17 @@ void main() {
       return dataTransfer.files as FileList?;
     }
 
-    void setFilesAndTriggerChange(List<File> files) {
+    void setFilesAndTriggerEvent(List<File> files, Event event) {
       input.files = createFileList(files);
-      input.dispatchEvent(Event('change'));
+      input.dispatchEvent(event);
+    }
+
+    void setFilesAndTriggerChange(List<File> files) {
+      setFilesAndTriggerEvent(files, Event('change'));
+    }
+
+    void setFilesAndTriggerCancel(List<File> files) {
+      setFilesAndTriggerEvent(files, Event('cancel'));
     }
 
     setUp(() {
@@ -57,6 +65,18 @@ void main() {
         expect(await files[1].lastModified(), isNotNull);
       });
 
+      testWidgets('"cancel" returns an empty selection', (_) async {
+        final Future<List<XFile>> futureFiles = domHelper.getFiles(
+          input: input,
+        );
+
+        setFilesAndTriggerCancel(<File>[mockFile1, mockFile2]);
+
+        final List<XFile> files = await futureFiles;
+
+        expect(files.length, 0);
+      });
+
       testWidgets('works multiple times', (_) async {
         Future<List<XFile>> futureFiles;
         List<XFile> files;

packages/file_selector/file_selector_web/example/integration_test/file_selector_web_test.dart

@@ -33,14 +33,30 @@ void main() {
           webWildCards: <String>['image/*'],
         );
 
-        final XFile file =
+        final XFile? file =
             await plugin.openFile(acceptedTypeGroups: <XTypeGroup>[typeGroup]);
 
-        expect(file.name, mockFile.name);
+        expect(file, isNotNull);
+        expect(file!.name, mockFile.name);
         expect(await file.length(), 4);
         expect(await file.readAsString(), '1001');
         expect(await file.lastModified(), isNotNull);
       });
+
+      testWidgets('returns null when getFiles returns an empty list',
+          (WidgetTester _) async {
+        // Simulate returning an empty list of files from the DomHelper...
+        final MockDomHelper mockDomHelper = MockDomHelper(
+          files: <XFile>[],
+        );
+
+        final FileSelectorWeb plugin =
+            FileSelectorWeb(domHelper: mockDomHelper);
+
+        final XFile? file = await plugin.openFile();
+
+        expect(file, isNull);
+      });
     });
 
     group('openFiles', () {

packages/file_selector/file_selector_web/lib/file_selector_web.dart

@@ -29,14 +29,14 @@ class FileSelectorWeb extends FileSelectorPlatform {
   }
 
   @override
-  Future<XFile> openFile({
+  Future<XFile?> openFile({
     List<XTypeGroup>? acceptedTypeGroups,
     String? initialDirectory,
     String? confirmButtonText,
   }) async {
     final List<XFile> files =
         await _openFiles(acceptedTypeGroups: acceptedTypeGroups);
-    return files.first;
+    return files.isNotEmpty ? files.first : null;
   }
 
   @override

packages/file_selector/file_selector_web/lib/src/dom_helper.dart

@@ -52,6 +52,12 @@ class DomHelper {
       completer.completeError(platformException);
     });
 
+    inputElement.addEventListener('cancel', (Event event) {
+      inputElement.remove();
+      completer.complete(<XFile>[]);
+    });
+
+    // TODO(dit): Reimplement this with the showPicker() API, https://github.com/flutter/flutter/issues/130365
     inputElement.click();
 
     return completer.future;

packages/file_selector/file_selector_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: file_selector_web
 description: Web platform implementation of file_selector
 repository: https://github.com/flutter/packages/tree/main/packages/file_selector/file_selector_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+file_selector%22
-version: 0.9.1
+version: 0.9.2
 
 environment:
   sdk: ">=2.18.0 <4.0.0"

packages/file_selector/file_selector_web/test/utils_test.dart

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+@TestOn('chrome') // web-only package.
+
 import 'package:file_selector_platform_interface/file_selector_platform_interface.dart';
 import 'package:file_selector_web/src/utils.dart';
 import 'package:flutter_test/flutter_test.dart';