I am using asp mvc 4 and jquery-1.10.2

I have a form that has several "areas", each area allows for multiple images to be uploaded/associated with it.

After some real struggling I have managed to pass my selected image(s) to the server, but now I need some way of identifying which "area" is being uploaded, so that I can add it to the correct folder. So I decided that passing a string would define that but i'm open to other suggestions. (I have looked in IEnumerable<HttpPostedFileBase> to see if I can identify which upload field I am reading but cannot find anything there)

My problem is that when I try and pass multiple parameters the count ofIEnumerable<HttpPostedFileBase> is null and the string is null. What am I doing wrong or what is a better way to achieve this?

I have looked around stackoverflow regarding this question and found this,

controller

public ActionResult _Image(TakeOn to, IEnumerable<HttpPostedFileBase> FileUpload, string area)
{
    //do some stuff with image
    return PartialView(to);
}

js

$(".btnCoverImageUpload").click(function (e) {
    var formData = new FormData(jQuery('#takeOn').get(0)) // store form data to pass on to the controller
    var area = "someIdRetrievedWithJquery";
    $.ajax({
        type: "POST",
        url: "/Property/_Image",
        contentType: false,
        data: formData,
        //data: {'formData':formData, 'area' : area} formData.count = 0 and area = null when read in the controller
        dataType: 'json',
        encode: true,
        async: false,
        processData: false,
        cache: false,
        success: function (data) {
            $("#coverImg").html(data);
        },
        error: function (request, status, error) {
        }
    });
});

js (alternate failed attempt - formData.count = 0 and area = null when read in the controller)

$(".btnCoverImageUpload").click(function (e) {
    var params = {
        formData : new FormData(jQuery('#takeOn').get(0)), // store form data to pass on to the controller
        roomID : "cover"
    };
    $.ajax({
        type: "POST",
        url: "/Property/_Image",
        contentType: false,
        data: JSON.stringify(params),
        dataType: 'json',
        encode: true,
        async: false,
        processData: false,
        cache: false,
        success: function (data) {
            $("#coverImg").html(data);
        },
        error: function (request, status, error) {
        }
    });
});

html

<input type="file" name="FileUpload" value="" accept="image/jpeg" />
<input class="btnCoverImageUpload" type="button" class="btn btn-default col-sm-12" value="Upload the cover Image" title="Upload" />

...more upload controls and upload buttons...

<input type="file" name="FileUpload" value="" accept="image/jpeg" />
<input class="btnCoverImageUpload" type="button" class="btn btn-default col-sm-12" value="Upload the cover Image" title="Upload" />

NOTE: If your wondering why there are some upload controls, it is to allow a user to add information about an area and supply images as a reference for that area and a user can add n number of areas. In my project there is additional markup but i have tried to remove what is not necessary

Related posts

Recent Viewed