generate initialPreviewConfig from the server c# mvc

[HKhedr]

$(document).on('ready', function () {
    var $input = $(':file');
    $input.fileinput({
        showUpload: false,
        minFileCount: 1,
        maxFileCount: 10,
        validateInitialCount: true,
        maxFileSize: 25 * 1024,
        msgSizeTooLarge: 'File "{name}" (<b>{size} KB</b>)'
                        + 'exceeds maximum allowed upload size of <b>{25} MB</b>. '
                        + 'Please retry your upload!',
        allowedFileExtensions: ['zip', 'rar', 'tar', 'gzip', 'gz', '7z', 'png', 'jpg', 'txt', 'doc', 'docx', 'pdf'],
        uploadUrl: '@Url.Action("_UserFiles", "Home")'
    })
});

public class jsonFileResult
{
    public string initialPreview { get; set; }
    public string[,] initialPreviewConfig { get; set; }
    public bool append = true;
}

public JsonResult _UserFiles(HttpPostedFileBase FileUpload)
    {
         if (FileUpload != null)
        {
            string UserFile = Guid.NewGuid().ToString("N") + "_" + Path.GetFileName(FileUpload.FileName);
            FileUpload.SaveAs(Path.Combine(Server.MapPath("~/UserFile/"), UserFile));
            UserFile = "~/UserFile/" + UserFile;
            UserFile = Url.Content(UserFile);
            string deleteURL = Url.Action("_DeleteFile", "Home");
            jsonFileResult result = new jsonFileResult()
            { 
                initialPreview = "<img src='"+ UserFile +"' class='file-preview-image'>",
                initialPreviewConfig = new string[,]
                {
                    { "caption" , FileUpload.FileName },
                    { "url" , deleteURL },
                    { "key" , "1" },
                    { "width" , "120px" }
                }
            };
            return Json(result);
        }
        return Json("There is error try again later");
    }

[HKhedr]

that code not working any help !!!!?

[kartik-v]

Unfortunately cannot help in debugging your code. Please debug and check on your environment.

Just try it with a simple HTML5 and javascript code as seen in the examples folder of the plugin. Then see how you integrate it with your server code.

Use this repo to report plugin specific issue or enhancements.

If you need newbie help OR have generic programming queries or need programming tips - there is a new forum created for this. Please ask a question on the forum here.

[HKhedr]

footer delete icon disable, is there error in my code !!!?

[Guilherme88]

Hi HKhedr, I did different of you and it is working... Try replace your jsonFileResult class for this:

                      var config = new {
                            initialPreview = "<img src='"+ UserFile +"' class='file-preview-image'>",
                            initialPreviewConfig =new[] {
                                new {
                                    caption = FileUpload.FileName,
                                    url = deleteURL,
                                    key ="1",
                                    width = "120px"
                                }
                            },
                            append =true
                        };                        
                        return Json(config);

[HKhedr]

@Guilherme88
working perfectly Thank you very much

[ghost]

After initializing the image, click the delete button. Why is there no response? Can I delete the image by ajax? Can you help me?

[noblekurian13]

Hi, Firstly hats off for an amazing plugin. I am facing an issue. I am trying to load the preview from the server using mvc and pass the required data as below var initialPreview = @Html.Raw(Json.Encode(ViewBag.InitialPreview)); var initialPreviewConfig = @Html.Raw(ViewBag.InitialPreviewConfig);

my rendered initialization is as below - var eventID = '2'

    var initialPreview = ["/Images/Events/2/4MB_Best-Koenigsegg-Agera-RS-Wallpaper.jpg","/Images/Events/2/4MB_SamplePNGImage_3mbmb.png","/Images/Events/2/1536x2048.jpg","/Images/Events/2/2018-Ford-Mustang-V8-GT-4K-UHD-Wallpaper-1124x632 _1_.jpg","/Images/Events/2/Two-Rockford-Fosgate-12-inch-Punch-Subwoofers-in-the-Trunk-4K-UHD-Wallpaper-1124x749.jpg","/Images/Events/2/2018-Ford-Mustang-V8-GT-4K-UHD-Wallpaper-1124x632 _1_.jpg","/Images/Events/2/Black-Ford-Raptor-4K-UHD-Wallpaper-1124x749.jpg"];
    var initialPreviewConfig = [{"caption":"4MB_Best-Koenigsegg-Agera-RS-Wallpaper.jpg","downloadUrl":"/Images/Events/2/4MB_Best-Koenigsegg-Agera-RS-Wallpaper.jpg","size":3995553,"width":"120px","key":1},{"caption":"4MB_SamplePNGImage_3mbmb.png","downloadUrl":"/Images/Events/2/4MB_SamplePNGImage_3mbmb.png","size":3124201,"width":"120px","key":2},{"caption":"1536x2048.jpg","downloadUrl":"/Images/Events/2/1536x2048.jpg","size":948176,"width":"120px","key":3},{"caption":"2018-Ford-Mustang-V8-GT-4K-UHD-Wallpaper-1124x632 _1_.jpg","downloadUrl":"/Images/Events/2/2018-Ford-Mustang-V8-GT-4K-UHD-Wallpaper-1124x632 _1_.jpg","size":90253,"width":"120px","key":4},{"caption":"Two-Rockford-Fosgate-12-inch-Punch-Subwoofers-in-the-Trunk-4K-UHD-Wallpaper-1124x749.jpg","downloadUrl":"/Images/Events/2/Two-Rockford-Fosgate-12-inch-Punch-Subwoofers-in-the-Trunk-4K-UHD-Wallpaper-1124x749.jpg","size":184351,"width":"120px","key":5},{"caption":"2018-Ford-Mustang-V8-GT-4K-UHD-Wallpaper-1124x632 _1_.jpg","downloadUrl":"/Images/Events/2/2018-Ford-Mustang-V8-GT-4K-UHD-Wallpaper-1124x632 _1_.jpg","size":90253,"width":"120px","key":6},{"caption":"Black-Ford-Raptor-4K-UHD-Wallpaper-1124x749.jpg","downloadUrl":"/Images/Events/2/Black-Ford-Raptor-4K-UHD-Wallpaper-1124x749.jpg","size":317451,"width":"120px","key":7}];

    $("#input-24").fileinput({

        intitialPreview: initialPreview,
        initialPreviewAsData: true,
        //initialPreviewConfig: [ { caption: "Moon.jpg", downloadUrl: url1, size: 930321, width: "120px", key: 1}, { caption: "Earth.jpg", downloadUrl: url2, size: 1218822, width: "120px", key: 2} ],
        initialPreviewConfig: initialPreviewConfig,
        //showUpload:false,
        deleteUrl: "/site/file-delete",
        maxFileCount: 5,
        allowedFileTypes: ["image"],
        allowedFileExtensions: ["jpg", "gif", "png", "jpeg"],
        overwriteInitial: false,
        maxFileSize: 4096,
        overwriteInitial: false,
        initialCaption: "The Moon and the Earth",
        uploadUrl: "/Events/UploadFilesForEvent?eventId=" + '2',
        uploadAsync: false,
        maxFilePreviewSize: 4096//,

    }).on('filesorted', function (e, params) {
        console.log('File sorted params', params);
    }).on('fileuploaded', function (e, params) {
        console.log('File uploaded params', params);
    });

but i cannot get the preview to be shown on the control. please help