'Uploading File with Description Using ASP.Net MC

I have this project in ASP.Net MVC that needs to upload multiple files. I can do it using FormData.Append. However, it is also needed to have a file description for each file. Below is the page sample.

Example

In each description, there should be a file to be uploaded in a database table with these 3 important columns.

  • FileName - nvarchar(max)
  • FileData - varbinary(max)
  • FileDescription - nvarchar(max)

In my View, I also have public HttpPostedFileBase FileUpload { get; set; } .

I am able to save the file but I cannot save the description for each file.

In my cshtml, I load the description through an html table (each description has an ID).

(some select query here, chklist = "Select DescriptionID, FileDescription FROM FileDescriptionMasterTable"). . . 
foreach (var det in chklist)
{
    <table id="@DescriptionID" class="table table-sm">
        <tr>
            <td class="w-75" id="[email protected]_Code">
             @FileDescription
            </td>

             <td class="w-25">
            <input type="file" accept=".pdf" id="myfile-@DescriptionID" multiple onchange="getFile(this)" />
                             </td>
         </tr>
    </table>
}

Then, this is the javascript for appending FormData.

var formdata = new FormData(); //FormData object
    function getFile(e) {
       var fileInput = document.getElementById(e.id);
       //Iterating through each files selected in fileInput
      for (i = 0; i < fileInput.files.length; i++) {
           var sfilename = fileInput.files[i].name;
           
            formdata.append(sfilename , fileInput.files[i]);
       }            
    }

Here is my javascript to pass formdata to my controller:

$("#btnupload").click(function () {
                $.ajax({
                    url: '/Attach/SaveFile',
                    type: "POST",
                    contentType: false, // Not to set any content header
                    processData: false, // Not to process data
                    data: formdata,
                    async: false,
                    accept: 'application/json',
                    success: function (r) {
                        alert("RFP has been saved successfully.");
                        window.location = "/Home";
                    },
                    error: function (xhr, status, error) {
            alert(xhr.responseText);
                    }
                });
            
        });

Here is my Controller to save file:

public JsonResult SaveFile()
        {
    using myModeldb = new myModel())
            {

        HttpFileCollectionBase files = Request.Files;
            for (int i = 0; i < files.Count; i++)
            {
                  var description= Request["sfilename"]; //This part has no value since I cannot append the description for each file
                 HttpPostedFileBase file = files[i];
                string fname;
                // Checking for Internet Explorer      
                if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
               
                    {
                    string[] testfiles = file.FileName.Split(new char[] { '\\' });
                    fname = testfiles[testfiles.Length - 1];
                }
                else
                {
         fname = file.FileName;
                }
        Stream str = file.InputStream;
        BinaryReader Br = new BinaryReader(str);
        Byte[] FileDet = Br.ReadBytes((int)str.Length);
        
        FileUpload pdf = new FileUpload 
                    {
                        FileName = file.FileName,
                        FileDescription = description,
                        FileData = FileDet
                    };
                    db.FileUploads.Add(pdf);
                    db.SaveChanges();
                }

                string message = "SUCCESS";  //FileName and FileData (varbinary) is saved
                return Json(new { Message = message, JsonRequestBehavior.AllowGet });
            } 
    }

How am I able to fetch the description of each chosen file so I can also save it to the database?

Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source