Adding Title field to Jquery File Upload?

Question

Using Jquery File Upload I'd like to add a title field for each file uploaded. So that once a file was uploaded a text box for title was added below each file.

The section Setting formData on upload start for each individual file upload seems like what I want to do but I'm not exactly sure where to put that.

https://github.com/blueimp/jQuery-File-Upload/wiki/How-to-submit-additional-form-data

Tried adding this to the html but didn't do anything.

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <!-- ... -->
        <td class="title"><label>Title: <input name="title[]" required></label></td>
        <!-- ... -->
    </tr>
{% } %}
</script>

Thanks

Answer 1

Not the way the docs describe to do it but seems to work. Added this line.

.append('<br /><strong>Photo Description</strong>: <input type="text" name="title[]" value="">');

to this section

 .on('fileuploadadd', function (e, data) {
    data.context = $('<div/>').appendTo('#files');
}).on('fileuploadprocessalways', function (e, data) {
    var index = data.index,
        file = data.files[index],
        node = $(data.context.children()[index]);
    if (file.preview) {
        var node = $('<p/>')
        .append($('<span/>').text(file.name))
        .append('<br /><strong>Description</strong>: <input type="text" name="title[]" value="">');
        node.appendTo(data.context);

        node = $(data.context.children()[index]);
        node
            .prepend('<br>')
            .prepend(file.preview);
    }
    if (file.error) {
        alert(file.error);
    }
    if (index + 1 === data.files.length) {
        data.context.find('button')
            .text('Upload')
            .prop('disabled', !!data.files.error);
    }
})