We Keep Coding

Automatically choose file for website upload based on last submission?

So, I am on a 'competitive coding' website which requires me to manually select a file ("choose file") to submit to the online testing grader. I was wondering, since there are a multitude of extensions on chrome that allow me to auto-fill a form option, is there a way to automatically fill the "choose file" button when submitting a code file based on the last file I chose when clicking that same "choose file" button webpage?

Unfortunately JS can't help here. For security reasons, it is not possible to manually add and upload a file in a file input control with JavaScript.
The reason behind this is that webpages would be able to upload files from someone's computer, so long as they knew the path.
What you could do as a last resort would be using a third party software that would register mouse clicks for you and emulate a real user acting on the interface.

You cannot do that since this input type cannot be prefilled, here is a trick though :
What you can do is having an hiden collection of text inputs containing the base64 of the files you load using your form.
When a user selects a file, just use btoa() and atob() methods to base64-it and store it in this hidden form input
If you want to 'preset' some files, just fill your list of base64 and simply display a kind of placeholder to show that you have a file 'already appended'
Then in your script when form is submitted, work with the list of base64 instead of the actual values from the input type file

Button to show choose a file to upload dialog box

Instead of using an input type="file" html tag, is it possible to bring up a choose a file to upload dialog box by clicking a input type="button"? Then when a file is selected from the choose a file to upload dialog box, the file path gets inserted into a regular html input type="text" tag?
I've seem that gmail does something similar but not with buttons and text inputs, they simply have a link add file or something like that. When that link is clicked, it shows the select file(s) to upload by mail.google.com dialog box. When a file is clicked, the file name is shown on the screen.
How are they doing that?

<input type="file" style="display:none;" id="inputfile"/>
try this
Try this one. I think it is useful.. :)

I think most browsers have this locked down for security purposes. Buttons and text boxes can be manipulated via JavaScript. File input boxes cannot, and for good reason; imagine if a javascript could open a dialog, set the path to a sensitive file on your system, then simulate the button click to download the file!
By the way, if you are looking to style it, perhaps this would work: http://www.quirksmode.org/dom/inputfile.html

Check this fiddle: http://jsfiddle.net/A4BS7/1/
NOTE:
a) This may not work well on older browsers (mainly IE) that don't fire the change event on the file input.
b) For the upload to work as expected, you'll need to include the <input type="file"> element in your form. The text element can be used for displaying the selected file at best.

It is not possible to alter an input[type=file] as you like, it is a purely native form element.
Besides you won't be able to get the path to the file for security reasons. Old IE versions shows the path but it is not the case anymore with newer versions and you won't be able to do anything with the path on server-side anyway.
There are though some methods to style:
Styling File Upload / Select Input Control
Styling an input type="file"
Styling file inputs with CSS and the DOM

Have a look at plupload, I've used it many times to handle file uploading.

IE9 file input triggering using Javascript

I had a post here:
.change acting weird in IE9
However, I have run into a new incident regarding the form handling of file upload and was curious if anyone has run into this issue.
My original problem was that I could not get an onchange event to work and I thought perhaps it was an issue with my javascript, but I found that it has to do with the way that the form is being activated.
I have a file input
<input type="file" name="abc"/>
now I've done 2 things.
I've hidden the input and created a button (for better styling control) that activates the input.
<button id="mybutton">click to upload a pic</button>
<input type="file" name="abc"/>
and then the JS for the interaction between the two:
$("#mybutton").click(function() {
$("Input[type=file]").click()
};
and of course a submit for the form (i use parent in this example, but you in my actual code I use the form id).
$("input[type=file]").change(function() {
$(this).parent().submit();
});
When I click "mybutton" the expected result does occur my browse window opens and lets me choose a file from my computer. Also when I change the file in all browsers other than IE the onchange event is fired. Now if I unhide the form and manually click the "browse" button and choose a file the onchange event is fired. So basically the browser treats clicking the actual file button differently than doing a $("input[type=file]").click()
anyone know how to fix this?

As said before, IE is very strict when submitting form containing file inputs. File inputs must be triggered with a real mouse click to allow the form submission. Additionnaly, there seems to be a bug with IE9 and file inputs.
The good news is that there is a way to bypass the security restriction from IE using a label :
Create a regular label tag linked to your file input. The label will trigger the input file as it normally does.
Disguise the label as a button using CSS.
The file input must be displayed (for IE8), but can be hidden using "visibility: hidden". IE8 will accept this hack.

If I am not much mistaken you can't change this as this is (was originally) meant to protect the privacy of users avoiding anyway to upload files without explicit user permission/action.

make sure your code is in $("document").ready(function(){... here..});
seems file inputs when wired up with .live("change", function(){}); dont quite work well
the other styling stuff is something else but the CSS isn't all that complicated - beautiful file upload

How to change the button text of input type="file" element

Well I am developing a simple page in html, in which I am using input element type="file". By default we get a textbox and a button to browse a file from the system. Default label of this button is Browse. But I want to change the label of this button with some other name, like 'Open' or 'Select File'. But I don't have any idea how to accomplish this.
Does anyone know how to do this?

You have to use an image and overlay it on top of the button. then use Javascript to clone the file click onto the image. Does this even make sense? I'm a bit hungover.
Anyway, here's a ncie jQuery plugin http://www.appelsiini.net/projects/filestyle/demo.html

You can't. You could if you would use Flash or Java for handling file uploads.

you can not change file control "Browse" text, you can do this if you use jquery file upload...

Can an HTML button be used to upload a file for use with the W3C File API?

I have a thumbnail interface mockup, and I would like to add the ability to upload an image. According to my mockup, the interface looks like this:
The intent was that the user would click on the "Add Icon" button, and a file dialog would pop up, just like the one that pops up when a file input is clicked. I would like the use the W3C's File API to handle the file upload asynchronously, and display the thumbnail in the gray area above the button once the upload is complete.
So, I'd like to upload a file without using a file input HTML element. I tried working with a hidden file input element and calling its click event handler with Javascript when the "Add Icon" button is clicked, but the call didn't do anything. I think security might have some reason to do with this.
Has anyone had any luck using an HTML button to upload a file before?

The trick I always do is wrapping the hidden file input into a label tag and then putting my custom input elements in the label tag. By defenition clicking on anything inside the label tag should trigger the input inside. No JavaScript needed at all!
<label>
<div>
My custom file input
</div>
<input type="file" id="file"/>
</label>
CSS: input{visibility:hidden;} Please note that you can't use display:none because then the element will not render. Still you can make the element width:0; height:0; to hide input element completely.
Fiddle
Using HTML file API is a little different. Read this article at Mozilla Developer Network to leran more.