How can I customize FancyUpload to upload multiple files, each with its own data (e.g. caption, title)?

Question

I'll be answering this question

I want to allow my users to upload multiple files in one go and want to use FancyUpload to do it. I can get a basic version of FancyUpload working but I now need to allow users to specify some metadata for each file such as a caption or title.

Unfortunately, I've run into a couple of problems. First, I need to visually link the inputs for a file with that file. Upon choosing files for upload, FancyUpload displays a list of those files. Therefore, I will need a differing number of inputs depending on how many files have been chosen and I will also need to associate each of those inputs with a specific file.

Second, I need to POST the metadata along with the file. However, FancyUpload only allows you to specify metadata for every file. That is, I can have an input and add it as a POST parameter but then every file will receive that parameter. I need to be able to specify, say, a title for each file that is sent.

Answer 1

Please note that this answer assumes a working knowledge of JavaScript and Mootools. I'll tackle each problem in turn:

Rendering the Inputs

It turns out that the rendering of each file is handled by a method on the FancyUpload2.File class. To alter it, we will need to implement it as follows:

FancyUpload2.File.implement({
    render: function() {
    //copy the entire render function in here
    }
});

Make sure you copy the entire render function across. At the moment, this will just override the default render method with... the default render method. However, we only want to alter the rendering process, not rewrite it so this is good. About halfway through the method is the line this.element = new Element('li', {'class': 'file'}).adopt( and then a list of elements inside the adopt method that FancyUpload will render. At the very end of the adopt method, enter the following:

new Element('input', {'class': 'caption', 'name': 'caption[]', 'type': 'text'})

As you can see this will add a new input to the list, intended to get a caption from the user. You might also want to add in a label and any other form elements.

Now if you select some files, you will notice that they are all rendered with the extra elements you have specified.

Posting the Inputs

When you create the FancyUpload object, you need to specify a new event in its options object:

onBeforeStart: function() {
    var listSize = this.fileList.length;
    for (var i=0; i < listSize; i++){
        var caption = this.fileList[i].element.getElement('input.caption').get('value');
        var opts = $merge(this.options.data, {
            'caption': caption
        });
        this.fileList[i].setOptions({'data' : opts});
    }
}

onBeforeStart gets fired just before we send the AJAX request. This means anything we do here will be done after the user has finished entering data and before that data gets sent. Brilliant! We need to add the new data to each file so the first thing to do is iterate over the file list. Then we find the value of caption input associate with the current file in the list and assign it to the var caption.

Then we access the files data with this.options.data and use $merge to create a new object with all that data and our new data as well. We assign this object to var opts. Finally we overwrite the files original options by using setOptions. Now when the file is sent, out data gets sent along with it and will be accessible from $_POST if you are using PHP.

Credits: I found the key to the solution to the second problem in this post.