MVC Upload with Postback ( or maybe it is called Callback )

Question

I am using MVC to upload some files. The following code works fine but I would like to be return some information from the server ( eg a message or an ID ). What I am trying to do is very simple but I fear I amy not have made it clear. Can anyone help please?

VIEW

   @using (Html.BeginForm("AddFileX", "Upload", FormMethod.Post, new { enctype = "multipart/form-data" }))
     {
         <input type="file" name="files" multiple="true" />
         <input id="submit" type="submit" value="Upload" />
     }

CONTROLLER

   [HttpPost]
    public ActionResult AddFileX(IEnumerable<HttpPostedFileBase> files)
    {
        foreach (var file in files)
        {
            if (file.ContentLength > 0)
            {
                var fileName = Path.GetFileName(file.FileName);
                var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
                file.SaveAs(path);
            }
        }
        // I would like to return a message or an ID of something
        // (eg "you are about to overwrite your files" or the ID of something not shown here)
        return View("IdxUpload");  // This line probably needs to be changed
    }

Answer 1

Check out the bottom of this Scott Hanselman article. He basically demonstrates how to send information about the status of the file upload back to the user. In particular he creates a ViewModel to hold fileUpload results, creates a list of results based on the upload status of each file, and sends the information back to user by passing it into a View to be rendered.

http://www.hanselman.com/blog/ABackToBasicsCaseStudyImplementingHTTPFileUploadWithASPNETMVCIncludingTestsAndMocks.aspx

Edit:

If you're looking to prompt the user for a confirmation when uploading (in case the file already exists), you can:

(a) use a javascript ajax call to check if file exists and prompt the user before posting -or-

(b) allow the user to submit, save the files to a temp location, prompt the user for confirmation in another view, process files if user confirms.

EXAMPLE (a):

[Controller]

public ActionResult AddFileForm() {
   return View();
}

[HttpPost]
public ActionResult AddFileX(IEnumerable<HttpPostedFileBase> files) {
   // do what you need to save your files and/or update your db
   foreach (var file in files) {
      if (file.ContentLength > 0) {
         var fileName = Path.GetFileName(file.FileName);
         var path = Path.Combine(Server.MapPath("~/App_Data/uploads"), fileName);
         file.SaveAs(path);
      }
   }

   // collect the updated file ids and send to View to render (should prob use Strongly typed class(es))
   string[] results = {"123", "456", "789"};

   return View(results);
}

[HttpPost]
public JsonResult FileExists(List<string> filelist) {
   //check if file(s) exist given filename 

   // return ids for files that already exist on your system
   string[] results = {"123", "", "789"};
   return Json(results);
}

[View] for AddFileForm

@using (Html.BeginForm("AddFileX", "File", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
   <input id="f1" type="file" name="files" multiple="true" />
   <input id="f2" type="file" name="files" multiple="true" />
   <input id="overwrite" type="hidden" value="false" />
   <input id="submit" type="submit" value="Upload" />
}

<script>
   $(document).ready(function () {
      $('#submit').click(function (e) {
         if ($('#overwrite').val() == 'true')
            return; //proceed w/ submit

         e.preventDefault();

         // collect filenames of proposed file updates
         var files = [];
         $('input[type=file]').each(function () {
            var filename = $(this).val();
            files.push(filename);
         });

         // send request to check if files exist
         $.ajax({
            type: "POST",
            url: "/File/FileExists",
            data: { filelist: files },
            success: function (data) {
               confirmUpload(data);
            },
            traditional: true
         });
      });
   });

   function confirmUpload(results) {
      var existing = false;
      $(results).each(function () {
         var fid = $(this)[0];
         if (fid.length > 0) {
            existing = true; //file exists on Server, fid returned.

            //do stuff..highlight table row..etc
         }
      });

      if (existing) {
         //do whatever to request confirmation, show a message div, etc
         var answer = confirm("Overwrite files?");
         if (answer) {
            // if confirmed, set flag submit form
            $('#overwrite').val('true');
            $('#submit').click();   //$('form').submit() - unreliable
         }
      }
   }
</script>

Hope this gives you some ideas.

Answer 2

if you dont wish to use ajax file upload plugin there is a very simple thing you can do.

assuming the view in which you have file upload element is named view1 so when the view 1 is posted to the action method check to see wether files have been upload or already present(this part i think you have done already)

next add a message in the viewbag like this ViewData.Message = "Files have been loaded"; and return the same view

add a line inside your view anywhere(preferably at the end). @ViewData.Message. this way whatever message you wanna show to the user will be shown the user