krajee Bootstrap File Input - how can I send additional data per file using uploadAsync: true

Question

I have edited the layoutTemplates -> footerTemplate to include a text field for a comment per image. But when I submit the data, there is no POST for the comment at the server.

var footerTemplate = '<div class="file-thumbnail-footer">\n' +
        '   <div style="margin:5px 0">\n' +
        '       <input class="form-control input-sm text-center {TAG_CSS_NEW}" value="{comments}" name="comment[]" type="text" placeholder="Enter Details...">\n' +
        '   </div>\n' +
        '   <div style="margin:15px 0 5px 0px"><samp><small class="file_name">{caption}</small></samp></div>\n' +
        '   {size}\n' +
        '   {progress} {actions}\n' +
        '</div>'; 


layoutTemplates: {
                    footer: footerTemplate, size: '<samp><small>({sizeText})</small></samp>',
                    actionUpload: '<button type="button" class="kv-file-upload {uploadClass}" style="display:none;" title="{uploadTitle}">{uploadIcon}</button>\n',
                    actionZoom: '<button type="button" class="kv-file-zoom {zoomClass}" style="display:none;" title="{zoomTitle}">{zoomIcon}</button>',
                },

I was going to use uploadExtraData:

 var out = {}; 

            var i = 0;
            out['commentsToUpdate'] = [];

            $('.file-initial-thumbs .kv-input:visible').each(function() {
                $el = $(this);                         
                out["commentsToUpdate"][i] = $el.val();
                i++;
            });

            var i = 0;
            out['commentsToAdd'] = [];

            $('.file-live-thumbs .kv-input:visible').each(function() {
                $el = $(this);                         
                out["commentsToAdd"][i] = $el.val()+"::+::";
                i++;
            });

            return $out;

But this sends the comments in all images for every one image that is uploaded.

I want to update my database with the comments, but if I drag 10 images into the file input my database would make 100 updates/requests, 10 posted comments, 10 times.

Please help :) thanks

Answer 1

You can use a callback function in the uploadExtraData

  ...
  ...            
                ], 
                uploadExtraData: function(previewId, index) {


                    return {
                              key: index,
                              previewId: previewId,
                              comment: $("#comment").val(),
                              userid: <?=$userId;?>,
                              jobid: <?=$jobId;?>
                            };

                }
 ...
 ...