Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 526
  • Last Modified:

ASP.NET File Upload

Here's what I'm trying to do:

render upload form
 - user fills out form, selects file
 - user clicks upload btn
render new page
 - display "uploading" message while files upload (consists of message with animated gif, lame, but free)
 - display "upload completed/failed" message when done (showing filenames, etc.)
 - display summary information from upload form (various user details entered in the orig. form)

I've got the upload form and new page working using server.transfer.  However, I haven't been able to get the interim step of displaying some type of "uploading message" while the uploads are processed.  I've tried various page_load, page_init, etc., and I get the same result...only the upload completed messages appear.  I've tried using server.execute commands and end up with the same result...an apparently dead browser until the upload is complete.

I'd prefer to do this using only asp.net, and avoid javascript if at all possible (but if I have to, I will).  I'm coding in C# so examples in C# would be most helpful, but I can decipher well documented VB and translate it.

If I can get this figured out, you can have all my points...I'll just buy more...lol.

Thanks,
Paul

BTW, the test site is http://palrepro.brinkster.net/upload_test.aspx

P.S. I've realized to late that I posted this in the wrong area, and should have put it under Web Languages/ASP.
0
SimmerDown
Asked:
SimmerDown
  • 7
  • 2
  • 2
  • +2
1 Solution
 
NicolNghiaCommented:
Hi SimmerDown,

It's quite difficult to do that on the same page. The reason is that when you submit data to server, server must process all received data before return response to browser. So, below is an idea that can help you:
- Before submit data to server, you can show a Web Dialog that contains the message "Uploading".
- After completing the upload, you return to browser and use client script to close the dialog and show other message: "Upload Completed".

Good luck,
0
 
SimmerDownAuthor Commented:
Hi Nicol,

I quite agree that this is difficult to do, which is why I posted this message.  Also, I'm not really trying to do it with only 1 page, but with 2.  The first page is the upload request page...the second does the upload.  However, the issue is the same...how to notify the user that the upload is being processed without using javascript.  To be perfectly honest, I'm not familiar with the Web Dialog you mentioned.  A code sample would be most helpful.

Thank you,
Paul
0
 
sphowardCommented:
This sounds oddly like a page on an e-commerse site. - What I did ( message while waiting on credit card to process ) was to make a page that displayed a message "Please wait.. credit card processing" and it even had an animated .GIF to appear it was "thinking". Then I did a server.transfer to a processing page, right after that displayed. After the processing page did it's magic, I made a redirect at the bottom of it to clear the browser. So for yours. - You would make the upload form(upload.asp), then have it submit to a message page(message.asp) with a server.transfer("process.asp") statement at the bottom of it. the process page (process.asp) would grab the file, then have the response.redirect("thankYou.asp") at the bottom of it to the page that displayed the completion of the file upload (thankYou.asp).
See if this does it.
-Skip
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
SimmerDownAuthor Commented:
Thanks for the response Skip.

I tried your suggestion, but I still have the same issue.  Placing the Server.Transfer statement at any place in the page still results in the processing to complete before rendering the page, so you end up with a dead browsed, then uploading immediately replace by complete, because all of the processing is done.  You can actually see it in action at http://palrepro.brinkster.net/upload_test.aspx.  In this scenario, a page with Uploading is called, and from there a server.transfer at the bottom of the page calls the upload page.  You end up with both pages rendering simulatneously after the upload finishes.

I'm guessing I'll have to use javascript and a timer or something, but it seems ridiculous to have to do so.  There must be an ASP.net command that will cause a function to be executed AFTER the page has been sent to the browser...in other words, force a round trip after rendering without a button.

Anyone know how to do this?
0
 
sphowardCommented:
make sure that you have response.buffer = false at the top of the server.transfer page
0
 
SimmerDownAuthor Commented:
Still having the same issue...the server.transfer gets processed before the page is rendered.  Here's my source:

-------upload_test.aspx------
<% Response.Buffer = false; %>
<%@ Page Language="C#" ClassName="Upload"%>
<script runat="server">

void Button1Click(object Source, EventArgs e)
{
     Server.Transfer("upload_wait.aspx");
}

string saveFiles()
{
     string strMessage = "";
     string strFileName;
     HttpPostedFile objFile;

     for (int i=0; i<Request.Files.Count; i++)
     {
          objFile = Request.Files[i];
          if (objFile.FileName != "")
          {
               strFileName = objFile.FileName;
               strFileName = strFileName.Substring(strFileName.LastIndexOf("\\") + 1);
               try
               {
                    objFile.SaveAs("\\\\brink-premfs1\\sites\\premium4\\palrepro\\webroot\\ftp\\incoming\\" + strFileName);
                    strMessage+= "Uploaded c:\\upload\\" + strFileName + "<BR>";
               }
               catch (Exception err)
               {
                    strMessage += "Failed uploading " + strFileName + ": " +err.ToString() + "<BR>";
               }
          }
     }
     return strMessage;
}

