Jquery Fileupload - Ajax pass additional variables

Question

My project is MVC 5 c# I am using jquery.fileupload would like to know how I can pass additional values to the controller, in this case is the file description. View:

<i class="glyphicon glyphicon-plus"></i>
    <span>Add files...</span>
    <input id="fileupload" type="file" name="files[]" multiple>

</span>
<input id="description" name="description" value="description" />

Script:

 $(document).ready(function () {
        var description = $("#description").val();
        $('#fileupload').fileupload({
            dataType: 'json',
            url: '/Home/UploadFiles',
            autoUpload: true,
            done: function (e, data) {
                $('.file_name').html(data.result.name);
                $('.file_type').html(data.result.type);
                $('.file_size').html(data.result.size);
            }
        }).on('fileuploadprogressall', function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('.progress .progress-bar').css('width', progress + '%');
        });
    });

Controller:

public ContentResult UploadFiles()
        {
            var r = new List<UploadFilesResult>();

            foreach (string file in Request.Files)
            {
                HttpPostedFileBase hpf = Request.Files[file] as HttpPostedFileBase;
                if (hpf.ContentLength == 0)
                    continue;

                string savedFileName = Path.Combine(Server.MapPath("~/App_Data"), Path.GetFileName(hpf.FileName));
                hpf.SaveAs(savedFileName);

                r.Add(new UploadFilesResult()
                {
                    Name = hpf.FileName,
                    Length = hpf.ContentLength,
                    Type = hpf.ContentType
                });
            }
            return Content("{\"name\":\"" + r[0].Name + "\",\"type\":\"" + r[0].Type + "\",\"size\":\"" + string.Format("{0} bytes", r[0].Length) + "\"}", "application/json");
        }

From the dcumentation - formData: {example: 'test'}

user3559349
– user3559349

2016-03-03 07:32:13 +00:00
Commented Mar 3, 2016 at 7:32 — user3559349
– user3559349, Commented Mar 3, 2016 at 7:32

Ankush Jain · Accepted Answer · 2016-03-03 07:36:44Z

1

You can send additional data to server using formData property. See below:

 $('#fileupload').fileupload({
    formData: {
        param1: 'test2',
        param2: "test3",
        param3: "test3"
    }
});

The formData option can be used to set additional form data programmatically.

answered Mar 3, 2016 at 7:36

Ankush Jain

7,2534 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hncl Over a year ago

Thank you Ankush; how I can retrieve the values in the controller.

user3559349 Over a year ago

@hncl, Change you method to public ContentResult UploadFiles(IEnumerable<HttpPostedFileBase> files, string param1, string param 2 ....) - i.e add parameters to you method that match the object names.

Collectives™ on Stack Overflow

Jquery Fileupload - Ajax pass additional variables

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related