When click any button in the page, file dialog will open while using Jquery-File-Upload

Question

I am using the below HTML code to implement the fileupload

<span class="fileinput-button uploadBtn" id="btnUploadFile"><span>Add files</span><input id="fileupload" type="file" name="files[]" ></span>

Yes.. It works fine when click the Add files button. But my problem is When click whatever the input element with type="button" are available on the page, it is acting like a file uploader element

For example :

<input type="button" id="btnDownLoad" value="Download" onclick="blah();" />

<span class="fileinput-button uploadBtn" id="btnUploadFile"><span>Add files</span><input id="fileupload" type="file" name="files[]" ></span>

If i click both buttons, the file dialog is opening. I have mentioned the css for the jquery.fileupload.css

.fileinput-button {
position: relative;
overflow: hidden;
}
.fileinput-button input {  // if i remove this block, other buttons didnt trigger file upload dialog. but i lost style
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}

/* Fixes for IE < 8 */
@media screen\9 {
.fileinput-button input {
filter: alpha(opacity=0);
font-size: 100%;
height: 100%;
}

Scripts:

 $("#btnUploadFile").click(function () {
        Upload();
    });
    function Upload() {
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Common/UploadFiles',
            autoUpload: true,
            done: function (e, data) {
                alert("Upload Successfully Done");
            }
        }

How can i avoid these issues?

1. when clicking "btnUploadFile" button only, it should trigger the file dialog

2. If i remove the css block in jquery.fileupload.css, i lost my style. It looks like a simple textbox with browse button.. So how can i fix the style for that.

Answer 1

Your css is pretty messed up, the span #btnUploadFile span covers everything.

I'm guessing you want a file upload button without showing the input and your are using the first hack here . Try the second answer in that question, which is more elegant and easier to understand - the input button has visibility: hidden and there is a click event handler on anther button (which you could also have on your span).