How to clean/reset bootstrap fileinput after selecting new image?

Question

I am trying to clean/reset after selecting new image.

After selecting image, clean Initial Preview

Follows the code:

HTML:

<input id="input-pd" name="input-pd[]" type="file" multiple class="file-loading">

JS:

$("#input-pd").fileinput({
    uploadUrl: "/file-upload-batch/1",
    uploadAsync: false,
    minFileCount: 2,
    maxFileCount: 2,
    overwriteInitial: false,
    initialPreview: [
        // IMAGE DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
        // IMAGE DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg"
    ],
    initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
    purifyHtml: true, // this by default purifies HTML data for preview
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, places",
    }
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
    console.log('File uploaded params', params);
});

    $('#input-pd').on('change', function(event) {
        $('#input-pd').fileinput('clear');
        $('#input-pd').fileinput('reset');
        //$('#input-edit').fileinput('refresh');
    });

Here it is in jsfiddle: https://jsfiddle.net/DTcHh/30077/

Some solution ?

Answer 1

Sometimes we’re so focused on "focus the image closely when we should be focusing from afar".

I think it was just a lack of attention in the code. If you look closely you have an option for this plugin right at the beginning of the code that says:

overwriteInitial: false,

Just change it to:

overwriteInitial: true,

https://jsfiddle.net/shuffledPixels/DTcHh/30078/

$("#input-pd").fileinput({
    uploadUrl: "/file-upload-batch/1",
    uploadAsync: false,
    minFileCount: 2,
    maxFileCount: 2,
    overwriteInitial: true,  /** <-- ###### Aqui está a opção a que me referi acima */
    initialPreview: [
        // IMAGE DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Desert.jpg",
        // IMAGE DATA
        "http://kartik-v.github.io/bootstrap-fileinput-samples/samples/Lighthouse.jpg"
    ],
    initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
    initialPreviewFileType: 'image', // image is the default and can be overridden in config below
    purifyHtml: true, // this by default purifies HTML data for preview
    uploadExtraData: {
        img_key: "1000",
        img_keywords: "happy, places",
    }
}).on('filesorted', function(e, params) {
    console.log('File sorted params', params);
}).on('fileuploaded', function(e, params) {
    console.log('File uploaded params', params);
});

$('#input-pd').on('change', function(event) {
    $('#input-pd').fileinput('clear');
    $('#input-pd').fileinput('reset');
    //$('#input-edit').fileinput('refresh');
});