From 834b64f28318db3ed0eb87d529a1d8102a8bb4ea Mon Sep 17 00:00:00 2001 From: ishaqhassan Date: Tue, 11 Jun 2024 14:13:11 +0500 Subject: [PATCH 1/6] - Fixed on iOS safari --- lib/_internal/file_picker_web.dart | 182 ++++++++++++++++++++++++----- lib/src/utils.dart | 4 + pubspec.yaml | 2 + 3 files changed, 159 insertions(+), 29 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index f43f127a..e770e83f 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -1,11 +1,14 @@ import 'dart:async'; -import 'dart:js_interop'; +import 'package:html/parser.dart'; import 'package:web/web.dart'; +import 'dart:js_interop'; import 'dart:typed_data'; import 'package:file_picker/file_picker.dart'; import 'package:flutter_web_plugins/flutter_web_plugins.dart'; +import '../src/utils.dart'; + class FilePickerWeb extends FilePicker { late Element _target; final String _kFilePickerInputsDomId = '__file_picker_web-file-input'; @@ -60,12 +63,138 @@ class FilePickerWeb extends FilePicker { Completer?>(); String accept = _fileType(type, allowedExtensions); - HTMLInputElement uploadInput = HTMLInputElement(); - uploadInput.type = 'file'; - uploadInput.draggable = true; - uploadInput.multiple = allowMultiple; - uploadInput.accept = accept; - uploadInput.style.display = 'none'; + + // Create a confirmation view + var confirmationView = ( + """ +
+
+
+

Allow to select Resume!

+

Kindly allow us to select resume

+
+
+ +
+ + +
+
+
+
+ """); + + var confirmationViewDocument = parse(confirmationView); + var tDiv = HTMLDivElement(); + tDiv.innerHTML = confirmationView; + document.body?.append(tDiv); + + // Add the confirmation view to the page + //document.body?.children.add(confirmationView); + + var fixedOverlay = document.getElementById('fixed-overlay') as HTMLElement?; + var confirmationModal = document.getElementById('confirmation-modal') as HTMLElement?; + var cancelButton = document.querySelector('#cancel') as HTMLElement?; + var allowButton = document.querySelector('#allow-demo') as HTMLElement?; + var buttonContainer = document.querySelector('#btn-container') as HTMLElement?; + var allowContainer = document.querySelector('#allow-container') as HTMLElement?; + var confirmationTitle = document.querySelector('#confirmation-title') as HTMLElement?; + var confirmationDetail = document.querySelector('#confirmation-detail') as HTMLElement?; + var confirmationModalContentContainer = document.querySelector('#confirmation-modal-content-container') as HTMLElement?; + + fixedOverlay?.style.position = 'fixed'; + fixedOverlay?.style.top = '0'; + fixedOverlay?.style.left = '0'; + fixedOverlay?.style.width = '100vw'; + fixedOverlay?.style.height = '100vh'; + fixedOverlay?.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; + fixedOverlay?.style.zIndex = '999999999999'; + if(!isSafariIos){ + fixedOverlay?.style.opacity = '0'; + } + + confirmationModal?.style.position = 'absolute'; + confirmationModal?.style.top = '50%'; + confirmationModal?.style.left = '50%'; + confirmationModal?.style.transform = 'translate(-50%, -50%)'; + confirmationModal?.style.backgroundColor = '#fff'; + confirmationModal?.style.border = 'none'; // No border as per the image + confirmationModal?.style.borderRadius = '10px'; // Assuming slightly rounded corners + confirmationModal?.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; // Slight shadow for elevation + confirmationModal?.style.width = '80%'; // Assuming a fixed width + + confirmationModalContentContainer?.style.padding = "16px 24px"; + + confirmationTitle?.style.margin = "0px"; + confirmationTitle?.style.marginBottom = "8px"; + confirmationTitle?.style.fontFamily = 'Poppins'; + confirmationTitle?.style.fontWeight = '500'; + confirmationTitle?.style.fontSize = '18px'; + confirmationTitle?.style.color = '#111827'; + + confirmationDetail?.style.margin = "0px"; + confirmationDetail?.style.fontFamily = 'Poppins'; + confirmationDetail?.style.fontWeight = '400'; + confirmationDetail?.style.fontSize = '14px'; + confirmationDetail?.style.color = '#111827'; + + buttonContainer?.style.display = "flex"; + buttonContainer?.style.borderTop = "1px solid #E5E7EB"; + buttonContainer?.style.padding = "16px 24px"; + + allowContainer?.style.position = "relative"; + + cancelButton?.style.backgroundColor = '#fff'; + cancelButton?.style.color = '#333'; + cancelButton?.style.border = '1px solid #ccc'; + cancelButton?.style.borderRadius = '100px'; + cancelButton?.style.padding = '10px 20px'; + cancelButton?.style.cursor = 'pointer'; + cancelButton?.style.marginRight = '10px'; + cancelButton?.style.fontSize = '14px'; + cancelButton?.style.fontFamily = 'Poppins'; + cancelButton?.style.fontWeight = '500'; + cancelButton?.style.color = '#111827'; + + allowButton?.style.backgroundColor = '#00BA52'; + allowButton?.style.color = '#fff'; + allowButton?.style.border = 'none'; + allowButton?.style.borderRadius = '100px'; + allowButton?.style.padding = '10px 20px'; + allowButton?.style.cursor = 'pointer'; + allowButton?.style.fontSize = '14px'; + allowButton?.style.fontFamily = 'Poppins'; + allowButton?.style.fontWeight = '500'; + allowButton?.style.color = '#FFF'; + + // Get the buttons + HTMLInputElement? fileInput = document.querySelector('#allow') as HTMLInputElement?; + fileInput?.accept = accept; + fileInput?.multiple = allowMultiple; + fileInput?.style.opacity = "0"; + fileInput?.style.position = "absolute"; + fileInput?.style.left = "0px"; + fileInput?.style.width = "100%"; + fileInput?.style.height = "100%"; + + // Set the click listeners + fileInput?.onClick.listen((e) { + // Handle the allow button click + print('Allow button clicked'); + // Remove the confirmation view + fixedOverlay?.remove(); + }); + + cancelButton?.onClick.listen((e) { + // Handle the cancel button click + print('Cancel button clicked'); + // Remove the confirmation view + fixedOverlay?.remove(); + }); + + if(!isSafariIos){ + fileInput?.click(); + } bool changeEventTriggered = false; @@ -79,23 +208,27 @@ class FilePickerWeb extends FilePicker { } changeEventTriggered = true; - final FileList files = uploadInput.files!; + final FileList? files = fileInput?.files!; final List pickedFiles = []; void addPickedFile( - File file, + File? file, Uint8List? bytes, String? path, Stream>? readStream, ) { pickedFiles.add(PlatformFile( - name: file.name, + name: file?.name ?? "", path: path, - size: bytes != null ? bytes.length : file.size, + size: bytes != null ? bytes.length : file?.size ?? 0, bytes: bytes, readStream: readStream, )); + if(files == null){ + return; + } + if (pickedFiles.length >= files.length) { if (onFileLoading != null) { onFileLoading(FilePickerStatus.done); @@ -104,14 +237,14 @@ class FilePickerWeb extends FilePicker { } } + if(files == null){ + return; + } for (int i = 0; i < files.length; i++) { final File? file = files.item(i); - if (file == null) { - continue; - } if (withReadStream) { - addPickedFile(file, null, null, _openFileReadStream(file)); + addPickedFile(file, null, null, _openFileReadStream(file!)); continue; } @@ -121,7 +254,7 @@ class FilePickerWeb extends FilePicker { String? result = (reader.result as JSString?)?.toDart; addPickedFile(file, null, result, null); }); - reader.readAsDataURL(file); + reader.readAsDataURL(file!); continue; } @@ -132,7 +265,7 @@ class FilePickerWeb extends FilePicker { addPickedFile(file, byteBuffer?.asUint8List(), null, null); syncCompleter.complete(); }); - reader.readAsArrayBuffer(file); + reader.readAsArrayBuffer(file!); if (readSequential) { await syncCompleter.future; } @@ -153,22 +286,13 @@ class FilePickerWeb extends FilePicker { }); } - uploadInput.onChange.listen(changeEventListener); - uploadInput.addEventListener('change', changeEventListener.toJS); - uploadInput.addEventListener('cancel', cancelledEventListener.toJS); + fileInput?.onChange.listen(changeEventListener); + fileInput?.addEventListener('change', changeEventListener.toJS); + fileInput?.addEventListener('cancel', cancelledEventListener.toJS); // Listen focus event for cancelled window.addEventListener('focus', cancelledEventListener.toJS); - //Add input element to the page body - Node? firstChild = _target.firstChild; - while (firstChild != null) { - _target.removeChild(firstChild); - firstChild = _target.firstChild; - } - _target.children.add(uploadInput); - uploadInput.click(); - final List? files = await filesCompleter.future; return files == null ? null : FilePickerResult(files); diff --git a/lib/src/utils.dart b/lib/src/utils.dart index a62ba1b6..3e6a6b4a 100644 --- a/lib/src/utils.dart +++ b/lib/src/utils.dart @@ -1,3 +1,4 @@ +import 'dart:html' as html; import 'dart:io'; import 'dart:typed_data'; @@ -69,3 +70,6 @@ bool isAlpha(String x) { return 'a'.codeUnitAt(0) <= codeUnit && codeUnit <= 'z'.codeUnitAt(0) || 'A'.codeUnitAt(0) <= codeUnit && codeUnit <= 'Z'.codeUnitAt(0); } + +var webUserAgent = html.window.navigator.userAgent.toLowerCase(); +var isSafariIos = webUserAgent.contains('iphone') || webUserAgent.contains('ipad'); diff --git a/pubspec.yaml b/pubspec.yaml index 42771cb2..76fc7745 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -18,6 +18,8 @@ dependencies: win32: ^5.1.1 cross_file: ^0.3.3+7 web: ^0.5.1 + html: ^0.15.4 + dev_dependencies: lints: ^3.0.0 From f17e88591c15f5057bc344be5795f4c5d1c9acc4 Mon Sep 17 00:00:00 2001 From: ishaqhassan Date: Fri, 19 Jul 2024 13:08:00 +0500 Subject: [PATCH 2/6] migrated to web 1.0.0 --- lib/_internal/file_picker_web.dart | 2 +- pubspec.yaml | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index e770e83f..5812c17b 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -86,7 +86,7 @@ class FilePickerWeb extends FilePicker { var confirmationViewDocument = parse(confirmationView); var tDiv = HTMLDivElement(); - tDiv.innerHTML = confirmationView; + tDiv.innerHTML = confirmationView.toJS; document.body?.append(tDiv); // Add the confirmation view to the page diff --git a/pubspec.yaml b/pubspec.yaml index 76fc7745..edb1736d 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -17,7 +17,7 @@ dependencies: path: ^1.8.2 win32: ^5.1.1 cross_file: ^0.3.3+7 - web: ^0.5.1 + web: ^1.0.0 html: ^0.15.4 From 53c18c6474e57a5934f8a71b30ae03c2c0aceb2c Mon Sep 17 00:00:00 2001 From: ishaqhassan Date: Mon, 19 Aug 2024 12:30:20 +0500 Subject: [PATCH 3/6] Fixed HTML import to unihtml --- lib/src/utils.dart | 9 +++------ pubspec.yaml | 1 + 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/lib/src/utils.dart b/lib/src/utils.dart index 3e6a6b4a..01ae2883 100644 --- a/lib/src/utils.dart +++ b/lib/src/utils.dart @@ -1,9 +1,9 @@ -import 'dart:html' as html; import 'dart:io'; import 'dart:typed_data'; import 'package:file_picker/file_picker.dart'; import 'package:path/path.dart'; +import 'package:universal_html/html.dart' as html; Future> filePathsToPlatformFiles( List filePaths, @@ -11,9 +11,7 @@ Future> filePathsToPlatformFiles( bool withData, ) { return Future.wait( - filePaths - .where((String filePath) => filePath.isNotEmpty) - .map((String filePath) async { + filePaths.where((String filePath) => filePath.isNotEmpty).map((String filePath) async { final file = File(filePath); if (withReadStream) { @@ -67,8 +65,7 @@ Future isExecutableOnPath(String executable) async { bool isAlpha(String x) { int codeUnit = x.codeUnitAt(0); - return 'a'.codeUnitAt(0) <= codeUnit && codeUnit <= 'z'.codeUnitAt(0) || - 'A'.codeUnitAt(0) <= codeUnit && codeUnit <= 'Z'.codeUnitAt(0); + return 'a'.codeUnitAt(0) <= codeUnit && codeUnit <= 'z'.codeUnitAt(0) || 'A'.codeUnitAt(0) <= codeUnit && codeUnit <= 'Z'.codeUnitAt(0); } var webUserAgent = html.window.navigator.userAgent.toLowerCase(); diff --git a/pubspec.yaml b/pubspec.yaml index 05326ee9..3ca3042a 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -19,6 +19,7 @@ dependencies: cross_file: ^0.3.3+7 web: ^1.0.0 html: ^0.15.4 + universal_html: ^2.2.4 dev_dependencies: From 16902452af87677f56e25d821302ac59f9afc16d Mon Sep 17 00:00:00 2001 From: ishaqhassan Date: Wed, 19 Mar 2025 09:19:26 +0500 Subject: [PATCH 4/6] Refactor: Simplify FilePickerWeb and update confirmation view - Removed unnecessary import of `html/parser.dart`. - Removed the `_ensureInitialized` function and the related `_kFilePickerInputsDomId`. - Removed the private variable `_target`. - Refactored code to remove parsing of HTML string into document object. - Added a check for null in `_addFileToResult` - added a null check if the file attribute is not null. - Added a null check for the files attribute in the `pickFiles` function. - improved conditional statement for checking isSafariIos --- lib/_internal/file_picker_web.dart | 83 +++++++++++++----------------- 1 file changed, 36 insertions(+), 47 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index fe67cd37..cd2124b4 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -1,6 +1,4 @@ import 'dart:async'; -import 'package:html/parser.dart'; -import 'package:web/web.dart'; import 'dart:js_interop'; import 'dart:typed_data'; @@ -12,33 +10,15 @@ import 'package:web/web.dart'; import '../src/utils.dart'; class FilePickerWeb extends FilePicker { - late Element _target; - final String _kFilePickerInputsDomId = '__file_picker_web-file-input'; final int _readStreamChunkSize = 1000 * 1000; // 1 MB - FilePickerWeb._() { - _target = _ensureInitialized(_kFilePickerInputsDomId); - } + FilePickerWeb._(); static void registerWith(Registrar registrar) { FilePicker.platform = FilePickerWeb._(); } - /// Initializes a DOM container where we can host input elements. - Element _ensureInitialized(String id) { - Element? target = document.querySelector('#$id'); - if (target == null) { - final Element targetElement = document.createElement( - 'flt-file-picker-inputs', - )..id = id; - - document.querySelector('body')!.children.add(targetElement); - target = targetElement; - } - return target; - } - @override Future pickFiles({ String? dialogTitle, @@ -65,8 +45,7 @@ class FilePickerWeb extends FilePicker { String accept = _fileType(type, allowedExtensions); // Create a confirmation view - var confirmationView = ( - """ + var confirmationView = ("""
@@ -84,7 +63,6 @@ class FilePickerWeb extends FilePicker {
"""); - var confirmationViewDocument = parse(confirmationView); var tDiv = HTMLDivElement(); tDiv.innerHTML = confirmationView.toJS; document.body?.append(tDiv); @@ -93,14 +71,20 @@ class FilePickerWeb extends FilePicker { //document.body?.children.add(confirmationView); var fixedOverlay = document.getElementById('fixed-overlay') as HTMLElement?; - var confirmationModal = document.getElementById('confirmation-modal') as HTMLElement?; + var confirmationModal = + document.getElementById('confirmation-modal') as HTMLElement?; var cancelButton = document.querySelector('#cancel') as HTMLElement?; var allowButton = document.querySelector('#allow-demo') as HTMLElement?; - var buttonContainer = document.querySelector('#btn-container') as HTMLElement?; - var allowContainer = document.querySelector('#allow-container') as HTMLElement?; - var confirmationTitle = document.querySelector('#confirmation-title') as HTMLElement?; - var confirmationDetail = document.querySelector('#confirmation-detail') as HTMLElement?; - var confirmationModalContentContainer = document.querySelector('#confirmation-modal-content-container') as HTMLElement?; + var buttonContainer = + document.querySelector('#btn-container') as HTMLElement?; + var allowContainer = + document.querySelector('#allow-container') as HTMLElement?; + var confirmationTitle = + document.querySelector('#confirmation-title') as HTMLElement?; + var confirmationDetail = + document.querySelector('#confirmation-detail') as HTMLElement?; + var confirmationModalContentContainer = document + .querySelector('#confirmation-modal-content-container') as HTMLElement?; fixedOverlay?.style.position = 'fixed'; fixedOverlay?.style.top = '0'; @@ -109,7 +93,7 @@ class FilePickerWeb extends FilePicker { fixedOverlay?.style.height = '100vh'; fixedOverlay?.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'; fixedOverlay?.style.zIndex = '999999999999'; - if(!isSafariIos){ + if (!isSafariIos) { fixedOverlay?.style.opacity = '0'; } @@ -119,8 +103,10 @@ class FilePickerWeb extends FilePicker { confirmationModal?.style.transform = 'translate(-50%, -50%)'; confirmationModal?.style.backgroundColor = '#fff'; confirmationModal?.style.border = 'none'; // No border as per the image - confirmationModal?.style.borderRadius = '10px'; // Assuming slightly rounded corners - confirmationModal?.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; // Slight shadow for elevation + confirmationModal?.style.borderRadius = + '10px'; // Assuming slightly rounded corners + confirmationModal?.style.boxShadow = + '0 4px 6px rgba(0, 0, 0, 0.1)'; // Slight shadow for elevation confirmationModal?.style.width = '80%'; // Assuming a fixed width confirmationModalContentContainer?.style.padding = "16px 24px"; @@ -168,7 +154,8 @@ class FilePickerWeb extends FilePicker { allowButton?.style.color = '#FFF'; // Get the buttons - HTMLInputElement? fileInput = document.querySelector('#allow') as HTMLInputElement?; + HTMLInputElement? fileInput = + document.querySelector('#allow') as HTMLInputElement?; fileInput?.accept = accept; fileInput?.multiple = allowMultiple; fileInput?.style.opacity = "0"; @@ -192,7 +179,7 @@ class FilePickerWeb extends FilePicker { fixedOverlay?.remove(); }); - if(!isSafariIos){ + if (!isSafariIos) { fileInput?.click(); } @@ -218,23 +205,25 @@ class FilePickerWeb extends FilePicker { Stream>? readStream, ) { String? blobUrl; - if (bytes != null && bytes.isNotEmpty) { + if (file != null && bytes != null && bytes.isNotEmpty) { final blob = Blob([bytes.toJS].toJS, BlobPropertyBag(type: file.type)); blobUrl = URL.createObjectURL(blob); } - pickedFiles.add(PlatformFile( - - name: file.name, - path: path ?? blobUrl, - size: bytes != null ? bytes.length : file.size, - - bytes: bytes, - readStream: readStream, - )); + if (file != null) { + pickedFiles.add( + PlatformFile( + name: file.name, + path: path ?? blobUrl, + size: bytes != null ? bytes.length : file.size, + bytes: bytes, + readStream: readStream, + ), + ); + } - if(files == null){ + if (files == null) { return; } @@ -246,7 +235,7 @@ class FilePickerWeb extends FilePicker { } } - if(files == null){ + if (files == null) { return; } for (int i = 0; i < files.length; i++) { From 016259066c9ff1e5cc5fe0cd19cd9490e6356170 Mon Sep 17 00:00:00 2001 From: ishaqhassan Date: Wed, 19 Mar 2025 09:22:33 +0500 Subject: [PATCH 5/6] Update the confirmation message in file picker for selecting single or multiple files. --- 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 cd2124b4..6a9ee811 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -49,8 +49,8 @@ class FilePickerWeb extends FilePicker {
-

Allow to select Resume!

-

Kindly allow us to select resume

+

Allow to select File${allowMultiple ? 's' : ''}!

+

Kindly allow us to select File${allowMultiple ? 's' : ''} from library

From 93676fbe096eda2b0f2ab82d2666fb823e5c929d Mon Sep 17 00:00:00 2001 From: ishaqhassan Date: Wed, 19 Mar 2025 09:44:35 +0500 Subject: [PATCH 6/6] Refactor: Update confirmation modal styles for iOS dialog consistency The confirmation modal's styles have been updated to more closely match the style of iOS dialogs. This includes changes to the modal's positioning, background color, borders, shadows, and overall width. The content container, title, detail text, and button container have all been adjusted to improve visual consistency and alignment. Button styles for the "Cancel" and "Allow" actions have also been refined. Added "Don't Allow" and "Allow" text to the buttons. --- lib/_internal/file_picker_web.dart | 126 +++++++++++++++++------------ 1 file changed, 76 insertions(+), 50 deletions(-) diff --git a/lib/_internal/file_picker_web.dart b/lib/_internal/file_picker_web.dart index 6a9ee811..bc743a72 100644 --- a/lib/_internal/file_picker_web.dart +++ b/lib/_internal/file_picker_web.dart @@ -40,7 +40,7 @@ class FilePickerWeb extends FilePicker { } final Completer?> filesCompleter = - Completer?>(); + Completer?>(); String accept = _fileType(type, allowedExtensions); @@ -72,17 +72,17 @@ class FilePickerWeb extends FilePicker { var fixedOverlay = document.getElementById('fixed-overlay') as HTMLElement?; var confirmationModal = - document.getElementById('confirmation-modal') as HTMLElement?; + document.getElementById('confirmation-modal') as HTMLElement?; var cancelButton = document.querySelector('#cancel') as HTMLElement?; var allowButton = document.querySelector('#allow-demo') as HTMLElement?; var buttonContainer = - document.querySelector('#btn-container') as HTMLElement?; + document.querySelector('#btn-container') as HTMLElement?; var allowContainer = - document.querySelector('#allow-container') as HTMLElement?; + document.querySelector('#allow-container') as HTMLElement?; var confirmationTitle = - document.querySelector('#confirmation-title') as HTMLElement?; + document.querySelector('#confirmation-title') as HTMLElement?; var confirmationDetail = - document.querySelector('#confirmation-detail') as HTMLElement?; + document.querySelector('#confirmation-detail') as HTMLElement?; var confirmationModalContentContainer = document .querySelector('#confirmation-modal-content-container') as HTMLElement?; @@ -97,65 +97,91 @@ class FilePickerWeb extends FilePicker { fixedOverlay?.style.opacity = '0'; } + // Updated styles to match the ios style dialog confirmationModal?.style.position = 'absolute'; confirmationModal?.style.top = '50%'; confirmationModal?.style.left = '50%'; confirmationModal?.style.transform = 'translate(-50%, -50%)'; confirmationModal?.style.backgroundColor = '#fff'; - confirmationModal?.style.border = 'none'; // No border as per the image - confirmationModal?.style.borderRadius = - '10px'; // Assuming slightly rounded corners - confirmationModal?.style.boxShadow = - '0 4px 6px rgba(0, 0, 0, 0.1)'; // Slight shadow for elevation - confirmationModal?.style.width = '80%'; // Assuming a fixed width + confirmationModal?.style.border = 'none'; + confirmationModal?.style.borderRadius = '12px'; + confirmationModal?.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.15)'; + confirmationModal?.style.width = '320px'; + confirmationModal?.style.maxWidth = '90%'; - confirmationModalContentContainer?.style.padding = "16px 24px"; + // Content container styling updated + confirmationModalContentContainer?.style.padding = "20px 24px"; + confirmationModalContentContainer?.style.textAlign = "center"; + // Updated title styling confirmationTitle?.style.margin = "0px"; confirmationTitle?.style.marginBottom = "8px"; - confirmationTitle?.style.fontFamily = 'Poppins'; - confirmationTitle?.style.fontWeight = '500'; - confirmationTitle?.style.fontSize = '18px'; - confirmationTitle?.style.color = '#111827'; + confirmationTitle?.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'; + confirmationTitle?.style.fontWeight = '600'; + confirmationTitle?.style.fontSize = '17px'; + confirmationTitle?.style.color = '#000'; + confirmationTitle?.style.textAlign = "center"; + // Updated detail text styling confirmationDetail?.style.margin = "0px"; - confirmationDetail?.style.fontFamily = 'Poppins'; + confirmationDetail?.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'; confirmationDetail?.style.fontWeight = '400'; - confirmationDetail?.style.fontSize = '14px'; - confirmationDetail?.style.color = '#111827'; + confirmationDetail?.style.fontSize = '13px'; + confirmationDetail?.style.color = '#666'; + confirmationDetail?.style.textAlign = "center"; + confirmationDetail?.style.lineHeight = "1.4"; + // Updated button container styling buttonContainer?.style.display = "flex"; buttonContainer?.style.borderTop = "1px solid #E5E7EB"; - buttonContainer?.style.padding = "16px 24px"; - + buttonContainer?.style.padding = "0"; + buttonContainer?.style.marginTop = "20px"; + buttonContainer?.style.flexDirection = "row"; // Ensure horizontal layout + buttonContainer?.style.width = "100%"; + + // Updated cancel button styling + cancelButton?.style.backgroundColor = 'transparent'; + cancelButton?.style.color = '#007AFF'; + cancelButton?.style.border = 'none'; + cancelButton?.style.borderRadius = '0'; + cancelButton?.style.borderRight = '1px solid #E5E7EB'; // Add divider line + cancelButton?.style.padding = '12px 0'; + cancelButton?.style.cursor = 'pointer'; + cancelButton?.style.fontSize = '16px'; + cancelButton?.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'; + cancelButton?.style.fontWeight = '400'; + cancelButton?.style.flex = '1'; // Make it take up half the width + cancelButton?.style.textAlign = 'center'; + cancelButton?.style.margin = '0'; + + // Make the allow container take up the right half allowContainer?.style.position = "relative"; + allowContainer?.style.flex = "1"; // Make it take up half the width - cancelButton?.style.backgroundColor = '#fff'; - cancelButton?.style.color = '#333'; - cancelButton?.style.border = '1px solid #ccc'; - cancelButton?.style.borderRadius = '100px'; - cancelButton?.style.padding = '10px 20px'; - cancelButton?.style.cursor = 'pointer'; - cancelButton?.style.marginRight = '10px'; - cancelButton?.style.fontSize = '14px'; - cancelButton?.style.fontFamily = 'Poppins'; - cancelButton?.style.fontWeight = '500'; - cancelButton?.style.color = '#111827'; - - allowButton?.style.backgroundColor = '#00BA52'; - allowButton?.style.color = '#fff'; + // Update allow button to span full width of its container + allowButton?.style.backgroundColor = 'transparent'; + allowButton?.style.color = '#007AFF'; allowButton?.style.border = 'none'; - allowButton?.style.borderRadius = '100px'; - allowButton?.style.padding = '10px 20px'; + allowButton?.style.borderRadius = '0'; + allowButton?.style.padding = '12px 0'; allowButton?.style.cursor = 'pointer'; - allowButton?.style.fontSize = '14px'; - allowButton?.style.fontFamily = 'Poppins'; - allowButton?.style.fontWeight = '500'; - allowButton?.style.color = '#FFF'; + allowButton?.style.fontSize = '16px'; + allowButton?.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif'; + allowButton?.style.fontWeight = '600'; + allowButton?.style.width = '100%'; // Full width of container + allowButton?.style.textAlign = 'center'; + + if (cancelButton != null) { + cancelButton.innerText = "Don't Allow"; + } + + if (allowButton != null) { + allowButton.innerText = "Allow"; + } // Get the buttons HTMLInputElement? fileInput = - document.querySelector('#allow') as HTMLInputElement?; + document.querySelector('#allow') as HTMLInputElement?; fileInput?.accept = accept; fileInput?.multiple = allowMultiple; fileInput?.style.opacity = "0"; @@ -199,15 +225,15 @@ class FilePickerWeb extends FilePicker { final List pickedFiles = []; void addPickedFile( - File? file, - Uint8List? bytes, - String? path, - Stream>? readStream, - ) { + File? file, + Uint8List? bytes, + String? path, + Stream>? readStream, + ) { String? blobUrl; if (file != null && bytes != null && bytes.isNotEmpty) { final blob = - Blob([bytes.toJS].toJS, BlobPropertyBag(type: file.type)); + Blob([bytes.toJS].toJS, BlobPropertyBag(type: file.type)); blobUrl = URL.createObjectURL(blob); } @@ -392,4 +418,4 @@ class FilePickerWeb extends FilePicker { } } } -} +} \ No newline at end of file