From 1ded925ad24b3ad958cf5db7b6aa63d7ca4c3c17 Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Mon, 18 Mar 2024 23:32:41 +0200 Subject: [PATCH 1/8] feature: migrate package:web to support WASM --- lib/_internal/file_picker_web.dart | 35 +++++++++++++++++++----------- pubspec.yaml | 4 +++- 2 files changed, 25 insertions(+), 14 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index 3e415eca..6cdc746b 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -1,5 +1,6 @@ import 'dart:async'; -import 'dart:html'; +import 'dart:js_interop'; +import 'package:web/web.dart'; import 'dart:typed_data'; import 'package:file_picker/file_picker.dart'; @@ -23,12 +24,13 @@ class FilePickerWeb extends FilePicker { /// Initializes a DOM container where we can host input elements. Element _ensureInitialized(String id) { - Element? target = querySelector('#$id'); + Element? target = document.querySelector('#$id'); if (target == null) { - final Element targetElement = Element.tag('flt-file-picker-inputs') - ..id = id; + final Element targetElement = document.createElement( + 'flt-file-picker-inputs', + )..id = id; - querySelector('body')!.children.add(targetElement); + document.querySelector('body')!.children.add(targetElement); target = targetElement; } return target; @@ -58,7 +60,9 @@ class FilePickerWeb extends FilePicker { Completer?>(); String accept = _fileType(type, allowedExtensions); - InputElement uploadInput = FileUploadInputElement() as InputElement; + HTMLInputElement uploadInput = + document.createElement('input') as HTMLInputElement; + uploadInput.type = 'file'; uploadInput.draggable = true; uploadInput.multiple = allowMultiple; uploadInput.accept = accept; @@ -76,7 +80,7 @@ class FilePickerWeb extends FilePicker { } changeEventTriggered = true; - final List files = uploadInput.files!; + final FileList files = uploadInput.files!; final List pickedFiles = []; void addPickedFile( @@ -101,7 +105,12 @@ class FilePickerWeb extends FilePicker { } } - for (File file in files) { + for (var i = 0; i < files.length; i++) { + final File? file = files.item(i); + if (file == null) { + continue; + } + if (withReadStream) { addPickedFile(file, null, null, _openFileReadStream(file)); continue; @@ -112,7 +121,7 @@ class FilePickerWeb extends FilePicker { reader.onLoadEnd.listen((e) { addPickedFile(file, null, reader.result as String?, null); }); - reader.readAsDataUrl(file); + reader.readAsDataURL(file); continue; } @@ -130,7 +139,7 @@ class FilePickerWeb extends FilePicker { } void cancelledEventListener(_) { - window.removeEventListener('focus', cancelledEventListener); + window.removeEventListener('focus', cancelledEventListener.toJS); // This listener is called before the input changed event, // and the `uploadInput.files` value is still null @@ -144,11 +153,11 @@ class FilePickerWeb extends FilePicker { } uploadInput.onChange.listen(changeEventListener); - uploadInput.addEventListener('change', changeEventListener); - uploadInput.addEventListener('cancel', cancelledEventListener); + uploadInput.addEventListener('change', changeEventListener.toJS); + uploadInput.addEventListener('cancel', cancelledEventListener.toJS); // Listen focus event for cancelled - window.addEventListener('focus', cancelledEventListener); + window.addEventListener('focus', cancelledEventListener.toJS); //Add input element to the page body _target.children.clear(); diff --git a/pubspec.yaml b/pubspec.yaml index 4c9d6537..d0b41188 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -16,7 +16,9 @@ dependencies: ffi: ^2.0.1 path: ^1.8.2 win32: '^5.0.2' - + js: ^0.7.1 + web: ^0.5.1 + dev_dependencies: lints: ^2.0.1 flutter_test: From 100ec8fa9251ae6a4f256f11a6eb2645264db356 Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Sat, 6 Apr 2024 03:00:15 +0200 Subject: [PATCH 2/8] migrate dart:html to package:web --- lib/_internal/file_picker_web.dart | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index 6cdc746b..17216124 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -160,7 +160,11 @@ class FilePickerWeb extends FilePicker { window.addEventListener('focus', cancelledEventListener.toJS); //Add input element to the page body - _target.children.clear(); + var firstChild = _target.firstChild; + while (firstChild != null) { + _target.removeChild(firstChild); + firstChild = _target.firstChild; + } _target.children.add(uploadInput); uploadInput.click(); @@ -202,7 +206,7 @@ class FilePickerWeb extends FilePicker { : start + _readStreamChunkSize; final blob = file.slice(start, end); reader.readAsArrayBuffer(blob); - await reader.onLoad.first; + await EventStreamProviders.loadEvent.forTarget(reader).first; yield reader.result as List; start += _readStreamChunkSize; } From 5f40665d2636ab66b1d813cd6c2876618c241134 Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Sat, 6 Apr 2024 19:36:53 +0200 Subject: [PATCH 3/8] migrate dart:html to package:web --- lib/_internal/file_picker_web.dart | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index 17216124..65bd7289 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -74,7 +74,7 @@ class FilePickerWeb extends FilePicker { onFileLoading(FilePickerStatus.picking); } - void changeEventListener(e) async { + void changeEventListener(Event e) async { if (changeEventTriggered) { return; } @@ -138,7 +138,7 @@ class FilePickerWeb extends FilePicker { } } - void cancelledEventListener(_) { + void cancelledEventListener(Event _) { window.removeEventListener('focus', cancelledEventListener.toJS); // This listener is called before the input changed event, From d580dbb0460d71e9bf1a099c05f47a2035274186 Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Mon, 8 Apr 2024 13:01:42 +0200 Subject: [PATCH 4/8] migrate: dart:html to package:web tos support wasm --- example/web/index.html | 8 +++----- lib/_internal/file_picker_web.dart | 3 ++- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/example/web/index.html b/example/web/index.html index 9b7a438f..8f034bcf 100644 --- a/example/web/index.html +++ b/example/web/index.html @@ -16,17 +16,15 @@ example + diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index 65bd7289..d433b198 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -128,7 +128,8 @@ class FilePickerWeb extends FilePicker { final syncCompleter = Completer(); final FileReader reader = FileReader(); reader.onLoadEnd.listen((e) { - addPickedFile(file, reader.result as Uint8List?, null, null); + ByteBuffer? byteBuffer = reader.result as ByteBuffer?; + addPickedFile(file, byteBuffer?.asUint8List(), null, null); syncCompleter.complete(); }); reader.readAsArrayBuffer(file); From b34d9ddee16afe827bfa24768ffeb895f4eaab8c Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Mon, 8 Apr 2024 13:12:30 +0200 Subject: [PATCH 5/8] resolve conflicts --- pubspec.yaml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pubspec.yaml b/pubspec.yaml index d0b41188..edcbed32 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -15,7 +15,8 @@ dependencies: plugin_platform_interface: ^2.1.4 ffi: ^2.0.1 path: ^1.8.2 - win32: '^5.0.2' + win32: ^5.1.1 + cross_file: ^0.3.3+7 js: ^0.7.1 web: ^0.5.1 From ad868dec864282a1d33bf7c9f23a8ae7d37fbee8 Mon Sep 17 00:00:00 2001 From: Amr Eniou <149420647+amrgetment@users.noreply.github.com> Date: Mon, 8 Apr 2024 13:42:21 +0200 Subject: [PATCH 6/8] remove unused js library --- pubspec.yaml | 1 - 1 file changed, 1 deletion(-) diff --git a/pubspec.yaml b/pubspec.yaml index 7e1e6405..793d744d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -17,7 +17,6 @@ dependencies: path: ^1.8.2 win32: ^5.1.1 cross_file: ^0.3.3+7 - js: ^0.7.1 web: ^0.5.1 dev_dependencies: From 2e150334c7a7d5513ddd3f007270a767ad434c93 Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Tue, 9 Apr 2024 11:42:23 +0200 Subject: [PATCH 7/8] migrate dart:html to package:web --- lib/_internal/file_picker_web.dart | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index d433b198..af82a852 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -119,7 +119,8 @@ class FilePickerWeb extends FilePicker { if (!withData) { final FileReader reader = FileReader(); reader.onLoadEnd.listen((e) { - addPickedFile(file, null, reader.result as String?, null); + String? result = (reader.result as JSString?)?.toDart; + addPickedFile(file, null, result, null); }); reader.readAsDataURL(file); continue; @@ -128,7 +129,7 @@ class FilePickerWeb extends FilePicker { final syncCompleter = Completer(); final FileReader reader = FileReader(); reader.onLoadEnd.listen((e) { - ByteBuffer? byteBuffer = reader.result as ByteBuffer?; + ByteBuffer? byteBuffer = (reader.result as JSArrayBuffer?)?.toDart; addPickedFile(file, byteBuffer?.asUint8List(), null, null); syncCompleter.complete(); }); From f63f7878dd00fbdaca04632708d71c2434bfd461 Mon Sep 17 00:00:00 2001 From: Amr Eniou Date: Wed, 17 Apr 2024 23:21:47 +0200 Subject: [PATCH 8/8] refactor: using types instead of var --- lib/_internal/file_picker_web.dart | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index af82a852..cb432cf2 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -60,8 +60,7 @@ class FilePickerWeb extends FilePicker { Completer?>(); String accept = _fileType(type, allowedExtensions); - HTMLInputElement uploadInput = - document.createElement('input') as HTMLInputElement; + HTMLInputElement uploadInput = HTMLInputElement(); uploadInput.type = 'file'; uploadInput.draggable = true; uploadInput.multiple = allowMultiple; @@ -105,7 +104,7 @@ class FilePickerWeb extends FilePicker { } } - for (var i = 0; i < files.length; i++) { + for (int i = 0; i < files.length; i++) { final File? file = files.item(i); if (file == null) { continue; @@ -162,7 +161,7 @@ class FilePickerWeb extends FilePicker { window.addEventListener('focus', cancelledEventListener.toJS); //Add input element to the page body - var firstChild = _target.firstChild; + Node? firstChild = _target.firstChild; while (firstChild != null) { _target.removeChild(firstChild); firstChild = _target.firstChild;