</script>
<html>
<head>
<title>Multiple file upload test</title>
</head>
<body>
<b>Multiple file upload test</b>
<form id='frmUp' enctype='multipart/form-data' runat='server'>
<BR>
<input id='file1' type='file' runat='server' />
<BR>
<input id='file2' type='file' runat='server' />
<BR>
<input id='file3' type='file' runat='server' />
<BR>
<input type='button' id='Button1' value='Upload' OnServerClick='Button1Click' runat='server'><br>
<BR>
<SPAN id='txtMsg' runat='server'/>
</form>
</body>
</html>
------ end upload_test.aspx ------


------ upload_wait.aspx ------
<% Response.Buffer = false; %>
<%@ Page Language="C#" %>
<%@ Reference Page="upload_test.aspx" %>

<html>
<head>
<title>Multiple file upload test</title>
</head>
<body>
<BR>
Please wait while uploading
<BR>
</body>
</html>
<% Server.Transfer("dotheupload.aspx"); %>
------ end upload_wait.aspx ------

------ dotheupload.aspx ------
<% Response.Buffer = false; %>
<%@ Page Language="C#" %>
<%@ Reference Page="upload_test.aspx" %>

<script runat="server">

//public Upload sourcepage;

private void Page_Load(object sender, System.EventArgs e)
{
     txtMsg.InnerHtml = saveFiles();
}

string saveFiles()
{
     string strMessage = "";
     string strFileName;
     HttpPostedFile objFile;

     for (int i=0; i<Request.Files.Count; i++)
     {
          objFile = Request.Files[i];
          if (objFile.FileName != "")
          {
               strFileName = objFile.FileName;
               strFileName = strFileName.Substring(strFileName.LastIndexOf("\\") + 1);
               try
               {
                    objFile.SaveAs("\\\\brink-premfs1\\sites\\premium4\\palrepro\\webroot\\ftp\\incoming\\" + strFileName);
                    strMessage+= "Uploaded c:\\upload\\" + strFileName + "<BR>";
               }
               catch (Exception err)
               {
                    strMessage += "Failed uploading " + strFileName + ": " +err.ToString() + "<BR>";
               }
          }
     }
     return strMessage;
}

</script>

<html>
<head>
<title>File upload test</title>
</head>
<body>
<b>file upload test</b>
<BR>
<SPAN id='txtMsg' runat='server'/>
</body>
</html>
------ end dotheupload.aspx ------

Thanks for your continued assistance on this, I really appreciate it.

Paul
0
 
SimmerDownAuthor Commented:
Ok, I've been working on this a bit and I've almost come up with a solution that's somewhat easier than using 3 or 4 different pages.

=========================================================
<% Response.Buffer = true; %>
<%@ Page Language="C#" ClassName="Upload"%>
<script runat="server">

void Page_Load()
{
     if(!IsPostBack)
     {
          uploadForm.Visible = true;
          uploading.Visible = false;
          done.Visible = false;
          Response.Write("Is Not Post Back<BR>");
     }
     else
     {
          uploadForm.Visible = false;
          uploading.Visible = true;
          Response.Write("Before the flush<BR>");
          Response.Write("Is Post Back<BR>");
     }
}

void Button1Click(object Source, EventArgs e)
{
     Response.Flush();
     uploading.Visible = false;
     done.Visible = true;
     txtMsg.InnerHtml = saveFiles();
}

string saveFiles()
{
     string strMessage = "";
     string strFileName;
     HttpPostedFile objFile;

     for (int i=0; i<Request.Files.Count; i++)
     {
          objFile = Request.Files[i];
          if (objFile.FileName != "")
          {
               strFileName = objFile.FileName;
               strFileName = strFileName.Substring(strFileName.LastIndexOf("\\") + 1);
               try
               {
                    objFile.SaveAs("\\\\brink-premfs1\\sites\\premium4\\palrepro\\webroot\\ftp\\incoming\\" + strFileName);
                    strMessage+= "Uploaded c:\\upload\\" + strFileName + "<BR>";
               }
               catch (Exception err)
               {
                    strMessage += "Failed uploading " + strFileName + ": " +err.ToString() + "<BR>";
               }
          }
     }
     return strMessage;
}

