Step 1

Create a View with a file control to upload the file and a table to display the list of uploaded files. In this View, we have one textbox for username and a button to complete the upload process.

  1. <h3>Upload File(s)</h3>
  2. <style>
  3. .red {
  4. color: red;
  5. }
  6. </style>
  7. <form id="uploader">
  8. <div class="row">
  9. <div class="col-sm-6">
  10. User Name : <input type="text" id="txtuploader" />
  11. <br /> <br />
  12. <input id="fileInput" type="file" multiple>
  13. <br /> <br />
  15. <table class="table" id="FilesList" style="visibility:hidden">
  16. <tr>
  17. <th>
  18. Attachment(s)
  19. </th>
  20. <th>
  21. Action
  22. </th>
  23. </tr>
  24. </table>
  25. <input type="button" id="btnupload" value="Upload" style="float:right" />
  27. </div>
  28. </div>
  29. </form>

Step 2

The jQuery functions will perform the following functionalities:

  • Move uploaded files into a list on file change event.
  • chkatchtbl() helps to change the visibility of the files in the list based on the availability of the files.
  • DeleteFile() will remove selected files in the list on the click of "Remove" button
  • On click of the Upload button, it will call the controller using jQuery AJAX POST method.
  1. <script>
  2. var formdata = new FormData(); //FormData object
  3. $(document).ready(function () {
  5. $("#fileInput").on("change", function () {
  6. var fileInput = document.getElementById('fileInput');
  7. //Iterating through each files selected in fileInput
  8. for (i = 0; i < fileInput.files.length; i++) {
  10. var sfilename = fileInput.files[i].name;
  11. let srandomid = Math.random().toString(36).substring(7);
  13. formdata.append(sfilename, fileInput.files[i]);
  15. var markup = "<tr id='" + srandomid + "'><td>" + sfilename + "</td><td><a href='#' onclick='DeleteFile(\"" + srandomid + "\",\"" + sfilename +
  16. "\")'><span class='glyphicon glyphicon-remove red'></span></a></td></tr>"; // Binding the file name
  17. $("#FilesList tbody").append(markup);
  19. }
  20. chkatchtbl();
  21. $('#fileInput').val('');
  22. });
  24. $("#btnupload").click(function () {
  25. formdata.append('uploadername', $('#txtuploader').val());
  26. $.ajax({
  27. url: '/Home/UploadFiles',
  28. type: "POST",
  29. contentType: false, // Not to set any content header
  30. processData: false, // Not to process data
  31. data: formdata,
  32. async: false,
  33. success: function (result) {
  34. if (result != "") {
  35. alert(result);
  36. }
  37. },
  38. error: function (err) {
  39. alert(err.statusText);
  40. }
  41. });
  42. });
  43. });
  44. function DeleteFile(Fileid, FileName) {
  45. formdata.delete(FileName)
  46. $("#" + Fileid).remove();
  47. chkatchtbl();
  48. }
  49. function chkatchtbl() {
  50. if ($('#FilesList tr').length > 1) {
  51. $("#FilesList").css("visibility", "visible");
  52. } else {
  53. $("#FilesList").css("visibility", "hidden");
  54. }
  55. }
  56. </script>

Step 3

Finally, in the Controller, it gets the all the uploaded files. When we enter the username, it stores the uploaded files into a temporary location.

  1. public ActionResult UploadFiles()
  2. {
  3. string uname = Request["uploadername"];
  4. HttpFileCollectionBase files = Request.Files;
  5. for (int i = 0; i < files.Count; i++)
  6. {
  7. HttpPostedFileBase file = files[i];
  8. string fname;
  9. // Checking for Internet Explorer
  10. if (Request.Browser.Browser.ToUpper() == "IE" || Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
  11. {
  12. string[] testfiles = file.FileName.Split(new char[] { '\\' });
  13. fname = testfiles[testfiles.Length - 1];
  14. }
  15. else
  16. {
  17. fname = file.FileName;
  18. }
  19. // Get the complete folder path and store the file inside it.
  20. fname = Path.Combine(Server.MapPath("~/Uploads/"), fname);
  21. file.SaveAs(fname);
  22. }
  23. return Json("Hi, " + uname + ". Your files uploaded successfully", JsonRequestBehavior.AllowGet);
  24. }
  25. }