Blog Post default image

I have a love hate relationship with Plupload, if you are unsure what Plupload is, it’s a jQuery script that gives your users the ability to upload files. Very useful, but oh so difficult to implement, hence why we use Plup.

The issue is, Plup if it were a political leader is a Facist, it has a certain way it wants you to do things, and you will not differ from the assignment. The plugin is rigidly attracted to it’s own stupid plupload interface. Now if you are an interface developer like me and you work on different applications you will know the interface for a plugin gets thrown out on day one, it’s the actual API and functions you are interested in. You want your site to look uniform and there are client expectations to meet. Sadly Facism does not fit this model which is why Plup sucks so badly as soon as you want to roll a custom uploader, I mean it doesn’t even have a reset method, NO SERIOUSLY, you can’t reset the plugin via the API.

Keep reading and I will show you guys a bunch of ways to beat Plup into submission for your custom uploaders.

Single file upload

One of the most popular requests for custom uploaders is simply uploading one file at a time. Plup doesn’t allow this, it gives you a visual queue via the interface of all files, and simply allows you to drag in as many as you want. See Stack for about 30 example fixes that don’t work.

Here is one that does.

function onFilesAdded(up, files)
{
	// Clear the HTML
	$('#plupload-files').html('');

	// If the file length > one, 
	if (up.files.length > 1) {
		//destroy the entire queue via plups splice method.
		uploader.splice(0, up.files.length);
		//restore the queue with a single file
                //this actually causes filesadded to fire again, but with a single file of your choosing
		this.addFile(files[0]);
		return;
	}	
	
	// We should only ever get one file here but loop it just incase, and create a visual reference.
    $.each(up.files, function(i, file) 
    {
    	var div = $('
').html ( file.name + ' (' + plupload.formatSize(file.size) + ') 0%' ) $('#plupload-files').append(div); }); }

this.addFile(files[0]); Is the important part, Plup does not offer a method to determine before we add files if we truly wanted to add them, it just assumes we want all files that satisfy it’s crappy extension filter, and adds them before you get a chance to say, hey hold up a second.

You will notice that each time you drag a new set of files or a single one, it takes the first file in that new group of file/s as the new file to display and upload. Most of the solutions that currently exist, append a new single file, so each time a user drops files in you get a single new file so you wind up with a queue and visual that is longer than 1 file, that is very different from uploading a single file and having plup visually show one file at a time.

Basic reset()

This is a very simple reset for plup without re-initialising the whole plugin

function plupreset(uploader)
{
        // Clear the HTML
	$('#plupload-files').html('');
        // Clear the queue
        uploader.splice(0, uploader.files.length);
}

Extension Management

Do you want to do something when someone uploads a jpg, instead of a png, or action a method on a specific file type, yes you do. Does Plup allow that, no it does not. It only allows you to specify a list of allowed file types.

Here is how to get the extension of a file for use

    var
        firstFile = up.files[0],
        tmp = firstFile.name.split('.'),
        extension = (tmp[tmp.length-1]).toLowerCase();

We split the file name based off the period, and take the last string, which is always going to be the extension of a file.

Once you have the extension you can do what ever you want with the files, I usually have this in my filesAdded callback. I find this far more appropriate than Plup forcing me into their error callback, so typically I won’t specify any filters on plup.

When I get a file I don’t like

// Onfilesadded
// get extension
// if not one we want
// add to an array[]
// pass array[] to removeFiles

function removeFiles(uploader, files) 
{
    $.each(files, function(i, file) {
	$('#'+file.id).remove();
	uploader.removeFile(file);
    });
}

This visually clears and also takes them out of the queue.

I have many more Plup tips and code which I will post up in the coming days.

Enjoy!

Post a Comment