Bootstrap fileinput remove all files file instead of specific preview file to be removed

Question

Im using this awesome plugins

This is my success scenario:

1. Upload multiple files
2. thumbnail preview with delete button on each thumbnail is displayed successfully
3. I click "Save"
4. Save to database perfectly fine.

And this is my error scenarion:

1. Upload multiple files, (eg: 5)
2. thumbnail preview with delete button on each thumbnail is displayed successfully
3. I then remove 2 of them using delete button on each thumbnail
4. I click "Save"
5. The rest 3 files in not saved to database.

It seems that the delete button on each thumbnail deleting all files instead their current thumbnail. What's wrong?

this is my script:

var ids = $('#product-images-id').data('ids'); // use to initialize data in edit

if (ids) {
  ids = ids.map(function(v) {
    return eval('(' + v + ')');
  });

  $('#input-file').fileinput({
      initialPreview: $('#product-images').data('images'),
      initialPreviewConfig: ids,
      overwriteInitial: false,
      showUpload: false,
      initialPreviewShowDelete: true,
      showUploadedThumbs: true,
      browseIcon: '<i class="fa fa-folder-open"></i> ',
      removeIcon: '<i class="fa fa-trash-o"></i> ',
      uploadUrl: "/file-upload-batch/2",
      previewFileIcon: '<i class="fa fa-file"></i>',
      layoutTemplates: {
          actions: '<div class="file-actions">\n' +
                  '    <div class="file-footer-buttons" style="float:none">\n' +
                  '        {upload}{delete}{other}' +
                  '    </div>\n' +
                  '</div>',
          actionDelete: '<button type="button" class="kv-file-remove btn btn-danger btn-block" {dataUrl}{dataKey}><i class="fa fa-trash-o"></i> Delete</button>',
          actionUpload: '',
      },
      previewTemplates: {
          image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
                  '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 113px;">\n' +
                  '   {footer}\n' +
                  '</div>\n',
      }
  });
}

I've been facing this issue for 3 days and not yet solved. Please help, thanks in advance

Answer 1

You must use the uploadUrl to save the files and the rest of the form data via AJAX. So instead of submitting the form you should use uploadExtraData in the options and trigger the upload event. Something like this:

var ids = $('#product-images-id').data('ids'); // use to initialize data in edit

if (ids) {
  ids = ids.map(function(v) {
    return eval('(' + v + ')');
  });

  $('#input-file').fileinput({
      initialPreview: $('#product-images').data('images'),
      initialPreviewConfig: ids,
      overwriteInitial: false,
      showUpload: false,
      initialPreviewShowDelete: true,
      showUploadedThumbs: true,
      browseIcon: '<i class="fa fa-folder-open"></i> ',
      removeIcon: '<i class="fa fa-trash-o"></i> ',
      uploadUrl: "/file-upload-batch/2",
      previewFileIcon: '<i class="fa fa-file"></i>',
      layoutTemplates: {
          actions: '<div class="file-actions">\n' +
                  '    <div class="file-footer-buttons" style="float:none">\n' +
                  '        {upload}{delete}{other}' +
                  '    </div>\n' +
                  '</div>',
          actionDelete: '<button type="button" class="kv-file-remove btn btn-danger btn-block" {dataUrl}{dataKey}><i class="fa fa-trash-o"></i> Delete</button>',
          actionUpload: '',
      },
      previewTemplates: {
          image: '<div class="file-preview-frame" id="{previewId}" data-fileindex="{fileindex}">\n' +
                  '   <img src="{data}" class="file-preview-image" title="{caption}" alt="{caption}" style="width: 200px;height: 113px;">\n' +
                  '   {footer}\n' +
                  '</div>\n',
      },
      uploadExtraData : function (previewId, index) {
		    var obj = {};
		    $('#form-id').find('input,select').each(function() {
		        var id = $(this).attr('name'), val = $(this).val();
		        obj[id] = val;
		    });
		    return obj;
      }
  });
}

$('#form-id').submit(function(event) {
  event.preventDefault();
  $('#input-file').fileinput('upload');  
});