Open File Upload from select options not working in some Browsers

Question

I want the user to click on a div which has a select box under it, with display:none, so the user clicks that div, and the options should appear. In mobile a native popup should appears with the options (This works good no problem here)

The main problem is that one of the main options is for the 3rd option where the user can upload a "file" on the server, from the computer.

So the file upload dialog should open.

It works good on: chrome for windows desktop.

Except: safari (Mac/iOS) or chrome ( for Mac / iOS) although the firefox for Mac does work (versions till 52) . Why so many differences.. is this a bug or not?

I theory the event is fired from the onchange event of the select html element, so it should be considered "user context" origin. The onchange function will call a "click" on the file upload html element to trigger it to open the file upload dialog.

-Firefox behaviour in versions 52 or earlier trigger a "popup window" although i dont think this should be considered even a popup, since its not a browser windows like those "ads" popups, its a native windows UI for upload...

check this jbin [jsBin][1]

$( document ).ready(function() {
    $("#test").change(function(event){   
        if($(this).val()==3) {
           //open the file uploader
           $("#test2").focus().click();
        }
        $(this).val(null); //reset the on change value;
    });
});

.fakebtn{
    position:relative;display:inline-block;
    padding:10px; 
    background-color:#777; 
    color:white;
}

.styled_select{
    position:absolute; 
    opacity:0; top:0; 
    left:0px; 
    height:100%; 
    width:100%
}

<!DOCTYPE html>
<html>
<head>  
            <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
</head>
<body>
            <h1>Please select file to create. 3rd Option works in desktop, not in mobile?</h1>
            <input style="display:none; " id="test2" type="file" />
            <br><br>
            <div class="fakebtn">
                <span>+</span>
                <select id="test" class="styled_select">
                    <option value="1">Create new blank page</option>
     <option value="2">Create file from template 1</option>
     <option value="3">Upload from your computer a file</option>
        </select>
    </div>
</body>
       </html>

Open File Upload from select options not working in some Browsers

0 Answers0