BlueImp jQuery FIle Upload - Adding customizable name field for each file

Question

I have issues while adding name field multiple file upload in blueimpe jquery.

It always takes the last assigned value for the name text field. how to fix this?

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
  {% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr class="template-upload">
    <td class="preview"><span class="fade"></span></td>
    <td class="name"><span>{%=file.name%}</span></td>

    <td class="image_name"><span><input type="text" name="image[name]"value="{%= file.name.split('/').pop().split('.').shift()%}" required/></span></td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    {% if (file.error) { %}
    <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
    {% } else if (o.files.valid && !i) { %}
    <td>

    </td>
    <td class="start">{% if (!o.options.autoUpload) { %}
      <button>

        <span>{%="Upload"%}</span>
      </button>
      {% } %}</td>
    {% } else { %}
    <td colspan="2"></td>
    {% } %}
    <td class="cancel">{% if (!i) { %}
      <button >

        <span>{%="Remove"%}</span>
      </button>
      {% } %}</td>
  </tr>
  {% } %}
</script>

I have tried all the ways.

Answer 1

add this in the submit callback

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    var inputs = data.context.find(':input');
    if (inputs.filter('[required][value=""]').first().focus().length) {
        return false;
    }
    data.formData = inputs.serializeArray();
 });

.first() will take the first input value.