flutter-form-builder-ecosystem / flutter-form-builder-ecosystem/form_builder_image_picker

Input file element visible in UI

Open
#39 0 comments 3 reactions 0 assignees View on GitHub
bug
Dominant language
Dart
Stars
34
Forks
65
PR merge metrics
No merged PRs in 30d

Description

## Environment

**Package version:** 3.1.0

Flutter doctor

```
[√] Flutter (Channel stable, 3.3.2, on Microsoft Windows [Versi¢n 10.0.22621.521], locale ca-ES)
• Flutter version 3.3.2 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision e3c29ec00c (3 weeks ago), 2022-09-14 08:46:55 -0500
• Engine revision a4ff2c53d8
• Dart version 2.18.1
• DevTools version 2.15.0

Checking Android licenses is taking an unexpectedly long time...[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
• Android SDK at C:\Users\victo\AppData\Local\Android\sdk
• Platform android-32, build-tools 32.1.0-rc1
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)
• All Android licenses accepted.

[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.2)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.1.32319.34
• Windows 10 SDK version 10.0.19041.0

[√] Android Studio (version 2021.1)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.11+9-b60-7590822)

[√] VS Code (version 1.71.2)
• VS Code at C:\Users\victo\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.21.0

[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Versi¢n 10.0.22621.521]
• Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.127
• Edge (web) • edge • web-javascript • Microsoft Edge 102.0.1245.33

[√] HTTP Host Availability
• All required HTTP hosts are available

• No issues found!
```

Code sample

```dart
return Container(
padding: const EdgeInsets.all(8.0),
height: height,
width: width,
child: FormBuilderImagePicker(
key: const Key('donorForm_photo'),
name: 'photo',
initialValue: [photo],
maxImages: 1,
fit: BoxFit.cover,
previewAutoSizeWidth: true,
previewHeight: height,
validator: FormBuilderValidators.required(),
decoration: CustomInputs.formInputDecoration(
label: AppLocalizations.of(context)!.photo,
),
),
);
```

## Description

When using the plugin, the input file element is not hidden.

**Current behavior:**

The HTML code is:

```



```

and, in my case, the result is:

![image](https://user-images.githubusercontent.com/21988790/193788750-0fd40517-34ea-4c89-b98a-b8fbe91c1024.png)

**Expected behavior:**

If the HTML code is changed adding **hidden**:

```



```
then the result would be:

![image](https://user-images.githubusercontent.com/21988790/193790574-ca5925e0-a693-4791-b64b-ffaeec079993.png)

Contributor guide

Open the contributing guide

Research direction

Start by locating the web implementation that creates the flt-image-picker-inputs element and inspect how its file input is styled or exposed. Reproduce the issue with the provided FormBuilderImagePicker example in Flutter web, then verify that the file input no longer appears visibly while image selection still works.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend, web-dev
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.