Adds mobile Safari support (Web) and conditional imports for backwards compatibility with Xcode 11 (iOS)

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 2.0.2
+Web: Adds mobile Safari support and other minor improvements.
+iOS: Adds conditional import for backwards compatibility with Xcode 11.
+
 ## 2.0.1+2
 iOS: Addresses an issue that could prevent users from viewing picked media elements (pictures/videos) from gallery on iOS 14.
 

ios/Classes/FilePickerPlugin.h

@@ -2,8 +2,15 @@
 #import <UIKit/UIKit.h>
 #import <MediaPlayer/MediaPlayer.h>
 #import <Photos/Photos.h>
-#import <PhotosUI/PHPicker.h>
 #import <MobileCoreServices/MobileCoreServices.h>
 
-@interface FilePickerPlugin : NSObject<FlutterPlugin, FlutterStreamHandler, UIDocumentPickerDelegate, UITabBarDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate, PHPickerViewControllerDelegate>
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
+#import <PhotosUI/PHPicker.h>
+#endif
+
+@interface FilePickerPlugin : NSObject<FlutterPlugin, FlutterStreamHandler, UIDocumentPickerDelegate, UITabBarDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate
+#if __IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_14_0
+, PHPickerViewControllerDelegate
+#endif
+>
 @end

lib/src/file_picker_web.dart

@@ -1,6 +1,5 @@
 import 'dart:async';
-import 'dart:convert';
-import 'dart:html' as html;
+import 'dart:html';
 import 'dart:typed_data';
 
 import 'package:file_picker/file_picker.dart';
@@ -10,13 +9,32 @@ import 'file_picker_result.dart';
 import 'platform_file.dart';
 
 class FilePickerWeb extends FilePicker {
-  FilePickerWeb._();
+  Element _target;
+  final String _kFilePickerInputsDomId = '__file_picker_web-file-input';
+
   static final FilePickerWeb platform = FilePickerWeb._();
 
+  FilePickerWeb._() {
+    _target = _ensureInitialized(_kFilePickerInputsDomId);
+  }
+
   static void registerWith(Registrar registrar) {
     FilePicker.platform = platform;
   }
 
+  /// Initializes a DOM container where we can host input elements.
+  Element _ensureInitialized(String id) {
+    Element target = querySelector('#$id');
+    if (target == null) {
+      final Element targetElement = Element.tag('flt-file-picker-inputs')
+        ..id = id;
+
+      querySelector('body').children.add(targetElement);
+      target = targetElement;
+    }
+    return target;
+  }
+
   @override
   Future<FilePickerResult> pickFiles({
     FileType type = FileType.any,
@@ -30,40 +48,60 @@ class FilePickerWeb extends FilePicker {
         Completer<List<PlatformFile>>();
 
     String accept = _fileType(type, allowedExtensions);
-    html.InputElement uploadInput = html.FileUploadInputElement();
+    InputElement uploadInput = FileUploadInputElement();
     uploadInput.draggable = true;
     uploadInput.multiple = allowMultiple;
     uploadInput.accept = accept;
-    uploadInput.click();
 
-    uploadInput.onChange.listen((e) {
-      final files = uploadInput.files;
-      final reader = html.FileReader();
+    bool changeEventTriggered = false;
+    void changeEventListener(e) {
+      if (changeEventTriggered) {
+        return;
+      }
+      changeEventTriggered = true;
 
-      List<PlatformFile> pickedFiles = [];
+      final List<File> files = uploadInput.files;
+      final List<PlatformFile> pickedFiles = [];
 
-      reader.onLoadEnd.listen((e) {
-        final Uint8List bytes =
-            Base64Decoder().convert(reader.result.toString().split(",").last);
-
-        pickedFiles.add(
-          PlatformFile(
-            name: uploadInput.value.replaceAll('\\', '/'),
-            path: uploadInput.value,
-            size: bytes.length ~/ 1024,
-            bytes: withData ? bytes : null,
-          ),
-        );
+      void addPickedFile(File file, Uint8List bytes, String path) {
+        pickedFiles.add(PlatformFile(
+          name: file.name,
+          path: path,
+          size: bytes != null ? bytes.length ~/ 1024 : -1,
+          bytes: bytes,
+        ));
 
         if (pickedFiles.length >= files.length) {
           filesCompleter.complete(pickedFiles);
         }
-      });
+      }
 
-      files.forEach((element) {
-        reader.readAsDataUrl(element);
+      files.forEach((File file) {
+        if (!withData) {
+          final FileReader reader = FileReader();
+          reader.onLoadEnd.listen((e) {
+            addPickedFile(file, null, reader.result);
+          });
+          reader.readAsDataUrl(file);
+          return;
+        }
+
+        final FileReader reader = FileReader();
+        reader.onLoadEnd.listen((e) {
+          addPickedFile(file, reader.result, null);
+        });
+        reader.readAsArrayBuffer(file);
       });
-    });
+    }
+
+    uploadInput.onChange.listen(changeEventListener);
+    uploadInput.addEventListener('change', changeEventListener);
+
+    //Add input element to the page body
+    _target.children.clear();
+    _target.children.add(uploadInput);
+    uploadInput.click();
+
     return FilePickerResult(await filesCompleter.future);
   }
 

pubspec.yaml

@@ -1,7 +1,7 @@
 name: file_picker
 description: A package that allows you to use a native file explorer to pick single or multiple absolute file paths, with extension filtering support.
 homepage: https://github.com/miguelpruivo/plugins_flutter_file_picker
-version: 2.0.1+2
+version: 2.0.2
 
 dependencies:
   flutter: