Is it possible to pass a File from a File Input to a Controller using jQuery?

Question

I'm attempting to pass a file to my Controller as a HttpPostedFileBase so I can parse through the file and pass information back to the page. For example, I want to allow a user to import a vCard, and have it automatically populate a Contact Creation Form PartialView.

I'd like to do this by passing in the File, populating my model and then return a PartialView of the Form to display on the page. I've attempted jQuery like below, but I can never get my HttpPostedFileBase to pass properly (always null). Keeping in mind that I need to access the InputStream of the file once posted.

var file = "files=" + $("#fileInput").files[0];
$.post("/Contacts/UploadContact/", file, function (returnHtml) {
    alert(returnHtml);
    $("#contactContainer").html(returnHtml);
});

Is it possible to post a file to my Controller as a HttpPostedFileBase via jQuery?

Cartilaginous

Ajax file uploads are not trivial. Maybe this plugin might help you: malsup.com/jquery/form – Almagest

Does it have to be AJAX ? Simpler to use enctype="multipart/form-data in a form – Incept

@Incept that's true, but since he is using a jQuery post() I assumed he needs an AJAX solution – Almagest

Dang i answered this already and the question got deleted, i'm too lazy to repost the whole frikkin thing (it's big) again tonight ...long story short, yes you could but it's complicated and ajax fileApi is not widely supported yet. Make a form with a fileupload (classic stuff) ..now stick it in an iframe and control the iframe via JS. Works on all platforms including mobile (ios, android..) – Griseldagriseldis

@Almagest You're correct, I would rather have it be Ajax if possible. However, if this proves to be too much of a pain I can make an exception – Cartilaginous

Answer 1

    Same result can be achieved without `jquery` usage, merely you can use `XMLHttpRequest`
Example:

**Index.cshtml**

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="@Url.Content("~/Scripts/scripts.js")" ></script>
    <input type="file" id="fileInput" />
    <input type='button' id='go' value="go" />

 $('#fileInput').on("change", function () {      

             var xhr = new XMLHttpRequest();
             var VideofileS = new FormData($('form').get(0));
             xhr.open("POST", "/Contact/UploadContact/");
             xhr.send(VideofileS);
             xhr.addEventListener("load", function (event) {
             alert(event.target.response);
            }, false);
   });   
    });

Rotorua

+1 The most concise, non-iFrame file upload example I've found yet. Thanks! – Priestly

how can i return values from controller in this case. like return Json(new { success = true, returnedPath = UIFilePath }, JsonRequestBehavior.AllowGet); – Judijudicable

FormData() works only for IE 10+ , is there any way if we can make this workable for IE9+ – Stupidity

Answer 2

Awesome Ajax upload function.

If you have multiple file upload controls, give them separate IDs and do the following to upload all of them.

fd.append("file1", document.getElementById('fileInput').files[0]);
fd.append("file2", document.getElementById('fileInput').files[1]);
fd.append("file3", document.getElementById('fileInput').files[2]);
fd.append("file4", document.getElementById('fileInput').files[3]);

Philia