Posted on

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

Posted on

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.

Posted on

Multi-forms, the amazing time saver

I’ve done a couple of things that involve a very similar front end, and a identical back end, the latest of which was a basic quiz system. The front end always involves forms (because the internet was made to fill out pointless data on) and making form and form can be a pain. So, i’ve adapted a technique I made for the quiz to make it a little more clear.

To start, I use a multidimensional array usually, kinda link the one below

So thats the data for the form, it’s very simple but it’s only an example, I’ve done this with large forms over 100 entries and it does make things simpler, I’ve also added default value formulas and if the form is saved (used in conjunction with my javascript ajax auto-saver), you can add any additional variables you want, I usually stick in a save one set true/false to denote if I am saving it, I also usually store this in an external file separate from the document and display code so it can be called in multiple places (for instance, the script that saved this data also calls it and checks it against that save field to determine if it should be included in the mysql_query(). That lets me use one saver file and have it save the data from a bunch of files.

Another advantage of this system is that the from is not generated in a very predictable manner and a less experienced user can change it (either through details instructions or blind “replace this thingy here” methodology) and when properly linked to the saving script neither they or you have to deal with making modifications to the save code (and that can save some serious time if the form changes often or there are many of them to work with)

So how does the saving work? simple, lets say we have loaded the data up into the save script. the array is called $form, and it has the subfeilds type, default, and save as mentioned above, and we’ll send it to the save script via POST. The simplest method of managing this would be something like this:

So that will write the name of the form item into a mysql table with the needed schema, it again is very basic, I have added features to make the sceme as it writes (be careful who can do that or you’ll have a huge mess on your hands), and to overwrite old entries, really all depends on what you need it to do.

So thats the style of the array holding the information and saving it, the display part is the key part though, it too is very simple. If you use any non-input type types (like I did in the first example) it’s best to check for those first, then display the standard type fields afterwards (most often the standard ones I use are text and hidden) A basic outline could be like this

‘; foreach($form as $name => $data){ echo $name.”:”; if($data[‘type’]==’date’){ list($month,$day,$year)=explode(‘/’,$data[‘default’]); echo ‘The dates can be put where, with their own loops, or you could load a JS date module or something’; echo ‘I didn’t put them in here because there long, and this post is long enough already’; }else if($data[‘type’]==’gender’){ echo ”; echo ”; }else{ echo ‘ ‘; } echo ‘
‘; } echo ‘

Modify and needed and you got a form, if you decide to make further changes to the form it’s a lot simpler and faster than going through the html code. You have have someone not experience in HTML at all do it, you can have it output in another language, really anything, it’s all in the output section.

You can also get really fancy with this, I have one that calculates the information in the save file and sends in back to the page to update the non-saved fields (a little slower than a native JS update but it doesn’t requires another et of formulas to update). I’ve also used this concept for a quiz engine, the files are easy to modify and instead of the save engine I have a correction engine which determines the users score. And with a quick $_GET script I can load an infinite number of quizes without ever having to re-look at the correction or display code. It’s all in the implementation of the ideal.

Please note that none of the code on this page has been tested and was written from memory, if there’s one thats not working post a comment and I’ll fix it up for you.