I can't pass my file to httppostedfilebase in action method

Question

I'm using jquery form plugin to pass a image to my action method. I can't seem to be able to set the httppostedfilebase in the action method on my controller to the correct type of data.

$('#imageform').submit(function () {
    var id = $('#selectedFile').data('id');
    //var filename = $('#selectedFile').val(); //.files[0];
    //var filename = document.getElementById('selectedFile').files[0];
    //var filename = input.files[0];
    var filename = $('#selectedFile').prop('files');
    var options = {
        target: '#output',
        enctype: 'multipart/form-data',
        beforeSubmit: showRequest,
        success: showResponse,

        url: '/ManageSpaces/UploadImage',
        data: {
            id: id,
            image: filename[0]
        },
        type: 'post'

    };
    $('#imageform').ajaxSubmit(options);
    return false;
});

Here is my controller's action method.

[HttpPost]
    public ActionResult UploadImage(int id, HttpPostedFileBase image)
    {
        //do some stuff here

        return Json("Saved");
    }

html form data

 <form id="imageform" enctype="multipart/form-data">
            <input type="file" id="selectedFile" name="selectedFile" style="display: none;" data-id='@Model.YogaSpaceId' />
            <input type="button" value="Add Photos" class="btn" id="pictureupload" />
        </form>

try adding enctype="multipart/form-data" to the form in html, maybe it'll help — Manik Arora, Mar 16 '15 at 04:42
You no need to use Jquery Form Plugin at all. I know this is not straight forward answer to your question / Problem. But i would like to suggest you the "Short and Simple" approach to upload / Download files. Try the below Article Link. Which will explain file upload and Download. [How-to-upload-and-download-files-asynchronously-using-asp-net-mvc-4-5](https://dotnetriders.wordpress.com/how-to-upload-and-download-files-asynchronously-using-asp-net-mvc-4-5/). And it has sample project too. — RajeshKdev, Mar 16 '15 at 04:57

score 0 · Answer 1 · answered Mar 16 '15 at 05:04

$('#imageform').submit(function () {
    var formData = new FormData();
    var totalFiles = document.getElementById("selectedFile").files.length;
    for (var i = 0; i < totalFiles; i++) {
        var file = document.getElementById("selectedFile").files[i];
        formData.append("FileUpload", file);
    }

    $.ajax({
        type: "POST",
        url: '/Test/UploadImage/', //put your controller/action here
        data: formData,
        dataType: 'json',
        contentType: false,
        processData: false,
        beforeSend: function (xhr) {
             //do something before send
        },
        success: function (data) {
             //do something if success
        },
        error: function (data) {
             //do something if error
        }
    });
});

And then in your controller :

[HttpPost]
public void UploadImage()
{
    if (Request.Files.Count > 0) {
        dynamic file = Request.Files(0);
        //do something with your 'file'
    }
}

request.files(0) is giving a error that says, method or delegate is expected — chuckd, Mar 16 '15 at 05:32

I can't pass my file to httppostedfilebase in action method

1 Answers1