how to upload file using ajax and other fields attached?

Question

I am new to ajax and .net MVC.

I have form of mvc form helper in my application and trying to upload a file with using other form fields.

@using (Html.BeginForm("upload", "upload", FormMethod.Post, new { enctype = "mutipart/form-data" })) {

                    <fieldset>
                        <div class="editor-label">
                            @Html.LabelFor(model => model.cardTitle)
                        </div>
                        <div class="editor-field">
                            @Html.TextBoxFor(model => model.cardTitle, new { @Class = "span12", type = "text" })
                        </div>
                        <div class="editor-label">
                            @Html.LabelFor(model => model.cardHashCode)
                        </div>
                        <div class="editor-field">
                            @Html.TextBoxFor(model => model.cardHashCode, new { id = "cardhashcode" })
                        </div>
                        <input type="file" name="file" id="file_upload" />
                        <input type="submit" class="btn btn-success" value="Create One" />
                    </fieldset>
                }

Controller-

[HttpPost]
        public ActionResult Upload(HttpPostedFileBase file, CardModel card, FormCollection forms) {
            CardTable cardtable = new CardTable();
            if (file != null && file.ContentLength > 0) {
                // TODO: storing uploaded files to the App_Data folder on the server. 
                // Adjust this location to fit your requirements
                var filepath = "D:\\FunRanger2\\FunRangerPhotos";
                var filename = Path.Combine(filepath, Path.GetFileName(file.FileName));
                file.SaveAs(filename);
                cardtable.CardFileName = file.FileName;
                cardtable.CardFilePath = filepath;
                cardtable.CardDate = DateTime.Now;
                cardtable.CardTitle = card.cardTitle;
                cardtable.CardHashCode = card.cardHashCode == null ? "" : card.cardHashCode;
                db.CardTables.InsertOnSubmit(cardtable);
                db.SubmitChanges();

            }
}

I get values in model of input fields only and file always comes null.

I tried mapping it through script also-

By giving form an id to form #form-upload and button button-upload

<script type="text/javascript">
$(function(){
$('#button-upload').click(function(){
$.ajax({
url:'/Upload/Upload/',
data:$('#form-upload').serialize()+$('#file_upload').file,
success:function(){
alert("Uploaded successfully");
}
});
});
});
</script>

How do I upload file using other form fields? Please help me!

By default, you cannot upload a file using AJAX. you have to use a plugin that will internally create an iframe tag and try to post the data to your controller. — Saravanan, Jan 23 '14 at 21:10
You need to use `FormData`. Refer [this example](http://stackoverflow.com/questions/29293637/how-to-append-whole-set-of-model-to-formdata-and-obtain-it-in-mvc/29293681#29293681) — , May 03 '15 at 08:27

score -1 · Answer 1 · edited Jun 01 '18 at 07:57

Use in this way, I got from searching from different site.

// Get form 
var form = $('#fromEdit')[0]; // Important!
// Create an FormData object 
var data = new FormData(form); // Important!

alert(form);
alert(data);

$.ajax({
  type: "POST",
  enctype: 'multipart/form-data', // Important!
  url: $(this).attr('action'), // Important!
  data: data,
  processData: false, // Important!
  contentType: false, // Important!
  cache: false,
  success: function(res) {
    alert("Records added Successfully.");

  }
});

public ActionResult Create([Bind(Exclude = "FileContent")] ProductEntity productEntity) {

  foreach(string file in Request.Files) {
    HttpPostedFileBase postedFile = Request.Files[file];
  }

}

how to upload file using ajax and other fields attached?

1 Answers1