[英]Flutter web upload file cancel event
我在 Flutter 中開發了一個 web 應用程序,我想從文件系統加載文件。 為此,我使用以下代碼:
static Future<Uint8List> chooseImage(dynamic parent, dynamic provider) async {
Uint8List uploadedImage;
final completer = Completer<List<String>>();
InputElement uploadInput = FileUploadInputElement();
uploadInput.accept = 'image/*';
uploadInput.click();
uploadInput.addEventListener('change', (e) async {
final files = uploadInput.files;
Iterable<Future<String>> resultsFutures = files.map((file) {
final reader = FileReader();
reader.readAsDataUrl(file);
reader.onError.listen((error) => completer.completeError(error));
return reader.onLoad.first.then((_) async {
String result = reader.result as String;
uploadedImage = base64Decode(result.substring(22, result.length));
return reader.result as String;
});
});
final results = await Future.wait(resultsFutures);
completer.complete(results);
});
document.body.append(uploadInput);
final List<String> images = await completer.future;
parent.setState(() {
parent.pickedImage = uploadedImage;
});
uploadInput.remove();
return uploadedImage;
}
在我的應用程序中,當用戶在此彈出窗口中按下取消按鈕時,我需要處理這種情況:
我添加了以下監聽器:onFocus、onSuspen、onSubmit、onEnded、onAbort,但是當按下取消按鈕時,這些事件都不會被觸發。
如何處理彈出取消?
您已經可以在 package file_picker的 web 實現中找到管理此類事件的方法。
因為根據您使用的瀏覽器的不同,取消事件的管理方式可能不同,所以最通用的解決方案是依賴 window 中的focus
事件的偵聽器,因此當您在沒有加載任何數據的情況下失去對文件選擇器 window 的關注時,它將以null
值完成您的未來。
import 'dart:html' as html;
import 'dart:async';
Future<html.File?> pickFile(String type) async {
final completer = Completer<List<html.File>?>();
final input = html.FileUploadInputElement() as html.InputElement;
input.accept = '$type/*';
var changeEventTriggered = false;
void changeEventListener(html.Event e) {
if (changeEventTriggered) return;
changeEventTriggered = true;
final files = input.files!;
final resultFuture = files.map<Future<html.File>>((file) async {
final reader = html.FileReader();
reader.readAsDataUrl(file);
reader.onError.listen(completer.completeError);
return file;
});
Future.wait(resultFuture).then((results) => completer.complete(results));
}
void cancelledEventListener(html.Event e) {
html.window.removeEventListener('focus', cancelledEventListener);
// This listener is called before the input changed event,
// and the `uploadInput.files` value is still null
// Wait for results from js to dart
Future.delayed(Duration(milliseconds: 500)).then((value) {
if (!changeEventTriggered) {
changeEventTriggered = true;
completer.complete(null);
}
});
}
input.onChange.listen(changeEventListener);
input.addEventListener('change', changeEventListener);
// Listen focus event for cancelled
html.window.addEventListener('focus', cancelledEventListener);
input.click();
final results = await completer.future;
if (results == null || results.isEmpty) return null;
return results.first;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.