CODEWITHSUNDEEP
javascriptjqueryfile-uploadimage-uploadingjquery-file-upload
user2802283
user2802283

Reputation: 99

krajee ajax-based-file-uploads-using-fileinput-plugin

First sorry for my poor english ;

i am searching a good file upload with images in thumbnails..

i found Krajee bootstrap-fileinput http://plugins.krajee.com/file-input

which , i think, is very complete.

i have succeeded to upload photos

here is my code:

$("#images").fileinput({

    uploadUrl: strURL, // you must set a valid URL here else you will get an error
    uploadAsync: true,

    previewFileType: "image",
    allowedFileExtensions: ["jpg", "gif", "png"],
    allowedFileTypes: ["image"],

    showUpload:true,
    maxFileSize: 5000,
    minFileCount: 1,
    maxFileCount: 8,

    elErrorContainer: "#errorBlock",

    overwriteInitial: false,
    initialPreview: [
    "<img src='http://lorempixel.com/200/150/people/1'>",
    "<img src='http://lorempixel.com/200/150/people/2'>",
                    ],
    initialPreviewShowDelete: true,
    initialPreviewConfig: [
    {caption: "People-1.jpg", width: "42px", url: "/site/file-delete", key: 1},
    {caption: "People-2.jpg", width: "42px",  url: "/site/file-delete", key: 2}, 
                          ],
                     });

But now , after having uploaded photos , i would like the user to modify (delete previous uploaded photos , add new etc..)

so , i have to use initialPreview and initialPreviewConfig options...

but i don't know how to put photos from server side in these options ??

i need to use server code to generate the initial javascript for initializing the file input

I have tried:

controller(MVC)

$preview = array("<img src='<?php echo DIR;?>images/2015/Mars/100_3641.jpg' class='file-preview-image' >",
                         "<img src='<?php echo DIR;?>images/2015/Mars/100_3785.jpg' class='file-preview-image' >");

View:

$("#images").fileinput({

    uploadUrl: strURL, // you must set a valid URL here else you will get an error
    uploadAsync: true,
    ......................

    initialPreview: '<?php echo $preview; ?>'  ,   //   images from  server ????
    initialPreviewShowDelete: true,
    ....................................
                     });

But it is not correct !!

How can i do that ??

Many thanks

Upvotes: 2

Views: 2976

Answers (1)

Bak
Bak

Reputation: 262

Make a Json Array

$json_preview = json_encode($preview);

$("#images").fileinput({

    uploadUrl: strURL, // you must set a valid URL here else you will get an error
    uploadAsync: true,
    ......................

    initialPreview: <?php echo $json_preview; ?>  ,   //   images from  server ????
    initialPreviewShowDelete: true,
    ....................................
                     });

Upvotes: 1

Related Questions