"Choose a file" button isn't hiding during upload

Questions / Help
1

Once the user has selected the file in the modal, the modal closes, and the upload progress bar displays.

But, in my form the “Choose a file” button still displays too. It hasn’t disappeared like it’s supposed to. See the screenshot.

Note that if I click anywhere on the page, the button then does hide.

Seems like Uploadcare hides the button when it is no longer active, but for some reason the button is not becoming inactive when the file upload starts, as it should. (You can tell that the button still considers itself active because it’s got the light blue highlight around it.)

Any help? (This is a single-file widget.)

Polished 2020-07-14 21-06-23
Polished 2020-07-14 21-06-23949×362 38 KB

2

Hi @will, can you please share a link to the page so that we can check it live?

4

One more thing. I suspect the issue has to do with the custom CSS I’ve added to modify the appearance and behavior of Uploadcare. You’ll see I added all of this:

.uploadcare–progress_type_canvas {
width: 2em;
height: 2em;
color: #19ba42;
border-color: #f2f2f2;
}

.uploadcare–widget {
border: 0px solid #000000;
}

.uploadcare–widget__text {
font-size: 14px;
line-height: 24px;
color: #333;
}

.uploadcare–widget__file-name {
display: none;
}
.uploadcare–widget__file-size {
display: none;
}

.uploadcare–dialog__powered-by {
display: none;
}

.uploadcare–widget__button,
.uploadcare–widget__button:hover,
.uploadcare–widget__button:focus,
.uploadcare–button_primary,
.uploadcare–button_primary:hover,
.uploadcare–button_primary:focus {
-webkit-appearance: button;
display: inline-block;
height: 48px;
padding: 0px 24px;
-webkit-box-align: center;
align-items: center;
border-radius: 4px;
background-color: #19ba42;
color: #fff;
font-size: 14px;
line-height: 48px;
border: 0;
text-decoration: none;
cursor: pointer;
margin: 0;
}

5

Hi @will, thanks for sharing this! You’re correct; the problem is related to the custom CSS. The display: inline-block; line makes the button be displayed during upload. Consider removing it.

Here is a fixed version: Button isn't hiding during upload (fixed).

6

That did the trick!

Thank you Alex, much appreciated.

1 Like