Chrome and Firefox file upload browse bug

Question

In order to have complete UI style over a form type="file" upload, I have a pseudo form field (#fileName), browse, upload button. I have a hidden form below with the actual form field (#fileAttach), browse, and upload buttons. I'm trying to trigger it such that when the user clicks browse, it triggers the actual browse button, and then grab the value of the actual input field's file path and populated the file on the pseudo input field.

    browse = function () {
        $("#fileAttach").click();
        var file = $("#fileAttach").val();
        $("#fileName").val(file);
        }

It works in Safari and IE. However, in Chrome and Firefox it seems to stop executing after the user selects the file. The file name is not passed to the pseudo form field. However, if I fire browse() a second time, it immediately populates the first file path to the pseudo form field, then spawns a new file browse window. Chrome/FF seems to only execute the first line of the function and pause. The 2nd and 3rd line gets executed if the function is called again, etc.

What's going on here and how can I solve it? Thank you in advance.

Answer 1

Browsers don't really like you triggering the upload dialog via code, I've found.

I've always just displayed my own browse button and absolutely positioned the input[type=file] over the top with opacity: 0. Works in all browsers.

Answer 2

This is how I'm doing it. Also working on an upload problem but, having trouble cause the Option Explicit statement

Add Record to Database and Upload an Image at the same time (2nd Attempt with different code)

Not sure if this is what you looking for or not.

.photodiv{
  padding:8px 16px;
  background:;
  border:0px;
  position:relative;
  color:#fff;
  border-radius:2px;
  text-align:center;
  float:left;
  cursor:pointer
}
.hide_file {
    position: absolute;
    z-index: 1000;
    opacity: 0;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    font-size: 24px;
    width: 100%;
    
}

<button class="photodiv">Photo<input type="file" name="attach1" class="hide_file"></button>