c# - MVC-4 FileUpload success message -

i having few problems displaying success message after file has been uploaded.

i first tried using viewbag.message , , works , display success message after file has been uploaded, want. cant find way on how , after few seconds change message to: "choose file upload !" , user understand can upload new file.

i tried implement javascript feature handle success message instead. problem success message shows before file upload completed, no good, , if small file, message show millisecond.

do have suggestion on how can fine tune ? im not sure if should try work further using javascript or viewbag, or different ?

what looking success message display around 5 seconds after successful upload, changes "choose file upload 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 file 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 large. maximum size allowed 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 !";                   }             }              return view("fileupload");          }            public actionresult about()         {             viewbag.message = "your app description page.";              return view();         }          public actionresult contact()         {             viewbag.message = "your contact page.";              return view();         }     } } 

fileupload view:

@{     viewbag.title = "fileupload"; }  <h2>fileupload</h2>  <h3>upload 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 file upload !</span> }   <script>     function successmessage()     {         x = document.getelementbyid("sm");         x.innerhtml = "file upload successful !";     } </script> 

few things,

first, need model indicate successful upload, can use bool in instance indicate it.

add @ top of view:

@model bool 

then can (keeping view is):

@{     viewbag.title = "fileupload"; }  <h2>fileupload</h2>  <h3>upload 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 file upload !</span> } 

we can manipulate sm in js dependent upon 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 file upload !";     } </script> 

then in else statement in action method, make sure return true on success, otherwise false. so

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);