How can I binding image by Base64?

[amir3164]

hi how bind img data-default-file bianary

<input type="file" asp-for="Images" id="input-file-now-custom-1" class="dropify" data-default-file='@ViewBag.img' />

[Aresenka]

Have same issue. Default file stored in database as base64 string and now I'm forced to store file at server to show preview of default file.

[aboyenval]

Hi, Think it's too late, but I've the same issue today so here is my solution:

HTML part: -Create an img element which is hidden and have an attribute with the name of the input[file] dropify element. example <img data-dropify-name="logo" style="display:none" src=""> -Writethe base64 value of image in the src attribute of this element -Set the data-default-file attribute of the dropify element with a tempopary image (to force preview)

Javascript part (width Jquery):

$(function(){
    // for each elements with the attribute data-dropify-name
    $.each($("[data-dropify-name]"), function()
    {
        // get name on the dropify element to change
        var name = $(this).attr("data-dropify-name");
        // get the correspond input file element
        var inputElem = $("input[name='"+name+"']");
        // get the img element created by dropify to preview the file passed in data-default-file
        var img = $(inputElem).closest("div").find(".dropify-render").find("img");
        // copy src attribute of hidden img to this image
        $(img).attr("src", $(this).attr("src"));
    });
});

Hope it help

[ruleboy21]

I had the same Issue but found a way to solve it. It's fairly simple.

function resetPreview(name, src, fname=''){
    let input    = $('input[name="'+name+'"]');
    let wrapper  = input.closest('.dropify-wrapper');
    let preview  = wrapper.find('.dropify-preview');
    let filename = wrapper.find('.dropify-filename-inner');
    let render   = wrapper.find('.dropify-render').html('');

    input.val('').attr('title', fname);
    wrapper.removeClass('has-error').addClass('has-preview');
    filename.html(fname);

    render.append($('<img />').attr('src', src).css('max-height', input.data('height') || ''));
    preview.fadeIn();
}

Where name is the name of the field, src is the base64 string or real image src like example.jpg and lastly fname is the filename to be displayed.

Simply call the function anywhere you want in your code after initializing dropify. Eg.

$('input[name="dropify"]').dropify();
resetPreview('dropify', 'data:image/jpg;base64,AAAAAAAAA', 'Image.jpg');

Hope it help