</script>
<html>
<head>
<title>Multiple file upload test</title>
</head>
<body>
<b>Multiple file upload test</b>
<form id='frmUp' enctype='multipart/form-data' runat='server'>

<DIV id='uploadForm' runat='server'>
<BR>
<input id='file1' type='file' runat='server' />
<BR>
<input id='file2' type='file' runat='server' />
<BR>
<input id='file3' type='file' runat='server' />
<BR>
<input type='button' id='Button1' value='Upload' OnServerClick='Button1Click' runat='server'>
<BR>
</DIV>

<DIV id='uploading' runat='server'>
Please wait while we upload your files...
</DIV>

<DIV id='done' runat='server'>
<SPAN id='txtMsg' runat='server'/>
</DIV>

</form>
</body>
</html>
======================================

Now, after the btn click, the page_load event is fired, then the btn click event is fired.  However, I still haven't been able to post data to the browser before executing the file transfer.  I've tried Response.Buffer = false and true, Response.Flush doesn't seem to have any effect no matter where I put it.  The page works almost as it should, just the pesky problem of forcing the damn server to send data to the browser when I want it to instead of when it wants to.

Anyone have any ideas?
0
 
SimmerDownAuthor Commented:
Ok, I've been working on this a bit and I've almost come up with a solution that's somewhat easier than using 3 or 4 different pages.

=========================================================
<% Response.Buffer = true; %>
<%@ Page Language="C#" ClassName="Upload"%>
<script runat="server">

void Page_Load()
{
     if(!IsPostBack)
     {
          uploadForm.Visible = true;
          uploading.Visible = false;
          done.Visible = false;
          Response.Write("Is Not Post Back<BR>");
     }
     else
     {
          uploadForm.Visible = false;
          uploading.Visible = true;
          Response.Write("Before the flush<BR>");
          Response.Write("Is Post Back<BR>");
     }
}

void Button1Click(object Source, EventArgs e)
{
     Response.Flush();
     uploading.Visible = false;
     done.Visible = true;
     txtMsg.InnerHtml = saveFiles();
}

string saveFiles()
{
     string strMessage = "";
     string strFileName;
     HttpPostedFile objFile;

     for (int i=0; i<Request.Files.Count; i++)
     {
          objFile = Request.Files[i];
          if (objFile.FileName != "")
          {
               strFileName = objFile.FileName;
               strFileName = strFileName.Substring(strFileName.LastIndexOf("\\") + 1);
               try
               {
                    objFile.SaveAs("\\\\brink-premfs1\\sites\\premium4\\palrepro\\webroot\\ftp\\incoming\\" + strFileName);
                    strMessage+= "Uploaded c:\\upload\\" + strFileName + "<BR>";
               }
               catch (Exception err)
               {
                    strMessage += "Failed uploading " + strFileName + ": " +err.ToString() + "<BR>";
               }
          }
     }
     return strMessage;
}

</script>
<html>
<head>
<title>Multiple file upload test</title>
</head>
<body>
<b>Multiple file upload test</b>
<form id='frmUp' enctype='multipart/form-data' runat='server'>

<DIV id='uploadForm' runat='server'>
<BR>
<input id='file1' type='file' runat='server' />
<BR>
<input id='file2' type='file' runat='server' />
<BR>
<input id='file3' type='file' runat='server' />
<BR>
<input type='button' id='Button1' value='Upload' OnServerClick='Button1Click' runat='server'>
<BR>
</DIV>

<DIV id='uploading' runat='server'>
Please wait while we upload your files...
</DIV>

<DIV id='done' runat='server'>
<SPAN id='txtMsg' runat='server'/>
</DIV>

</form>
</body>
</html>
======================================

Now, after the btn click, the page_load event is fired, then the btn click event is fired.  However, I still haven't been able to post data to the browser before executing the file transfer.  I've tried Response.Buffer = false and true, Response.Flush doesn't seem to have any effect no matter where I put it.  The page works almost as it should, just the pesky problem of forcing the damn server to send data to the browser when I want it to instead of when it wants to.

Anyone have any ideas?
0
 
LosBearCommented:
As I understand it (I needed exactly this solution last year), it's not possible as things are.

In order to do this, you must have an ActiveX object installed client side so the user can see a message or a progress bar.

Because the process involves a multipart form:
ENCTYPE="multipart/form-data" (in your form tag)

the two pages are essentially joined with no room for a middle page without breaking the passed variables to the execute page.

Chilisoft has a download (cost $$$) -

My solution?  I simply placed a javascript message upon hitting the "upload" button that warns the user "The upload is about to begin, please be patient" and another javascript that dims out the button so the user doesn't click on it again.  

