onChange not passing form variable.

timstring

I am trying to pass a file name through the 'file' dialog to my action script. But for some unknown reason, the data is not being passed through. Here's the code I borrowed from several sources:

<form action="ImportTOA.php" method="POST" accept="text/csv">

Upload Daily TOA Logs: <br /><input name="userfile" type="file" onchange="this.form.submit()" />
</form>

and the receiving PHP script:

$ImportFile = $_FILES['userfile']['name'];

All I need to pass from the form is the file name. I'm not trying to upload anything, except to process the selected file and put it into my MySQL. The solution has to be something simple.

ty
tim

timstring

Give me another duck. With a sufficiently narrow Google query, I found the answer. In case anyone comes along to read this thread, here's the code I borrowed that worked:

<form enctype="multipart/form-data" action="ImportTOA.php" method="POST" accept="text/csv">
    <!-- MAX_FILE_SIZE must precede the file input field -->
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    <!-- Name of input element determines name in $_FILES array -->
    Upload Daily TOA Logs: <br /><input name="userfile" type="file" onChange = "this.form.submit()" />

</form>

johanafm

timstring;11025059 wrote:
But for some unknown reason, the data is not being passed through.
<form action="ImportTOA.php" method="POST" accept="text/csv">

The "unknown reason" was the missing appropriate enctype in the above form.

timstring;11025071 wrote:
<form enctype="multipart/form-data"

timstring

Give me a duck. I have enough to win a rubber duck race. "If at first you don't succeed, hide all the evidence that you tried."

On a related note, take a look at this code:

<form enctype="multipart/form-data" action="ImportTOA.php" method="POST" accept="text/csv">
    <input type="hidden" name="MAX_FILE_SIZE" value="30000" />
    Upload Daily TOA Logs: <br />
    <input name="userfile" type="file" class = "FormButton" onChange = "this.form.submit()" />

</form>

When I put the class in the <input name statement, the result looks link this:

[ATTACH]4861[/ATTACH]

If I leave the 'class' out, here's what I get:

[ATTACH]4863[/ATTACH]

How do I make the standard button go away?

WithClass.jpg NoClass.jpg

Bonesnap

Styling file input controls is next to impossible because they inherently "contain" two controls (the field and button). Unfortunately there's no real way to target those specifically. This doesn't mean people haven't tried; there are some elaborate JavaScript implementations that have styled them (so to speak). Do a quick search on Google and you'll find them pretty quick.

johanafm

But you can use some other control, such as a button and style it however you wish, while keeping the file input hidden

jQuery(document).ready(function($) {
	$('#some_other_control').bind('click', null, function(evt) {
		$(this).parent('form').children('#fileinput').trigger('click');
	});
});

But do check the jquery docs for "on" since that is supposed to replace bind when setting up event handlers since some newer jquery. I just don't remember what on looks like off the top of my head.

Derokorian

johanafm, it is true the on is the preferred method for attaching event handlers. However, if the code is designed to be a plugin, its often best to use bind for backwards compatibility if desired.

Bonesnap

Good idea, johanafm. In this case I wouldn't use .on() or .bind() and simply use .click(). The main advantage with .on() is you can attach the event handler to elements that don't exist yet in the DOM, but if you're not dealing with dynamic content like that then .click() would suffice.

johanafm

I made a little jQuery plugin to handle div drop events + click with hidden file input. I've never written jquery plugins before though, and there are some things I'm still pondering, so I'll post it in code review. Just thought you might want to have a look at it since it may suits your needs. It's also entirely possible that there better plugins exist. But I grew tired of searching for one which did what I needed.