Search code examples
javascriptjqueryasp.net-mvctwitter-bootstrappopover

Preview image on popover, not displaying correctly

Can anyone help me with popover image preview, the problem is upon hovering the image preview wont display/update the selected image.

This is my field upon hovering the selected file image should display on popover. enter image description here

as you can see below when i hover the first image it gives me the right imageenter image description here

but when i hover to the next image which should give me a desert image it still display the previous image

enter image description here

however it gives me the right output when i hover it again enter image description here

Here is my code for popover

$('.example-popover').popover({
                trigger: 'hover',
                container: 'body',
                html: true,
                placement:'bottom',
                content: function () {
                    var x = $(this).closest('div').find('#RawImage');
                    if (x[0].files && x[0].files[0]) {
                        var reader = new FileReader();

                        reader.onload = function (e) {
                            $('#img-prview').attr('src', e.target.result);
                        }

                        reader.readAsDataURL(x[0].files[0]);
                    }

                    return $('.img-container').html()
                }

            })

Here is my HTML

<div class="img-container hidden">
        <img id="img-prview" src="#" style="width:50%"/>
    </div>
    <div class="form-group has-feedback">
        <div class="row">
            <div class="col-md-1">
                Image
            </div>
            <div class="col-md-6">
                @Html.TextBoxFor(m => m.RawImage, new { Class = "form-control", Placeholder = "Image",type="file" })
                @Html.ValidationMessageFor(m => m.RawImage, null, new { Class = "text-danger" })
                <a href="#"><i class="fa fa-image example-popover"></i></a>
            </div>
        </div>
    </div>
    <div class="form-group has-feedback">
        <div class="row">
            <div class="col-md-1">
                Image
            </div>
            <div class="col-md-6">
                @Html.TextBoxFor(m => m.RawImage, new { Class = "form-control", Placeholder = "Image",type="file" })
                @Html.ValidationMessageFor(m => m.RawImage, null, new { Class = "text-danger" })
                <a href="#"><i class="fa fa-image example-popover"></i></a>
            </div>
        </div>
    </div>

I hope you can give me how can i preview the image on popover. Thanks

Solution

  • I already found a solution with this, but it has a delay.

    I think the problem was the reader.onload it returns the img-container html first before changing the img src.

    so this is what i did

    $('.example-popover').popover({
                trigger: 'hover',
                container: 'body',
                html: true,
                placement:'bottom',
                content: function () {
                    var x = $(this).closest('div').find('#RawImage');
                    var imgByte = '';
                    if (x[0].files && x[0].files[0]) {
                        var reader = new FileReader();

                        reader.onload = function (e) {
                            $('#previmg').attr('src', e.target.result);
                        }

                        reader.readAsDataURL(x[0].files[0]);
                    }
                    return '<img id="previmg" src="#" style="width:100%"/>'
                }
            })

    Thanks everyone! Hopes this can be a reference for someone!