Upload file with FormData using jQuery and C# ASP.NET MVC

Question

I'm a little lost on what should I do. I'm trying to upload a file along with its form data in one click, but I can't get the file. I tried to check the file in client and it's okay, but when receiving the file in the Controller, it's empty.

Problem

How do I upload the file along its formData using jQuery?

View

Assuming the other fields

<form id="_RegisterProduct" enctype="multipart/form-data">
    <div>
        <label>Product Description</label>
        <textarea id="product_description" name="_product_description"></textarea>
        <input type="file" 
               id="product_file"
               name="product_file" 
               class="dropify" />
    </div>
    <button type="submit" id="snippet_new_save">Register Product</button>
</form>

<script>
    $(function() {
        rules: {
            text: { required: true, minlength: 5 },
            number: { required: true, minlength: 1 }
        },

        submitHandler: function (form) {
            var fileUpload = $("#product_file").val();
            var formData = $("#_RegisterForm").serialize();
            var url = "@Url.Action("RegisterProduct", "Product")";

            $.get(url, { fileUpload: fileUpload, formData }, function (e) {
                if (e >= 1) {
                    console.log("success");
                } else {
                    console.log("error");
                }
            });
        }
    })
</script>

Controller

public string RegisterProduct(HttpPostedFileBase fileUpload, AB_ProductModel formData)
{
    var data = "";
    using (var con = new SqlConnection(Conn.MyConn()))
    {
        var path = Server.MapPath("~/Content/uploads/products");
        var Extension = "";
        var fileName = "";

        try
        {
            if(fileUpload.ContentLength > 0)
            {
                Extension = Path.GetExtension(fileUpload.FileName);
                fileName = Path.GetFileName(fileUpload.FileName);

                var com = new SqlCommand("dbo.sp_some_stored_procedure_for_saving_data", 
                    con);

                con.Open

                data = Convert.ToString(com.ExecuteScalar()); 

                var file_path = Path.Combine(path, data + Extension);
                fileUpload.SaveAs(file_path);
            }            
        } 
        catch (Exception ex)
        {
            data = ex.Message;
        }

        // data returns id if success or error message
    }

    return data;
}

Answer 1

Why serialize the form? This method creates a string that can be sent over to the server, but that is not what you want to do... In case of a file upload; see .serialize() function description here.

FormData type automatically manages the enctype for your forms (see here on MDN), so you can omit that—although you should consider using it, because it helps other members on the team understand the intent. If you want to use plain jQuery, you can simply attach the formData variable to the data field of the $.ajax call. See like here,

/*
* i know id-based selection should only have 1 element, 
* otherwise HTML is invalid for containing multiple elements 
* with the same id, but this is the exact code i used back then, so using it again.
**/
var formData = new FormData($('#form')[0]);  
$.ajax({
    type: 'POST',
    processData: false,
    contentType: false,
    data: formData,
    success: function (data) {
       // The file was uploaded successfully...
       $('.result').text('File was uploaded.');
    },
    error: function (data) {
       // there was an error.
       $('.result').text('Whoops! There was an error in the request.');
    }
});

This of course requires that your HTML DOM contains these elements—I used the code I wrote for my article quite a few years back. Secondly, for my other part of the feature, I used Request.Files to capture the files that might have been uploaded with the request.

files = Request.Files.Count;
if(files > 0) {
   // Files are sent!
   for (int i = 0; i < files; i++) {
      var file = Request.Files[i];
      // Got the image...
      string fileName = Path.GetFileName(file.FileName);
      // Save the file...
      file.SaveAs(Server.MapPath("~/" + fileName));
   }
}

This way, I uploaded the files using jQuery and FormData.

You can check out the complete article I posted here, Uploading the files — HTML5 and jQuery Way!

Oh, and do not forget the suggestion made in the comment,

using (var com = new SqlCommand("dbo.sp_some_stored_procedure_for_saving_data", con)) 
{
    con.Open(); // missed call?
    data = Convert.ToString(com.ExecuteScalar()); 

    // although, using should close here!
    var file_path = Path.Combine(path, data + Extension);
    fileUpload.SaveAs(file_path);
}

So, this was pretty much how you can do this.