I'm interested in seeing if you guys come up with another way around this.  best of luck.

Bear
0
 
SimmerDownAuthor Commented:
Here's the solution I came up with...comments at bottom.
http://palrepro.brinkster.net/upload_test.aspx

============================================
<%@ Page Language="C#" ClassName="Upload" Buffer="false" %>
<script runat="server">

void Page_Load()
{
      if(!IsPostBack)
      {
            theForm.Visible = true;
            theStatus.Visible = false;
      }
      else
      {
            theForm.Visible = false;
            theStatus.Visible = true;
            Button1.Visible = false;
      }
}

void btn1click(object sender, System.EventArgs e)
{
      txtMsg.InnerHtml = saveFiles();
}

string saveFiles()
{
      string strMessage = "";
      string strFileName;
      HttpPostedFile objFile;

      for (int i=0; i<Request.Files.Count; i++)
      {
            objFile = Request.Files[i];
            if (objFile.FileName != "")
            {
                  strFileName = objFile.FileName;
                  strFileName = strFileName.Substring(strFileName.LastIndexOf("\\") + 1);
                  try
                  {
                        objFile.SaveAs("\\\\brink-premfs1\\sites\\premium4\\palrepro\\webroot\\ftp\\incoming\\" + strFileName);
                        strMessage+= "Uploaded c:\\upload\\" + strFileName + "<BR>";
                  }
                  catch (Exception err)
                  {
                        strMessage += "Failed uploading " + strFileName + ": " +err.ToString() + "<BR>";
                  }
            }
      }
      return strMessage;
}

</script>
<html>
<head>
<title>Multiple file upload test</title>
<SCRIPT type='text/javascript'>
function initPage()
{
      document.getElementById("uploadForm").style.display = "block";
      document.getElementById("uploading").style.display = "none";
      document.forms.frmUp.Button1.style.visibility = "hidden";
}

function prepUpload()
{
      document.getElementById("uploadForm").style.visibility = "hidden";
      document.getElementById("uploading").style.display = "block";
      document.forms.frmUp.Button1.click();
}
</SCRIPT>
</head>
<body onload="javascript:initPage()">
<b>Multiple file upload test</b>

<form id='frmUp' enctype='multipart/form-data' runat='server'>

<!-- MAIN FORM DIV - controled by Page_Load -->
<DIV id='theForm' runat='server'>

      <!-- UPLOADING DIV - controlled by JS -->
      <DIV id='uploading'>
      Please wait while we upload your files...
      </DIV>
      <!-- END UPLOADING DIV -->

      <!-- FORM DIV - controlled by JS -->
      <DIV id='uploadForm'>
      <BR>
      <input id='file1' type='file' runat='server' />
      <BR>
      <input id='file2' type='file' runat='server' />
      <BR>
      <input id='file3' type='file' runat='server' />
      <BR>
      <input type='button' id='jsButton' value='UploadJS' onclick='javascript:prepUpload();' />
      <BR>
      </DIV>
      <!-- END FORM DIV -->

</DIV>
<!-- END MAIN FORM DIV -->

<!-- STATUS DIV - controlled by Page_Load -->
<DIV id='theStatus' runat='server'>
      <SPAN id='txtMsg' runat='server'/>
</DIV>
<!-- END STATUS DIV -->

<!-- this is the asp.net upload submit button, hidden by JS initPage function -->
<input type='button' id='Button1' value='Upload' runat='server' OnServerClick='btn1click' />
</form>
</body>
</html>
==============================================

This works like I want it to.  The only thing I might change is to assign the form values to hidden fields so that I can do display = "none" rather than visibility = "hidden" for the form data.  Using "none" seems to lose the filenames to upload.

The important thing was putting the JS controlled divs inside another asp controlled div.  That and the hidden OnServerClick button which is clicked by JS.  I also had to add the Button1.Visible = "false" in the IsPostBack event because it was showing up.  Putting it in both caused it to be unclickable.  Weird.

I'm not the best as JS (or C# or ASP for that matter) so I'm sure there must be a more elegant way to do it.

I'm not really sure who to award points to...I'd be interested to see if anyone can clean up what I've done and make it better or cleaner.

Also, I've only tested this on NS7 and IE6, so if you have probs with other browsers, let me know.  Any constructive comments would be appreciated.
0
 
LosBearCommented:
Damn, I'm impressed!  I'd say keep the points for all the work you've done...
0
 
SimmerDownAuthor Commented:
Guess I'll ask to have my points refunded then...thanks!
0
 
Computer101Commented:
Points refunded and placed in PAQ

Computer101
E-E Admin
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

  • 7
  • 2
  • 2
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now