?
Solved

ASP.NET File Upload

Posted on 2003-03-14
13
Medium Priority
?
516 Views
Last Modified: 2011-10-03
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
Comment
Question by:SimmerDown
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 2
  • 2
  • +2
13 Comments
 
LVL 1

Expert Comment

by:NicolNghia
ID: 8141399
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
 

Author Comment

by:SimmerDown
ID: 8141563
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
 

Expert Comment

by:sphoward
ID: 8145826
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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 

Author Comment

by:SimmerDown
ID: 8148874
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
 

Expert Comment

by:sphoward
ID: 8149884
make sure that you have response.buffer = false at the top of the server.transfer page
0
 

Author Comment

by:SimmerDown
ID: 8152997
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
 

Author Comment

by:SimmerDown
ID: 8155614
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
 

Author Comment

by:SimmerDown
ID: 8155849
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
 
LVL 1

Expert Comment

by:LosBear
ID: 8156439
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
 

Author Comment

by:SimmerDown
ID: 8161875
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
 
LVL 1

Expert Comment

by:LosBear
ID: 8162100
Damn, I'm impressed!  I'd say keep the points for all the work you've done...
0
 

Author Comment

by:SimmerDown
ID: 8163827
Guess I'll ask to have my points refunded then...thanks!
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 8164056
Points refunded and placed in PAQ

Computer101
E-E Admin
0

Featured Post

Video: Liquid Web Managed WordPress Comparisons

If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses
Course of the Month8 days, 6 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question