CODEWITHSUNDEEP
javascripthtmlformsgoogle-chrome
Gokhan Kurt
Gokhan Kurt

Reputation: 8277

File input can be clicked more than once before the file dialog is open in Chrome

I have a file input wrapped in a button like below.

.fileUploadButton input[type="file"] {
    right: 0;
    top: 0;
    font-size: 100px;
    position: absolute;
    outline: none;
    opacity: 0;
    cursor: pointer;
}

.btn {
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.btn-success:hover {
    color: #fff;
    background-color: #449d44;
    border-color: #398439;
}

.fileUploadButton {
    position: relative;
    overflow: hidden;
}
    <span class="btn btn-success fileUploadButton">
        File Upload Button
        <input type="file" name="file" accept="application/zip">
    </span>

Sometimes after clicking this button, the file dialog opens after a delay like 10 seconds. While waiting for file dialog to open, UI is not blocked and the button can be clicked more than once, which causes more file dialogs to open consequently after closing the other one.

This seems to occur for the first time and only once in a Chrome session and I cannot reproduce it after that. It cannot be reproduced in a definitive manner. I have observed this in multiple Chrome versions including version 59.

Is this a known bug? Is there any workaround? Is the definitive steps to reproduce known?

Edit:

enter image description here

Upvotes: 1

Views: 57

Answers (1)

Jeremy Thille
Jeremy Thille

Reputation: 26370

I think this is because your hard drive is in sleep mode. It's stopped. Whenever you click the file button, you ask the browser to ask the OS to access the file system, and the OS must wake up the disk. It takes a few seconds for it to spin up, initialise access and all. Obviously this doesn't happen with a SSD drive.

Upvotes: 2

Related Questions