0

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.

Community
  • 1
  • 1
Alexandru
  • 12,264
  • 17
  • 113
  • 208

1 Answers1

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"];
}
DarkVision
  • 1,373
  • 3
  • 20
  • 33
  • I tried it like this too (in my question I pointed that out), but this gives me illegal invocation errors as well! – Alexandru Sep 01 '15 at 16:52
  • 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: http://stackoverflow.com/questions/12755945/jquery-and-html-formdata-returns-uncaught-typeerror-illegal-invocation – Alexandru Sep 01 '15 at 17:00
  • 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 Sep 01 '15 at 17:11
  • 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 – DarkVision Sep 01 '15 at 17:13
  • Yes, both must be set! Thanks! – Alexandru Sep 01 '15 at 17:48