MVC-4 file completion message

Question

I am having trouble displaying a successful message after the file has been downloaded.

At first I tried to use ViewBag.Message, and it works well and displays a “Successful” message after the file is uploaded, and this is what I want. But then I can’t find a way to change this message in a few seconds: “Select a file to upload!” So ​​that the user understands that he can now upload a new file.

I tried to implement a javascript function to process a success message. The problem is that a success message is displayed before the file is downloaded, which is not very good, and if its file is very small, the message will only be displayed for a millisecond.

Do you have any suggestions on how I can configure this? I'm not sure if I should try to continue using javascript or viewbag or something else?

What I'm looking for is a success message, which appears about 5 seconds after a successful download, then returns to "Choose file to download message" again.

https://github.com/xoxotw/mvc_fileUploader

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading; using System.Web; using System.Web.Mvc; namespace Mvc_fileUploader.Controllers { public class HomeController : Controller { public ActionResult Index() { //ViewBag.Message = "Choose a file to upload !"; return View("FileUpload"); } [HttpPost] public ActionResult FileUpload(HttpPostedFileBase fileToUpload) { if (ModelState.IsValid) { if (fileToUpload != null && fileToUpload.ContentLength > (1024 * 1024 * 2000)) // 1MB limit { ModelState.AddModelError("fileToUpload", "Your file is to large. Maximum size allowed is 1MB !"); } else { string fileName = Path.GetFileName(fileToUpload.FileName); string directory = Server.MapPath("~/fileUploads/"); if (!Directory.Exists(directory)) { Directory.CreateDirectory(directory); } string path = Path.Combine(directory, fileName); fileToUpload.SaveAs(path); ModelState.Clear(); //ViewBag.Message = "File uploaded successfully !"; } } return View("FileUpload"); } public ActionResult About() { ViewBag.Message = "Your app description page."; return View(); } public ActionResult Contact() { ViewBag.Message = "Your contact page."; return View(); } } } 

View FileUpload:

 @{ ViewBag.Title = "FileUpload"; } <h2>FileUpload</h2> <h3>Upload a File:</h3> @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new {enctype = "multipart/form-data"})) { @Html.ValidationSummary(); <input type="file" name="fileToUpload" /><br /> <input type="submit" onclick="successMessage()" name="Submit" value="upload" /> //@ViewBag.Message <span id="sM">Choose a file to upload !</span> } <script> function successMessage() { x = document.getElementById("sM"); x.innerHTML = "File upload successful !"; } </script> 

Answer 1

Few things

First you need a model to indicate a successful download, we can just use bool in your instance to specify it.

Add this at the top of your view:

 @model bool 

Then you can do (keeping your view as it is):

 @{ ViewBag.Title = "FileUpload"; } <h2>FileUpload</h2> <h3>Upload a File:</h3> @using (Html.BeginForm("FileUpload", "Home", FormMethod.Post, new {enctype = "multipart/form-data"})) { @Html.ValidationSummary(); <input type="file" name="fileToUpload" /><br /> <input type="submit" onclick="successMessage()" name="Submit" value="upload" /> <span id="sM">Choose a file to upload !</span> } 

We can manipulate sM in JS depending on model value

 <script> @if(Model) { var x = document.getElementById("sM"); x.innerHTML = "File upload successful !"; setTimeout("revertSuccessMessage()", 5000); } function revertSuccessMessage() { var x = document.getElementById("sM"); x.innerHTML = "Choose a file to upload !"; } </script> 

Then in your else in your action method, just make sure you return true on success, otherwise false . In this way

 else { string fileName = Path.GetFileName(fileToUpload.FileName); string directory = Server.MapPath("~/fileUploads/"); if (!Directory.Exists(directory)) { Directory.CreateDirectory(directory); } string path = Path.Combine(directory, fileName); fileToUpload.SaveAs(path); ModelState.Clear(); return View("FileUpload", true); } return View("FileUpload", false); 

Answer 2

You can do the following:

 $('form').submit(function(e) { var form = $(this); if (form.valid()) { e.preventDefault(); $.ajax(form.attr('action'), { data: new FormData(form[0]), xhr: function() { var myXhr = $.ajaxSettings.xhr(); var progress = $('progress', form); if (myXhr.upload && progress.length > 0) { progress.show(); myXhr.upload.addEventListener('progress', function(e) { if (e.lengthComputable) progress.attr({ value: e.loaded, max: e.total }); }, false); } return myXhr; }, success: function(e) { alert('Upload complete!'); }, // Options to tell JQuery not to process data or worry about content-type contentType: false, processData: false }); } }); 

However, it will only work in modern browsers. You can use Modernizr to detect this. For example, if you complete the code in the form submit event handler as follows, it will revert to the regular view if it is not supported.

 if (Modernizr.input.multiple) { ... } 

It also supports a progress bar. Just put a progress mark on the form.

The above code simply warns the user that the download is complete. Instead, I use a small, small library called toastr .

Answer 3

Perhaps you could just use alert() for success? Not the most elegant solution, but it seems that this may be enough. Otherwise you should learn jQuery