We Keep Coding

Select value for input[type='file']

I found a useful snippet on jsFiddle for drag'n'drop images to browser. http://jsfiddle.net/JtJ5N/359/
Now I want to select the dropped image for my form in this page. I have below form:
<form id="form1" method='post' action='upload.php' enctype='multipart/form-data'>
<input id="fileBox" type='file' name='upload'>
<input type='submit' value='Upload'>
</form>
I want when image dropped to the page, by clicking submit button, the form submits.

Files and folders can be dropped at <input type="file"> elements. No additional code is necessary. Simply drop the selected file from the system file manager GUI at <input id="fileBox" type='file' name='upload'> element and click <input type='submit' value='Upload'> element. The file will be submitted to 'upload.php' as part of the 'multipart/form-data' encoded <form>.

Disabling form auto submit

I am trying to build an image upload interface which submits the form automatically as soon as choosing a file from the file browse window. This is how my HTML looks like:
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>
and this is how my JS looks like:
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
Problem is as soon as I click image input which triggers #avatar, file browser is being opened but the form automatically being submitted without allowing me to choose a file from the window.
What is wrong here?

The <input type="image"> is a graphical submit button, so when you click it, it will automatically submit the form. Here's the documentation on it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/image. If you want to stop the form from submitting, you need to cancel the default action of the click. So, your code would be this:
$("input[type='image']").click(function(e) {
e.preventDefault();
$("input[id='avatar']").click();
});

I don't really understand your problem. Here it seems to work. It doesn't submit the form when I open the file browser, until I choose an image and close the file browser. (note it doesn't post after it either but that's because of a javascript error that is not related to your problem. When you copy this code to an empty html it should work)
$("input[type='image']").click(function() {
$("input[id='avatar']").click();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" action="avatar.php" method="post" id="avatarForm">
<input type="image" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8mN2ibS1RFAfbliQ_QjEPmnVFY272SpjSCSz9uDIfj4wUvM39Rw" width="100px"/>
<input onchange="javascript:this.form.submit();" type="file" id="avatar" style="display: none;" />
</form>

How to prevent page redirection/refresh after form submit, while preserving file input? Jquery

I have a file upload form as follows:
<form id="upload" action="someurl" method="post" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" />
<input type="submit" value="submit" />
<form>
Problem is that every time I submit the form I will be redirected to the form's action url.
How do I submit this form while still staying on the same page? Using ajax or preventDefault won't work as I will lose the file stream.
Rendy

Provided you have an iframe on your page that's hidden,
<iframe id="hidden-iframe"></iframe>
then add a target to your form:
<form id="upload" action="someurl" method="post" target="hidden-iframe" enctype="multipart/form-data">
<label for="file">Filename:</label>
<input type="file" name="file" />
<input type="submit" value="submit" />
<form>
you're done !

Creating multi purpose button in html

When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?
http://goawaymom.com/buttons.png
my html -
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file"class="box"/>
<input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>
-Note I don't care to put them on separate lines or make font smaller- etc

Simplest Way:
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>
Without Jquery, Only JavaScript
<form method="post" action="" enctype="multipart/form-data" name="form1">
<input name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>
<input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
</form>

<script type="text/javascript">
$(function() {
$("input:file").change(function (){
var fileName = $(this).val();
if(fileName){
remove chose file button and show upload button(visible property)
}
});
});
check jQuery - Detecting if a file has been selected in the file input

Yep, it's very easy indeed. You can listen for onchange event of the file input and hide it.
HTML:
<input name="inpt" type="file"/>
<input type="button" value="Upload"/>
Javascript:
//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
//setting display to "none" hides an element
inpt.style.display="none";
};
JSfiddle
PS. if you want you can use the same trick to show the "Upload" button only when a file is chosen. In that case the button code will be <input id="btn" type="button" value="Upload" style="display:none"/> and in the Javascript code you write btn.style.display="" to show the button.

I can say that there are multiple ways to do it. But in core java script the below is the approach
(1) Initially set the display style of upload button to none in order to hide that
(2) Write Onchange event handler for input file type
(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').
Hope this approach works

Force click event on input file or open choose file window

I have a form in my HTML with field.
I'd like to show the file selection window when the user clicks somewhere else (for example, an image on other part of the screen). The reason I want to do this is that I have a form with many fields, posting to some action "x", and the file selection form on other part of screen, submiting to action "y"
<form action="x">
<input type="text" name="field1">
<input type="text" name="field2">
<input type="text" name="field3">
<img src="select_file.png" onclick="//triggers file selection on other form">
<input type="text" name="field4">
<input type="text" name="field5">
</form>
<form action="y">
<input type="file" name="myfile">
</form>
Is there any other way to do this?

$("img").click(function(){
$("input[name=myfile]").trigger('click');
});
Demo. Click on the envelope image.
Edit: Giving ID's on the each of input fields will make the code more readable and "good."