ASP NET upload image with jQuery and AJAX

Question

What I'm trying to do is theoretically simple: I want upload an image using ASP.NET, jQuery and AJAX, without submitting a form (this part is important).

So I have this:

HTML

<input type="file" accept="image/*" id="imguploader">

jQuery

var file_data = $("#imguploader").prop("files")[0];
var form_data = new FormData();
form_data.append("file", file_data);

        $.ajax({
            type: "POST",
            url: '@Url.Action("InsertImage", "Product")',
            data: { file: form_data },
            contentType: false,
            processData: false,
            success: function (response) {
                alert('succes!!');
            },
            error: function (error) {
                alert("errror");
            }
        });

Controller

public ActionResult InsertImage(HttpPostedFileBase file) {

   //blabla and the code to insert in the database.

   return Content("");
}

What else I have tried:

// instead of using FormData, I tried to direclty capture the file using these:

var file = $("#imguploader").file;
//and
var file = $("#imguploader")[0].files;

//Same result (null).

The problem is that the file variable is always null no matter what. What I'm doing wrong? Can anybody helps?

did you add enctype="multipart/form-data" attribute to your form tag? — Dejavu, Sep 14 '17 at 20:06
One would assume, that your AJAX call is not triggered before you actually choose a file, right? — faerin, Sep 14 '17 at 20:08
@Dejavu I believe that this doesn't change anything because the trigger of the AJAX function isn't the form submitting — MWsan, Sep 14 '17 at 20:08
So what do you get console.log(form_data) when you submit it? — Dejavu, Sep 14 '17 at 20:09
@entiendoNull No Sr. It's being triggered by a button that's only available after it checks the file size and other things. — MWsan, Sep 14 '17 at 20:10
you don't actually need to append it. you can use data: new FormData(this) — Dejavu, Sep 14 '17 at 20:13
@Dejavu I'm not very familiar with FormData, but the "Value's" length is 0. IDK if it should be > 0. But I have tried different approaches. I'll update the topic with these. — MWsan, Sep 14 '17 at 20:16
See [this answer](https://stackoverflow.com/a/37762290/2030565). I also have a [similar answer](https://stackoverflow.com/a/45899881/2030565). — Jasen, Sep 14 '17 at 20:22

score 1 · Accepted Answer · answered Sep 14 '17 at 20:53

You can manually set the FormData keys and values yourself.

<input type="file" name="imguploader" id="imguploader" />
<button id="btnUpload">Upload</button>

Create FormData and set a new key/value

$("#btnUpload").on("click", function(e) {
    e.preventDefault();

    var file = $("#imguploader").get(0).files[0];
    var formData = new FormData();
    formData.set("file", file, file.name);

    $.ajax({
        url: '@Url.Action("InsertImage", "Product")',
        method: "post",
        data: formData,
        cache: false,
        contentType: false,
        processData: false
    })
    .then(function(result) {

    });
});

The controller

[HttpPost]
public ActionResult InsertImage(HttpPostedFileBase file)
{

}

ASP NET upload image with jQuery and AJAX

HTML

jQuery

Controller

What else I have tried:

1 Answers1