How to preload picture images into the plugin?

[khmerlove]

I do not know how to preload images from an existing directory into the plugin ? Please help me!!!

[alpo008]

Hi, khmerlove, are you still need a solution?
Yesterday I had to invented one and I can share it.
Sincerely, Alex.

[cresusjpt]

please share with us

[alpo008]

Hello @cresusjpt!
Six months ago I did it this way:
First I rendered existing photos in the hidden container .existing-photos.hidden

foreach ($model->getGalleryPhotos()->orderBy(['id' => SORT_DESC])->all() as $photo) :
...
//see the attached file
...
php endforeach;

Second on document load I moved these photos into widget container and deleted hidden:

$(document).ready(function(){
var $existingPhotos = $(".existing-photos .files");
$("#room-uploadedphotos-fileupload .files").html($existingPhotos.html());
$(".existing-photos").remove();
});

And here you can see widget settings for my case:

echo FileUploadUI::widget([
'model' => $model,
'attribute' => 'uploadedPhotos',
'url' => Url::toRoute(['photos-upload', 'id' => $model->id]),
'gallery' => false,
'fieldOptions' => [
'accept' => 'image/*'
],
'clientOptions' => [
'maxFileSize' => 2000000,
'prependFiles' => true,
'dataType' => 'json'
],
'clientEvents' => [
'fileuploaddone' => 'function(e, data) {
$(document).find(".existing-photos").remove();
var that = $(this).data("blueimp-fileupload") ||
$(this).data("fileupload"),
getFilesFromResponse = data.getFilesFromResponse ||
that.options.getFilesFromResponse,
files = getFilesFromResponse(data),
template,
deferred;
template = that._renderDownload(files);
$(".files").html(template);
$(".files").find("tr.fade").addClass("in");
}',
'fileuploadfail' => 'function(e, data) {
}',
],
]);
:
You can see the code here
Please do not hesitate to contact me if you find any unclearness.
Have a nice day.
Alex.

[cresusjpt]

thank you, i'll try it and get back to you if i need more explication. Le ven. 31 août 2018 à 10:57, Alexey POZHIDAEV <[email protected]> a écrit :

…

Hello @cresusjpt <https://github.com/cresusjpt>! Six months ago I did it this way: *First* I renderd existing photos in the hidden container ` getGalleryPhotos()->orderBy(['id' => SORT_DESC])->all() as $photo) : ?> fileName ?> formatter->asShortSize(filesize($model->originalsDirectory . $photo->fileName), 2)?> Delete ` **Second** on document load I moved these photos into widget container and deleted the hidden one: ` $(document).ready(function(){ var $existingPhotos = $(".existing-photos .files"); $("#room-uploadedphotos-fileupload .files").html($existingPhotos.html()); $(".existing-photos").remove(); }); ` And here you can see widget settings for my case: ` $model, 'attribute' => 'uploadedPhotos', 'url' => Url::toRoute(['photos-upload', 'id' => $model->id]), 'gallery' => false, 'fieldOptions' => [ 'accept' => 'image/*' ], 'clientOptions' => [ 'maxFileSize' => 2000000, 'prependFiles' => true, 'dataType' => 'json' ], 'clientEvents' => [ 'fileuploaddone' => 'function(e, data) { $(document).find(".existing-photos").remove(); var that = $(this).data("blueimp-fileupload") || $(this).data("fileupload"), getFilesFromResponse = data.getFilesFromResponse || that.options.getFilesFromResponse, files = getFilesFromResponse(data), template, deferred; template = that._renderDownload(files); $(".files").html(template); $(".files").find("tr.fade").addClass("in"); }', 'fileuploadfail' => 'function(e, data) { }', ], ]); ?> ` Please do not hesitate to contact me if you find any unclearness. Have a nice day. Alex. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#135 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AYPmgo3HCevAB6bJ4hqNxzYWghYN4jPKks5uWPqSgaJpZM4RY6iM> .

[speker2010]

From Jquery File Upload plugin's html files I got this:

    var passscans = $('#documents-files-fileupload').addClass('fileupload-processing');
        $.ajax({
            url: '{$passScansUrl}',
            dataType: 'json',
            context: passscans[0]
        }).always(function () {
            $(this).removeClass('fileupload-processing');
        }).done(function (result) {
            $(this).fileupload('option', 'done')
                .call(this, $.Event('done'), {result: result});
        });

where in $passScansUrl:
$passScansUrl = Url::toRoute(['site/get-files', 'app_id' => $model->Application->id]);

where get-files action:

public function actionGetPassScans() {
    $files = FileHelper::findFiles($directory);
    $output = [];
    foreach ($files as $file) {
        $fileName = basename($file);
        $path = '/img/temp/' . Yii::$app->session->id . DIRECTORY_SEPARATOR . $fileName;
        $output['files'][] = [
            'name' => $fileName,
            'size' => filesize($file),
            'url' => $path,
            'thumbnailUrl' => $path,
            'deleteUrl' => 'image-delete?name=' . $fileName,
            'deleteType' => 'POST',
        ];
    }
    return Json::encode($output);
}