Embed image in document

[pamafe1976]

Hi,

Is it possible to embed an image in a document in base64, instead of just embedding the link? I want all the image data to be inside the doc.
Can it be done with flutter_quill_extensions or do I need to create my own embed block for this?

Regards

[md-rifatkhan]

@pamafe1976 Did you find the solution?

[md-rifatkhan]

I've done it with:

  Future<void> insertImageFromGallery() async {
    final picker = ImagePicker();
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);

    if (pickedFile != null) {
      final bytes = await File(pickedFile.path).readAsBytes();
      final base64Str = base64Encode(bytes);
      final mimeType = getFileExtension(pickedFile.path) ;

      final dataUri = 'data:$mimeType;base64,$base64Str';

      final int insertOffset = controller.selection.extentOffset;

      controller.document.insert(
        insertOffset,
        BlockEmbed.image(dataUri), // This is the trick
      );

      controller.updateSelection(
        TextSelection.collapsed(offset: insertOffset + 2),
        ChangeSource.local,
      );
    }
  }

  String getFileExtension(String fileName) {
    return ".${fileName.split('.').last}".toLowerCase();
  }

and

 embedBuilders: [
          ...FlutterQuillEmbeds.editorBuilders(

            imageEmbedConfig: QuillEditorImageEmbedConfig(
              imageProviderBuilder: (context, imageUrl) {
                if (imageUrl.startsWith('data:image/')) {
                  try {
                    final base64Data = imageUrl.split(',')[1]; // skip the "data:image/png;base64,"
                    final bytes = base64Decode(base64Data);
                    return MemoryImage(bytes);
                  } catch (e) {
                    print("Invalid base64 image: $e");
                    return null;
                  }
                } else if (imageUrl.startsWith('assets/')) {
                  return AssetImage(imageUrl);
                }
                return null;
              },
            ),

            videoEmbedConfig: QuillEditorVideoEmbedConfig(
              customVideoBuilder: (videoUrl, readOnly) {
                return null;
              },
            ),
          ),
          TimeStampEmbedBuilder(),

        ],