I'm skinning a file input in an HTML form. I achieved the result by hiding the input, then I designed my own button and onclick on that button, I trigger the click event on the hidden input, to open the native browse window. This works, but when I close the browse window, the Javascript submit handler is triggered on form (but no submit really happen, only the event is triggered).

I prepared a fiddle: /

HTML:

<form id="form">
    <input id="file" type="file" name="photo" />
    <button id="upload">Browse</button>
</form>

JS:

$("#form").submit(function(){
    alert('submit event triggered');
});

document.getElementById('upload').addEventListener('click',function(){
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);
    uploading = true;
    document.getElementById('file').dispatchEvent(evt);
});

CSS:

input#file { position: fixed; top: -100px; }
button { border: solid 3px black; border-radius: 3px; font-size: 18px; line-height: 20px; text-transform: uppercase; font-family: Arial; line-height: 31px; background: #fd6706; border-radius: 13px; }

I'm skinning a file input in an HTML form. I achieved the result by hiding the input, then I designed my own button and onclick on that button, I trigger the click event on the hidden input, to open the native browse window. This works, but when I close the browse window, the Javascript submit handler is triggered on form (but no submit really happen, only the event is triggered).

I prepared a fiddle: http://jsfiddle/Ebcu5/

HTML:

<form id="form">
    <input id="file" type="file" name="photo" />
    <button id="upload">Browse</button>
</form>

JS:

$("#form").submit(function(){
    alert('submit event triggered');
});

document.getElementById('upload').addEventListener('click',function(){
    var evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);
    uploading = true;
    document.getElementById('file').dispatchEvent(evt);
});

CSS:

input#file { position: fixed; top: -100px; }
button { border: solid 3px black; border-radius: 3px; font-size: 18px; line-height: 20px; text-transform: uppercase; font-family: Arial; line-height: 31px; background: #fd6706; border-radius: 13px; }

• javascript
• jquery
• html
• forms
• file-upload

• 1 Most likely you are miss-diagnosing the problem. I see no id="upload" element, and i'm willing to bet it's the button. Clicking a button triggers the submit event, unless the button is specifically set as type="button". jsfiddle/Ebcu5/1 – Kevin B Commented Nov 26, 2013 at 22:15
• Why you using regular JS and jQuery together like this? Would be much cleaner and simpler with just jQuery... – Mike Barwick Commented Nov 26, 2013 at 22:26
• Sorry it was a copy&paste mistake... my button has the id="upload" as in the fiddle. Uploaded file. – Marco Marsala Commented Nov 26, 2013 at 22:29
• Just because code is born in different times :) – Marco Marsala Commented Nov 26, 2013 at 22:30

2 Answers 2

Solved. Just use a evt.preventDefault() in the upload click event handler.

Updated fiddle: http://jsfiddle/Ebcu5/2/

document.getElementById('upload').addEventListener('click',function(evt){
                evt.preventDefault();
    document.getElementById('file').click();
});

Change: <button id="upload">Browse</button>

To: <button id="upload" type="button">Browse</button>

Credit for this goes to Kevin B for his ment on another answer:

or just make the button a button. type="button" – Kevin B Nov 26 '13 at 22:35

Just wanted it to be an actual answer so people would see it without digging thru the ments.