MVC5 Ajax.BeginForm upload form with files

Question

I read some articles that is not possible to save files using Ajax.BeginForm.

I have a form in MVC5 that uses Ajax.BeginForm so the user has a nice responsive app without page refresh.

Now, the requirement is to add 4 fields that will hold files (file upload).

Also read that maybe with jquery.form.js this is possible.

So my questions are about other approach is this make any sense:

1. The form keep the Ajax.BeginForm
2. The user enters data into the form.
3. When user needs to load a file into the form, then I was thinking on uploading that file to server on the fly and store there temporarily.
4. When the form is saved, on server side I can get temp files and then save them.

Answer 1

Please check below code for save separate Form Data and File Upload :

View with Ajax.BeginForm

@using (Ajax.BeginForm("", "", new AjaxOptions
{
    HttpMethod = "POST",
}, new { @id = "UploadFileForm", @class = "form-horizontal" }))
{
 <div class="col-sm-3">
            <label>Browse</label>
            <input type="file" id="file" name="file" />
            <p class="help-block">Supported format .doc,.docx,.pdf</p>
        </div>
        <div class="col-xs-12">
            <button type="button" value="Add" id="Addbtn" class="btn btn-primary">
                <i class="fa fa-plus-square"></i>&nbsp;Add
            </button>
        </div>
        }

File Upload Button Click Event :

 $("#Addbtn").click(function () {
            // --- code for upload resume
            var formdata = new FormData();
            var getfile = document.getElementById('file');
            for (i = 0; i < getfile.files.length ; i++) {
                formdata.append(getfile.files[i].name, getfile.files[i]);
            }
            function isvalidFileFormat() {
                if (getfile.files.length > 0 ) {
                    var extention = $('#file').val().split('.');
                    var data;
                    $.each(extention, function (index, value) {
                        if (index == 1) {
                            data = value;
                        }
                    });

                    if (data == "pdf" || data == "docx" || data == "doc") {
                        return "";
                    }
                    else {
 return "<p>Please choose .pdf, .docx, .doc file only." + "</p>\n";
                    }
                }
                else 
                    return "";
                }
            }
            if (summary) { CustomAlert(summary); return false; } else {
                var TestModel = {
                    "Id": $("#hdnId").val()
                };
                $.ajax(
                 {
                 //Save Main Form Data
                     url: '/TestController/TestAction/',
                     type: "Post",
                     async: false,
                     dataType: "json",
                     data: JSON.stringify(TestModel), 
                     contentType: "application/json;charset=utf-8",
                     success: function (result) {
                     // After saving main data you can save this file for same user
                         formdata.append("Userid", result.id);
                         $.ajax({
                             url: '/TestController/Fileupload',
                             data: formdata,
                             contentType: false,
                             processData: false,
                             async: false,
                             type: 'POST',
                             success: function (data) {
                                 $("#YourDivName").html(data);
                             }
                         });
                         $("#file").val(null);
                     }
                 });
                return true;
            }
        });

Here is the code for file upload

/// <summary>
        ///File Upload
        /// </summary>
        /// <param name="Userid"></param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Fileupload(int Userid = 0)
        {
            string path = string.Empty;
            string filename = string.Empty;
            string fileExtention = string.Empty;
            string withoutEXT = string.Empty;
            string ResumeFilePath = string.Empty;
            string ChangeFileName = string.Empty;
            bool uploadStatus = false;
            if (Request.Files != null && Request.Files.Count > 0)
            {

                for (int i = 0; i < Request.Files.Count; i++)
                {
                    HttpPostedFileBase file = Request.Files[i];
                    if (file.ContentType == "application/pdf" || file.ContentType == "text/rtf" || file.ContentType == "application/doc"
                        || file.ContentType == "application/vnd.openxmlformats-officedocument.wordprocessingml.document")
                    {
                        filename = Path.GetFileNameWithoutExtension(file.FileName);
                        fileExtention = Path.GetExtension(file.FileName);
                        withoutEXT = fileExtention.Replace(".", "");

                        ChangeFileName = filename + "_" + locationid + fileExtention;

                        var ifExistPath = "/Uploads/Files/" + ChangeFileName;
                        var FileVirtualPath = System.IO.Path.Combine(Server.MapPath("/Uploads/Files/"), ChangeFileName);
                        path = Path.Combine(Server.MapPath("~/Uploads/Files/"), ChangeFileName);

                        //delete file
                        
                        if (System.IO.File.Exists(path))
                        {
                            System.IO.File.Delete(path);
                        }
                        if (ifExistPath != FileVirtualPath)
                        {
                            file.SaveAs(path);
                            uploadStatus = true;
                        }
                        else
                        {
                        }
                    }
                    else
                    {
                        ModelState.AddModelError("", "Please upload a PDF or Doc or rtf File");
                        // return View("", model);
                    }
                    if (uploadStatus && path != string.Empty)
                    {

                        ResumeFilePath = "/Uploads/Files/";
                    //Add code for save this file in database here 
                    }
                }
            }
            return PartialView("Test", objMaster);
        }

Hope this will help you !!