Pasting images by link is not working

[SankethBK]

We use Flutter Quill for rich text editor. It has support for adding images from gallery or in the form of links. Pasting images by link used to work earlier, but something might have changed in recent upgrade, "Ok" button disappears after passing image link or it appears and not clickable.

image_links_2.webm

We are using flutter_quill locally. Relevant widget to look for is LinkDialogState in packages/flutter_quill/flutter_quill_extensions/lib/embeds/toolbar/image_video_utils.dart. It seems to have some regex based validation for links, which is somehow rejecting valid links as well

[TomerPacific]

@SankethBK - Can I help with this issue?

[SankethBK]

Yes @TomerPacific , assigning this to you

[TomerPacific]

@SankethBK - I have replicated the flow you showed in the video and below are my findings:

• The regex provided by the package validates the input and does find a match
• For some reason, the Ok button disappears, but you can still press on it
• When you do so, there is an exception thrown of Invalid Image Data

E/FlutterJNI(31840): Failed to decode image
E/FlutterJNI(31840): android.graphics.ImageDecoder$DecodeException: Failed to create image decoder with message 'unimplemented'Input contained an error.
E/FlutterJNI(31840):    at android.graphics.ImageDecoder.nCreate(Native Method)
E/FlutterJNI(31840):    at android.graphics.ImageDecoder.access$200(ImageDecoder.java:173)
E/FlutterJNI(31840):    at android.graphics.ImageDecoder$ByteBufferSource.createImageDecoder(ImageDecoder.java:250)
E/FlutterJNI(31840):    at android.graphics.ImageDecoder.decodeBitmapImpl(ImageDecoder.java:1847)
E/FlutterJNI(31840):    at android.graphics.ImageDecoder.decodeBitmap(ImageDecoder.java:1840)
E/FlutterJNI(31840):    at io.flutter.embedding.engine.FlutterJNI.decodeImage(FlutterJNI.java:554)

======== Exception caught by image resource service ================================================
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data

When the exception was thrown, this was the stack: 
#0      _futurize (dart:ui/painting.dart:6950:5)
#1      ImageDescriptor.encoded (dart:ui/painting.dart:6764:12)
#2      instantiateImageCodecWithSize (dart:ui/painting.dart:2307:60)
#3      PaintingBinding.instantiateImageCodecWithSize (package:flutter/src/painting/binding.dart:182:15)
#4      NetworkImage._loadAsync (package:flutter/src/painting/_network_image_io.dart:153:22)
<asynchronous suspension>
Image provider: NetworkImage("https://en.m.wikipedia.org/wiki/File:Cat_August_2010-4.jpg", scale: 1.0)
Image key: NetworkImage("https://en.m.wikipedia.org/wiki/File:Cat_August_2010-4.jpg", scale: 1.0)

What version of flutter_quill are you using? I looked inside pubspec.yaml, but I saw you have it as a local package. Looking at the versions of flutteer_quill, I see that it is being updated pretty regularly.

Let me know how you would like me to proceed here.

[SankethBK]

Hi @TomerPacific , thanks for detailed info. We are using flutter-quill 7.4.0 which was released around 2 months ago. We are using it as local package because it has some minor bugs related to image resize so had to comment that out.

[SankethBK]

Also I noticed this error is intermittent, as you mentioned the "Ok" button disappears but its still clickable. I was able to reproduce the above error once, now it seems to be somehow working.

image_link_intermittent_error_compressed.webm

Are you able to reproduce this error every time you paste an image or is it intermittent in your case as well?

[TomerPacific]

@SankethBK - Happens to me every time I add an image. Would you consider upgrading the package as the current one is 7.4.9? This issue might have been fixed. Or alternatively, we can file an issue for flutter_quill.

Let me know what you think.

[SankethBK]

I tried with a different image URL, and was able to get this error everytime

Previous image (working fine): https://imgur.com/PumJ9nC.png Current image (Getting error): https://en.wikipedia.org/wiki/File:ChessStartingPosition.jpg

image_link_2.webm

Can you try the above 2 image links and check if you're getting same behaviour. I think it might have something to do with image size or network speed

[SankethBK]

My bad, even though the wikipedia link ends with .jpg its not an actual image, its a webpage. This is the link to actual image i meant to copy https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/ChessStartingPosition.jpg/440px-ChessStartingPosition.jpg

This one seems to work, but the first time i tried it failed, even though there wasn't any error. But instead of showing the read box with invalid image data, it was showing the link of the image instead

image_2_compressed.webm

[SankethBK]

I see in your case also this link points to a webpage even though it ends with jpg https://en.m.wikipedia.org/wiki/File:Cat_August_2010-4.jpg

On extracting the link from image i got this link which seems to be working fine https://upload.wikimedia.org/wikipedia/commons/1/15/Cat_August_2010-4.jpg

[TomerPacific]

@SankethBK - Tried the link you posted above (https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/ChessStartingPosition.jpg/440px-ChessStartingPosition.jpg) and while the Ok button disappeared, the image was added successfully the first time.

Using the extracted link for the image I showed, also works.

So, the issue here seems to be that the Ok button disappears.

[SankethBK]

Yes

[TomerPacific]

@SankethBK - But this seems to be an issue in the package itself. As you mentioned. you are not using the latest version, so either:

1. We can upgrade to the latest version
2. File an issue

[SankethBK]

@TomerPacific if its a simple fix in local package its better to fix it ourselves, otherwise we can try upgrading the package

[TomerPacific]

@SankethBK - I found out the problem. The Text widget inside the TextButton has a style of widget.dialogTheme?.labelTextStyle. This is null sometimes, hence no style is applied. Therefore, the Ok button disappears.

When I amended the code to look like this:

TextButton(
          onPressed: _link.isNotEmpty && _linkRegExp.hasMatch(_link)
              ? _applyLink
              : null,
          child: Text(
            'Ok'.i18n,
             style: widget.dialogTheme?.labelTextStyle == null ?
             TextStyle(color: Colors.grey) :
             widget.dialogTheme?.labelTextStyle,
          ),
        ),

Everything works.

Let me know if my proposal for a solution is valid.

[SankethBK]

Looks good @TomerPacific . Instead of showing it as grey colored which kind of conveys that button is greyed out and unclickable. Can we change it to black?

[TomerPacific]

@SankethBK - Sure. PR opened https://github.com/SankethBK/diaryvault/pull/88