HTML5 Mulit-Upload

Now that I have some time to not work on something for someone or another I figure I’d post this.

Uploading multiple files at once used to be strictly in the realm of flash or required javascript to crate multiple upload forms as needed. The first method has the problems with the general incompatibility of flash. The second, well, it’s a very low tech method and limits you to selecting only one file per upload form, real pain.

It’s a two step problem, step one, the form:

Pretty standard form, all you gotta do is add the multiple="multiple" in there and add brakets ([]). Those brakets are the key to the next set, they tell PHP to make the file variable an array so it stacks the files up, instead of just replace the it with the next one (laving you with only the last file uploaded).

Next thing to do is tell PHP up handle the uploaded files one by one. This is pretty simple, heres a quick one.

Snipplr: http://fatfolderdesign.com/ex/multi-upload/index.php

First thing you have to do is get the number of files, I used the count() of the file size because every file has a size, but the same can be said for any $_FILES attribute, so they all work equally well. Using a similar method it’s easy to retrofit an old upload system (which was my original implementation) simple by adding it in the loop and adding the variable to the end of the $_FILES call and it all just works.

This information was surprising difficult to find (most searches returned flash based solutions) but implementation on the existing system (that used FTP to transfer uploaded files to another server and wrote information in multiple databases) was far simpler than any of the flashed based ones, and it’s small and compact which is an added bonus.

An example of the above code can be found here: http://fatfolderdesign.com/ex/multi-upload/index.php.

Edit 2/12/11 Changed the display for the “view uploads” page.

Edit 1/22/13 As requested I’ve made the source of the uploads page viewable here: http://fatfolderdesign.com/ex/multi-upload/upload.php.txt

HTML5 multi upload crash course

Been working alot (and will be for a while more) so I don’t really want to devote the time needed for a real post, but this little tidbit saved me a bunch of trouble yesterday and I think it’s important enough to post.

HTML5 supports multiple selection of form inputs by adding the tag multiple="multiple" to the input. Only problem is that it PHP seems to want to take the last item from that list (since to PHP it’s seeing 5 $_POST items all with the same name, each one overwriting the one that came before it). The fix for this is two parts.

Part one is to form your input names so that PHP turns them into arrays. For example I used this for a image upload, it was originally was name="image" but by adding square brakets to the end of it like this name="image[]" when PHP saw that it placed it in an array, and in the case of the a file upload like I used for the images, it was all stored in the $_FILES array, making it look something like this:

Now I didn’t want to reinvent the wheel (or in this case reprogram the upload script) so I wanted to retrofit this into the upload field. The simplest way I could thing of is to count the number of items in the name field (as it’ll always have one for each) and then running the script once per file (using a while loop to count $i up to the maximum number of files as gotten by counting the items earlier) Then all I had to do was add [$i] to the end of all the calls that involve the $_FILES array and it grabbed the appropriate information. Simple as Simple Can be.

I know this is a messy post and not very well though through but I will make a more detailed posting, with appropriate example and Snipplr as soon as my contract at FR is complete, how long will that take? Don’t know, but should be to long.

I’d say that none of the code was testing, but there isn’t any, none of the variable names were checked, just going off of what I remember from yesterday/this morning from EM, like I said, better more detailed instructions soon.

Simple Javascript Form Check

This is something I whipped up to make sure people weren’t submitting forms missing vital information, but I didn’t care if the information was wrong. It’s for a back end thing, the general public should be thoroughly checked (it’s a lowest common denominator thing) but if this is an important work related thing your not very likely to mess it up to terribly (but, check for anything that will break your script just in case they do). In this case it was a form that stores client information, if the names in the wrong place it can be edited and it’s not a big deal, but if you really want to ensure accuracy you can run additional checks inside each of the ifs for that articular thing.

Snipplr: http://snipplr.com/view/46271/simple-javascript-form-check/

Two things I’d like to note about this. First, if you have a very large form it should probably be done with a script that looks at all elements instead of using a line per element. Second, you have to make the submit button type="button" instead of type="submit" or you have to make it return true/false upon completion. I don’t see much of an advantage either way so I used a button for simpler testing and never changed it back.