Chrome And Firefox File Upload Browse Bug

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 fi

Solution 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.

Solution 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:8px16px;
  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%;
    
}

<buttonclass="photodiv">Photo<inputtype="file"name="attach1"class="hide_file"></button>