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

Jason · Accepted Answer · 2014-03-05 02:43:43Z

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);
    }
})

user28864 · Accepted Answer · 2017-07-26 00:21:47Z

Although this is an old post, nonetheless, I found multiple ways of adding more data to uploaded files in the jQuery-File-Upload documentation and my preferred solution is the one were you can add fields to individual uploaded files in the template script. For Example:

<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>

And Submit the the data like so:

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
var inputs = data.context.find(':input');
if (inputs.filter(function () {
        return !this.value && $(this).prop('required');
    }).first().focus().length) {
    data.context.find('button').prop('disabled', false);
    return false;
}
 data.formData = inputs.serializeArray();
});

Collectives™ on Stack Overflow

Adding Title field to Jquery File Upload?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related