Posting an image using a jQuery AJAX call to an MVC action

Question

I have the following code:

$("#preview").click(function () {
    $.ajax({
        type: 'POST',
        url: '@Url.Action("Preview")',
        data: {
            color: $("#color-picker").val(),
            logo: $("#fileInput")[0].files[0]
        },
        success: function (data) {
            alert("Success!");
        },
        dataType: "json"
    });
});

Which uses this element:

<input id="fileInput" type="file" />

Which tries to post an image to this MVC action:

[HttpPost]
public async Task<ActionResult> Preview(string color, HttpPostedFileBase logo)
{
    return Json("Success.");
}

Unfortunately, when I post, I get Uncaught TypeError: Illegal invocation in Chrome's logs. This error comes from the jQuery side of things according to the stack trace. There's nothing wrong with $("#color-picker").val() nor with $("#fileInput")[0].files[0] when I check them in Chrome Developer Tools' watch before the call happens (one is a string with the appropriate color code, the other is a File).

I did troubleshoot it to find the reason why this happens. It is because I try to pass $("#fileInput")[0].files[0] as a parameter, but I get the same error when I try to do it this way by appending the file. I am using the latest version of Chrome and I've been researching into a way to pass an image quite a bit. I have been checking lots of questions on Stack Overflow to try to find a solution but so far I could not find a good way to upload this file.

Does anyone know what kind of security concern causes file uploads to not be allowed like this and how I can upload an image in a similar fashion, or by what means I will have to do so? What alternatives are there? I can't seem to make anything work so far that I've come across on Stack.

DarkVision · Accepted Answer · 2015-09-01 16:45:55Z

3

you could do something like this in javascript

var fd = new FormData();
var files = $("#fileInput").get(0).files;

if(files.lenght > 0){
   fd.append("logo",files[0]);
}

$.ajax({
        type: 'POST',
        url: '@Url.Action("Preview")',
        data:fd,
        processData: false,
        contentType: false,
        dataType: "json",
        success: function (data) {
            alert("Success!");
        }
    });

on controller you can get image like this

if (System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
   var picture = System.Web.HttpContext.Current.Request.Files["logo"];
}

answered Sep 1, 2015 at 16:45

DarkVision

1,4233 gold badges21 silver badges34 bronze badges

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

5 Comments

Alexandru Over a year ago

I tried it like this too (in my question I pointed that out), but this gives me illegal invocation errors as well!

Alexandru Over a year ago

My pardons, I see you added two different parameters (processData/contentType as false) to the AJAX call. I will try it with those in a bit as I think that's the trick or at least part of it! Source: stackoverflow.com/questions/12755945/…

DarkVision Over a year ago

by default Jquery use application/x-www-form-urlencoded has contentType by setting to false you wil send via XMLHttpRequest basically you can use System.Web Request to get value

DarkVision Over a year ago

about the processData not sure but i remember that if you use FormData ocject you should turn off i think you tell him not to modify my data when sending

Alexandru Over a year ago

Yes, both must be set! Thanks!

Collectives™ on Stack Overflow

Posting an image using a jQuery AJAX call to an MVC action

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related