autoReplace and maxFileCount - image replace is not triggered without page refresh

[Gritmatch]

Prerequisites

• [ X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [ X] The issue still exists against the latest master branch of bootstrap-fileinput.
• [ X] This is not an usage question. I confirm having read the plugin documentation and demos.
• [X ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [ X] I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

I am using autoReplace: true; and maxFileCount: 1; setting.

Expected behavior and actual behavior

When I upload the file, it is displayed in preview area as expected. Now I click browse button again and select a different file. I expect the new file to replace the just uploaded file, but it does not. Please see this screenshot. As you can see, the 1-st image still points to data:image (as opposed to the file's uploaded location on the server).

Now, if I refresh the page, the uploaded image starts pointing to the server location and only then if I select Browse again, the new image would replace the one displayed in preview.

Is there a way to replace the uploaded image without having to refresh the page?

Also, in general, the fact that newly uploaded images do not seem to count towards uploaded total, client side validation such as maxTotalFileCount is not triggered properly. If my maxTotalFileCount is 4 and I upload batch of 3, do not refresh the page and upload another batch of 3, I will not get an error that maxTotalFileCount is breached because the plugin "thinks" there are no files uploaded yet, even though I now have 6 uploaded. I include this example in the same issue because (I believe) the root cause is the same.

One more example would be inconsistency with $('#input2').fileinput('getFrames', '.file-preview-initial') example from here. Unless the page is refreshed, the total will not include newly uploaded initial preview frames.

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version:
• bootstrap-fileinput version:

Isolating the problem

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Gritmatch]

This issue still exists. Commenting to get the issue out of "stale" status.

[kartik-v]

Enhanced/Fixed via above commit.