deakjahn / flutter_dropzone

A drag-and-drop Flutter plugin (Web). Only web and only from outside into Flutter.
https://pub.dev/packages/flutter_dropzone
85 stars 36 forks source link

Circular Progress Indicator always running on Chrome #52

Open Xebache opened 2 years ago

Xebache commented 2 years ago

Hi... I have an issue with the flutter_dropzone 3.0.5 plugin... When I launch it on Chrome, it seems it is always loading, making it impossible to drop a file in the dropzone area or even when clicking the button; I don't have the problem when running Edge... Any advice ??? Here is my code:

class UploadDocument extends StatefulWidget {
  final logger = getLogger("UploadDocument view");
  UploadDocument({Key? key}) : super(key: key);

  @override
  State<UploadDocument> createState() => _UploadDocumentState();
}

class _UploadDocumentState extends State<UploadDocument> {
  late DropzoneViewController controller;

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 8,
      child: Padding(
        padding: const EdgeInsets.all(50),
        child: Container(
            color: ProjectColors.lighterAccentColor,
            child: Stack(
              children: [
                DropzoneView(
                  //onDrop: (dynamic ev) => widget.logger.i('Drop: $ev'),
                  onCreated: (controller) => this.controller = controller,
                  onDrop: acceptFile,
                ),
                Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      const Icon(
                        Icons.cloud_upload,
                        color: ProjectColors.blackBgExtraLighter,
                        size: 50,
                      ),
                      const Text(
                        "Drop Files Here",
                        style: TextStyle(
                            color: ProjectColors.blackBgExtraLighter,
                            fontSize: 20),
                      ),
                      const SizedBox(height: 20),
                      ElevatedButton.icon(
                        style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all<Color>(
                                ProjectColors.blackBgExtraLighter),
                            padding: MaterialStateProperty.all<EdgeInsets>(
                                const EdgeInsets.symmetric(
                                    horizontal: 20, vertical: 15))),
                        onPressed: () async {
                          final events = await controller.pickFiles();
                          if (events.isEmpty) return;
                          acceptFile(events.first);
                        },
                        icon: const Icon(Icons.search, size: 32),
                        label: const Text("Choose File",
                            style: TextStyle(
                                color: ProjectColors.almostWhite,
                                fontSize: 15)),
                      ),
                    ],
                  ),
                ),
              ],
            )),
      ),
    );
  }

  Future acceptFile(dynamic event) async {
    final name = event.name;
    final mime = await controller.getFileMIME(event);
    final bytes = await controller.getFileSize(event);
    final url = await controller.createFileUrl(event);

    widget.logger.i('name: $name');
    widget.logger.i('mime: $mime');
    widget.logger.i('bytes: $bytes');
    widget.logger.i('url: $url');
  }
}
deakjahn commented 2 years ago

Do you get the same log printouts in the console, or some of them are missing?

Xebache commented 2 years ago

actually I dont have any on chrome; i cannot drop the file in the dropzone but it works fine on edge...

Xebache commented 2 years ago

okay, i just went a bit further with the implementation and it now works fine ! I just don't know what I did to make it work (or what I did bad to make it not work!)

Xebache commented 2 years ago

I can post you the complete widget if you're interested but there's nothing crazy in it!

blackbeario commented 2 years ago

I'm having the same issue with both the code in this issue and the example code.

I'm 99% sure it's because the DropzoneViewController isn't completing, but I'm not sure why it isn't.

@Xebache please post your full code.

blackbeario commented 2 years ago

Solution: For me this ended up just needing to stop and restart my Chrome debugger. I added the package to an already running debug session which caused the problem. Stopping/starting fixed it, and I suspect that's what happened for @Xebache too.

Xebache commented 2 years ago

@blackbeario you must be right with the debug session :// I'm running it since and have no worries at all; I can even upload multiple files... smooth as butter! The way i've implemented it is above: 2lines => onCreated & onDrop...