[QUESTION] How can I pick images from gallery directly?

[victor-bao]

Hi,
In my app, my users do not have chance to input url for images and I am wondering whether I can remove this window.

My questions:

Is it possible to remove this window without modifying original code of the library? One way I thought was I should define two custom bottoms for image upload and video upload, but after that, how can I pass the images link or base64 data to controller and insert into editor because I can not use mediaUploadInterceptor?

thanks for help!

[tneotia]

Yes you can do this:

            HtmlEditor(
                controller: controller,
                htmlToolbarOptions: HtmlToolbarOptions(
                  onButtonPressed: (ButtonType type, bool? status,
                      Function()? updateStatus) {
                    if (type == ButtonType.picture) {
                       showDialog(); //show your custom dialog here or directly open image picker
                       return false; //this tells the plugin we handled image in a custom way
                    }
                    return true; //this tells the plugin to handle everything else as normal
                  },
                ),
              ),

and in the dialog complete method

//upload base64 data here
controller.insertNetworkImage(url); //to insert via URL
controller.insertHtml("<img src='data:image/$extension;base64,$base64Data'/>"); //to insert base64

Hope it helps! If it doesn't work or you have any other questions let me know.

[weebsproject]

String base64Data = base64.encode(file.bytes!);
String base64Image =
"""<audio src="data:audio/${file.extension};base64,$base64Data" data-filename="${file.name}" style="width: 100% />""";
controller.insertHtml(base64Image);

above code to resize image into 100% in base 64 .

is there any way to resize image on insertNetworkImage using custom html tags?

[tneotia]

Yes, just make <img> src attribute into the network URL of the image, and apply your desired width.

[dong336]

That's how I wrote it.

                  onButtonPressed:
                      (ButtonType type, bool? status, Function? updateStatus) {
                    if (type == ButtonType.picture) {
                      _pickAndInsertImage();
                      return false;
                    }

...
...

  Future<bool> _pickAndInsertImage() async {
    final XFile? image = await _imagePicker.pickImage(source: ImageSource.gallery);

    if (image != null) {
      final String extension = image.path.split('.').last;
      final bytes = await image.readAsBytes();
      final base64Data = base64Encode(bytes);

      controller.insertHtml("<img width='40%' src='data:image/$extension;base64,$base64Data'/>");

      return true;
    }

    return false;
  }