ASP.Net/C# File Upload Progress Display
- by Ioxp
I am having a hard time figuring out how to do a "Please wait while file is uploading" message when the user submits the following form. So far the application works to specification with regards to checking files and uploading to the server. You will see some java script below, this is there to allow me to fake out the style of the file up load buttons so that it matches the rest of the site.
I have tried to use the ASP.Net Ajax controls to do this however the updateprogress panel would not show up. In further reading it was explained that this has something to do with the Asynchronous transfer that the file upload control uses when you issue a PostedFile.SaveAs("filename") command.
I also found a site that refereed to using an iframe to do the job. I'm not really sure if that's the best way to go about doing this or not so I'm asking you the professionals of stackoverflow for help to try and resolve this issue.
I will be more than happy to post any spinets you need from my code to help me expedite a solution for this.
<table border="0">
<tr>
<td>File 1: </td>
<td><div class="fileinputs"><input type="file" class="file" size="37" id="f1" runat="server" /></div></td>
</tr>
<tr>
<td>File 2: </td>
<td><div class="fileinputs"><input type="file" class="file" size="37" id="f2" runat="server" /></div></td>
</tr>
<tr>
<td colspan="2" style="text-align:right;"><asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/Buttons/Upload_Files.gif" OnClick="Submit_Form" /></td>
</tr>
</table>
<asp:Label ID="lblError" runat="server" Text=""></asp:Label>
<script type="text/javascript">
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
var fakeInput = document.createElement('input');
fakeInput.style.width = '200px';
fakeFileUpload.appendChild(fakeInput);
var image = document.createElement('img');
image.src='../Images/Buttons/Browse.gif';
fakeFileUpload.appendChild(image);
var x = document.getElementsByTagName('input');
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
</script>
