[QUESTION] Boring text upload message in the top left corner of the page

[andeersonluiz]

Hello, i'm using the html-editor and ever when do upload image in text edditing an text is showed in the top left side from page saying "Find file - NameFile ". How i remove it? The image bellow show the message in my page.

My CustomHtmlEditor:

return Theme(
  data: ThemeData(
      primaryColor: Colors.red,
      selectedRowColor: Colors.red,
      textTheme: Theme.of(context).textTheme.apply(
            bodyColor: Theme.of(context).primaryColor,
            displayColor: Theme.of(context).primaryColor,
            decorationColor: Theme.of(context).primaryColor,
          )),
  child: HtmlEditor(
    controller: controller,
    htmlEditorOptions: HtmlEditorOptions(
      hint: "Escreva o texto aqui...",
      initialText: initialText,
    ),
    otherOptions: OtherOptions(
        height: 400,
        ),
    callbacks: Callbacks(
      onChange: onChange,
    ),
    htmlToolbarOptions: HtmlToolbarOptions(
        buttonFocusColor: Theme.of(context).primaryColor,
        buttonColor: Theme.of(context).primaryColor,
        buttonBorderColor: Colors.black,
        buttonFillColor: Theme.of(context).backgroundColor,
        buttonSelectedColor: Theme.of(context).primaryColor,
        dropdownFocusColor: Theme.of(context).primaryColor,
        textStyle: Theme.of(context)
            .textTheme
            .caption!
            .copyWith(color: Theme.of(context).primaryColor),
        toolbarType: ToolbarType.nativeGrid,
        defaultToolbarButtons: [
          StyleButtons(),
          FontSettingButtons(fontSizeUnit: false),
          FontButtons(
              clearAll: false, superscript: false, subscript: false),
          ParagraphButtons(
              increaseIndent: false,
              decreaseIndent: false,
              textDirection: false,
              lineHeight: false,
              caseConverter: false),
          InsertButtons(
            otherFile: false,
          ),
        ]),
  ),
);

[tneotia]

Hi, which web renderer are you using when building the page? I suggest to use the html web renderer.

See here: https://github.com/tneotia/html-editor-enhanced#important-note-for-web

If you are using the html renderer then let me know and I'll look into this. Thanks!

[andeersonluiz]

Yes, i'm using html render. I run the flutter with the following command:
flutter run --web-renderer html or flutter build --web-renderer html

[tneotia]

Hmm I tested with the example app and your widget code, but I cannot reproduce:

As you can see I inserted an image there but I don't see any "pick file" button in the top left.

Would you be able to share the code of your entire page? This way I can exactly test your use case and see what the issue is. Thanks for the reply!

[andeersonluiz]

Remove the AppBar, in my version mobile the error not occured because the appBar overlap the message the "picked file".

Version mobile without appBar :

Case the error not show for you, i will send the project.

[tneotia]

Thanks for this detail. I will check in the morning on this issue, if you want to send the project that will be fine also.

[andeersonluiz]

Okay, thanks for support!!

[tneotia]

I tried again without app bar but I cannot reproduce still. I think the project will be helpful in this matter if possible.

[andeersonluiz]

Hello! Sorry for answering for late, i do some changes in the exemple project, i removed the appBar and added my custom theme, the bug probably resides in some settings of theme.

The files of project above:
example.zip

[tneotia]

Yep, the issue is the theme. You have the line scaffoldBackgroundColor: brownLight,. The brownLight color causes the issue.

If you remove the opacity from brownLight you cannot see the choose file button anymore. Because your background is slightly transparent, you see the choose file button there. So for example static Color brownLight = Color.fromRGBO(191, 169, 138, 1); fixes your issue.

[andeersonluiz]

Nice! Problem resolved. Thanks for support!!