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

Question

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

Navigation

#1 by (2 votes)

2

I'm trying to clear / reset after selecting new image.

After selecting image, clean Initial Preview

Follow 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's at jsfiddle: link

Any solution?

javascript html5 bootstrap-3

asked by anonymous 22.02.2017 / 01:56

1 answer

Separate only the email and user from a string Backtracking in Python

score 2 · Accepted Answer

At times we're so focused on " focusing on the image closely when we should be focusing from a distance."

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

overwriteInitial: false,

Just change it to:

overwriteInitial: true,

link

$("#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');
});