Krajee bootstrap-fileinput with Mvc razor

Question

I want to use Krajee bootstrap-fileinput (http://plugins.krajee.com/file-input) with Mvc razor, Please help me out with the process to to upload images to server and json result from actionResult.

I have just included a required js and css files in my view page and added a line

<input id="input-702" name="kartik-input-702[]" type="file" multiple="true" class="file-loading">

and a script

$("#input-702").fileinput({
    uploadUrl:"@Url.Action("upload","Home")",
    uploadAsync: true,
    minFileCount: 1,
    maxFileCount: 5,
    overwriteInitial: false,
    initialPreview: "",
    initialPreviewConfig:"",
    uploadExtraData: ""
});

This line is getting formatted and showing a drag and drop effect and select file button.The file selection and Thumbnail creation is working properly but on upload action there is the (fileinput,js) function "ajaxSubmit" which use to post the content to HomeController ActionResult "Upload".

---

ajaxSubmit: function (fnBefore, fnSuccess, fnComplete, fnError) {
        var self = this, settings;
        self.uploadExtra();
        settings = $.extend({
            xhr: function () {
                var xhrobj = $.ajaxSettings.xhr();
                return self.initXhr(xhrobj, 98);
            },
            url: self.uploadUrl,
            type: 'POST',
            dataType: 'json',
            data: self.formdata,
            cache: false,
            processData: false,
            contentType: false,
            beforeSend: fnBefore,
            success: fnSuccess,
            complete: fnComplete,
            error: fnError
        }, self.ajaxSettings);
        self.ajaxRequests.push($.ajax(settings));
    },

---

Now i want to save all the files to server which are not uploaded using ActionResult and pass a value back to js. how to retrieve formdata and process.??

Answer 1

I have a similar problem. Got it working (with the ajax calls) but always get one file in the request (whereas I need to get multiple but should be working for you!)

My code is as follows: HTML:

<input id="input-id" type="file" data-preview-file-type="text" name="fileUpload[]" multiple class="file-loading" />

JS:

  $("#input-id").fileinput(
            {
                uploadUrl: "/Galleries/Upload",
                uploadAsync: true,
                maxFileCount: 5

            });

MVC controller which I would expect to be working - but i not:

[HttpPost]
public JsonResult Upload(IEnumerable<HttpPostedFileBase> fileUpload)
{
  //somde logic
}

However when in side the method I will call:

Request.Files

My scenerio is that user:

1. clicks on 'browse'
2. selects picture and is able to see it in the preview
3. click on 'browse' once again
4. selects picture and the picture is appended to the current preview list
5. clicks upload and I get all the files in the controller

The only way I figure it, how it could be working is the ajax call switch on the plugin which allows to append the preview list. Unfortunatelly I can't submit all the pictures to the controller then.

Answer 2

I was trying to find the solution to above problem and finally found the one. As I am able to save the file at server location from the controller but unfortunately I could not send the json response from controller to javascript.

Saving image using controller action :

[HttpPost]
    public ActionResult upload()
    {           
        foreach (string item in Request.Files)
        {
            HttpPostedFileBase file = Request.Files[item] as HttpPostedFileBase;
            string fileName = file.FileName;
            string UploadPath = "~/Images/";

            if (file.ContentLength == 0)
                continue;
            if (file.ContentLength > 0)
            {
                string path = Path.Combine(HttpContext.Request.MapPath(UploadPath), fileName);
                string extension = Path.GetExtension(file.FileName);

                file.SaveAs(path);
            }
        }

        return Json("");
}

To implement the delete button we have to Send Data from server in Asynchronous mode as a json array object eg.

initialPreview: [
    '<img src='/images/desert.jpg' class='file-preview-image' alt='Desert' title='Desert'>',
],


initialPreviewConfig: [
    {
        caption: 'desert.jpg', 
        width: '120px', 
        url: '/localhost/avatar/delete', 
        key: 100, 
        extra: {id: 100}
    }
]

Can anybody help me out to create json array object in controller and send it as a response object.???