valums AJAX file upload single item fix

Valums ajax upload script is a very nice, clean, and simple to integrate script for uploading files synchronously with ajax (and if it’s not supported in your browser iframes). It’s simply the best implementation I’ve seen, except for one minor glitch.

If you tell it to not allow multiple synchronous file uploads (instead allowing one at a time) it still allows you to drag and drop more than one file at a time, until now. Earlier today at work I programmed in a fix (along with some other modifications to the naming and saving and layout system) that will throw up a message when you try and drop more than 1 file at a time.

The solution is below, note that it starta at line 574

Snipplr: http://snipplr.com/view/50846/valums-ajax-file-upload-single-item-fix/

The key is to replace the line “self._uploadFileList(e.dataTransfer.files);” (originally at line 577) with that simple for and if statement that checks if they have multiple uploads disabled, and if they do and there trying to upload multi files, throws an error message. Pretty simple but I figured I’d post it so nobody else has to fig through the code to find it.

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.