StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POClick event for file input type?
text
Body
copied!<p>I am trying to implement an image/file uploader javascript component in my MVC project.</p> <p>The uploader jquery component is bound to a form element that contains a <code><input type="file" /></code> </p> <p>In my situation I am on a user edit profile page where the fields are naturally encapsulated with a <code><form></code> But for this jquery component I have to bind the uploader to a form element.</p> <p>This provides a unique problem for me as you cannot really have a form inside of a form..</p> <p>I have changed the element to be a element but then the onclick event for the input is not fired but the drag and drop uploading works still. My question is how to overcome this onclick event problem? or is my understanding of whats happening a bit of the mark?</p> <p>I want to be able to click on the div element and let the file browse window come up just as in a normal older type file uploader.</p> <p>The component: <a href="http://aquantum-demo.appspot.com/file-upload" rel="nofollow">http://aquantum-demo.appspot.com/file-upload</a></p> <p>Thank you in advance.</p> <p>EDIT</p> <pre><code><form action="<?= URL; ?>/users/op/<?php echo ( $this->op === 'edit' ) ? 'edit' : 'add' ?>" method="post" id="item-form" name="item-form" enctype="multipart/form-data">   <div id="file_upload"> <input type="file" name="file" /> <button>Upload</button> <div>Upload profile picture</div> </div> </form> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload