I could not load a Blob from a URL in a web environment.

When I use the following on the web, I get the following error

 Padding(
    padding:  const EdgeInsets.symmetric(vertical: 15),
    child: DropTarget(
      onDragDone: (detail) {
        onDragFile(detail.files);
      },
      child: Container(
          height: 180,
            color: dragging
                ? Colors.blue
                : Colors.black26,
            child: Center(
              child: Column(
                mainAxisAlignment:
                    MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    widget.title,
                    style: const TextStyle(
                      fontSize: 24,
                      fontWeight:
                          FontWeight.bold,
                    ),
                  ),
                  const SizedBox(height: 10),
                ],
              ),
            ),
          )
  )),

Future<void> onDragFile(List<XFile> files) async {
    for (final file in files) {
      try {
        Uint8List fileBytes = await file.readAsBytes();

        bool addedSuccessfully = await addFileWithTotalSizeAndCountCheck(
            fileBytes, file.name, false);
        if (!addedSuccessfully) {
          break;
        }
      } catch (e) {
        print('Error reading file ${file.name}: $e');
        break;
      }
    }
  }

Error reading file 2024-05-08 9.47.35.png: Exception: Could not load Blob from its URL. Has it been revoked?

Is there any solution?

Start with the web drag-and-drop path shown in the issue, especially DropTarget and onDragFile, and reproduce the failure from file.readAsBytes(). Investigate why the Blob URL is unavailable; done means dragged files can be read successfully in the web environment without the reported exception.