Easyadminbundle: Select file for upload does not work in Firefox 64.0 (64-bit). Easyadmin v 2.0.1

[vkhramtsov]

Describe the bug
Cannot upload file using Firefox. While everything is OK with Google Chrome

To Reproduce
Create entity with image upload with vich/uploader-bundle. Configure easyadmn backend with this field like - { property: 'imageFile', type: 'Vich\UploaderBundle\Form\Type\VichImageType' } or - { property: 'imageFile', type: 'vich_image' }. Open form in easyadmin. Click on field does not open file select dialog in FF, while everything works as expected with Google Chrome.

(OPTIONAL) Additional context
I don't have any error messages in console

Thank you in advance

[vkhramtsov]

I'm using symfony 4.2.1

[vkhramtsov]

@javiereguiluz Any news here?

[javiereguiluz]

I can confirm the bug. I'm trying to fix it replacing our CSS hack to show a custom file upload button. I'm trying to do it with Bootstrap 4 custom form elements for form input. I'm having some issues, but I expect to fix it soon. Thanks!

[kelerq]

@javiereguiluz Any news here?

[javiereguiluz]

@kelerq not yet ... because of the 🎄 Xmas holidays. I'm sorry.

[kelerq]

.input-file-container [type="file"]{ filter: opacity(0); }
that was a problem

[Ukkosade]

also, if you delete

filter: opacity(0);
font-size:999px;
position:absolute;
opacity:0;

still into ".input-file-container"

the hand icon when you mouse over it and everything reappears and works just fine,
The only issue is that almost all the styling on the upload button is gone, but hey at least it works

thanks for the tip ^^

[Bloodysunset]

Hello, same problem here.

Fixed by adding a CSS rule filter: none;.
What's the point of filter: opacity(0); to begin with? I can't figure out it's purpose. Disabling it doesn't break Chrome btw.

I hope you'll find a convenient way to fix it :+1:

edit:
The best way to fix it if you're waiting on a more official fix is to add a new css file with that :

@-moz-document url-prefix() {
  .input-file-container [type="file"] {
    filter: none;
    font-size: unset;
  }
}

Then you can add those lines to your easy_admin.yaml :

easy_admin:
    design:
        assets:
            css:
                - 'assets/select_file_fix.css' # path to your css file

These provide an efficient fix just for Firefox so you know you're not breaking anything else.

[vkhramtsov]

@javiereguiluz any news here?

[ktrzos]

Does this problem still exists? I've tested this issue on Firefox Quantum 66.0.5 (64-bit) and EasyAdmin "master" branch, and file uploading on one of my fields were working fine.

And about the point of filter: opacity(0);:
https://stackoverflow.com/a/53299274/912130

filter: opacity() is similar to the more established opacity property; the difference is that with filter: opacity(), some browsers provide hardware acceleration for better performance. Negative values are not allowed.

filter: opacity() applies transparency. A value of 0% is completely transparent. A value of 100% leaves the input unchanged. Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount. If the “amount” parameter is missing, a value of 100% is used.

[javiereguiluz]

Closing as fixed by the latest design fixes and tweaks. Thanks.