How to get InitialPreview of files with Ajax

Web Tips Q & ACategory: Krajee PluginsHow to get InitialPreview of files with Ajax
Sigal asked 1 year ago

Hello,
I am trying to use Bootstrap fileinput plugin.

I want to populate the InitialPreview with files from the database through an ajax call.

I tried this code (see below), I am getting back this string in the preview variable:

"<img style='height:160px' src='ctf.dev/uploads/events/BMS_event.jpg'>,"

But no files are displayed in the preview.

My code:
$("#eventFiles").fileinput({
        uploadUrl: "/modules/events/ajax/upload_event_files.ajax.php",
        uploadAsync: false,
        showCaption: false,
        minFileCount: 1,
        overwriteInitial: false,
        initialPreview: [ get_files() ],
        initialPreviewConfig: [
            {caption: "People-1.jpg", width: "120px", url: "/site/file-delete", key: 1}
        ],
        uploadExtraData: {
            event_id: $('#eventId').val()
        }
    });

function get_files()
{
$.ajax({
        url: '/modules/events  /ajax/get_event_files.ajax.php?event_id='+event_id,
        async: false,
        dataType: 'json',
        success: function(data) {
            var preview = '';

            $.each(data.preview, function(key, val) {
                preview += val + ',';
            });

            return preview;
        }
});
}

Then I tried something else, I populate a hidden field on the form with the files I get from the database, and in IntialPreview I put: $('#fieldId').val().

but now I have 2 questions:

    1. What should I do when the file is a pdf or text or whatever and not an image, what should I put in this hidden field? e.g. for image I put: <img style='height:160px' src='http://ctf.dev/uploads/events/BMS_event.jpg'> but what would I put for pdf? or text file or video?

    2. When I have more than 1 file the hidden field has this value:
<img src='file1_src'>, <img src='file2_src'>

Then I get the thumbnails in the preview but with comma between them.

Can someone please help?
jayskim0808 replied 4 months ago

I have similar issues. i think there is a bug on this.

jayskim0808 replied 4 months ago

i solved the issue using array push function.

Login or register to contribute or comment.

Login   Register