ASP.NET display progress bar during post back - asp.net

Question

I have a fileupload control on a form and a button. Once a button is clicked the server converts the file into a datatable and loops through datatable records for validation purposes.
My problem: the validation process takes a long time, so i wanted to display current item being processed to user.
My attempts: i found Ajax and SignalR being implemented in such scenarios. However, Ajax requires an update panel to work which cannot work with the updatefile control. I tried SignalR and it works however, it cannot work during a postback --> apparently.
Can anyone assist me in finding a solution.
Thank you!

Answer 1

Hey you can use ModalPopupExtender of ajaxToolkit something like this
<ajaxToolkit:ModalPopupExtender ID="ProgressBarModalPopupExtender" runat="server"
BackgroundCssClass="ModalBackground" BehaviorID="ProgressBarModalPopupExtender"
TargetControlID="hiddenField" PopupControlID="Panel1" DynamicServicePath="" Enabled="True" />
<asp:Panel ID="Panel1" runat="server" Style="display: none; background-color: #C0C0C0;">
<p class="wait">Please wait!</p>
</asp:Panel>
<asp:HiddenField ID="hiddenField" runat="server" />
add the above code any where on your page then on your button of file upload try this
<input type="submit" value="Upload" id="upload"
causesvalidation="False" onclick="javascript:return validateAdd();"
onserverclick="btnupload_ServerClick" runat="server" />
in javascript
function validateAdd() {
var myExtender = $find('ProgressBarModalPopupExtender');
myExtender.show();
return true;
}
and in code behind
protected void btnupload_ServerClick(object sender, EventArgs e)
{
// your code of upload
//
// your code of upload
ProgressBarModalPopupExtender.Hide();
}
this shall do

Answer 2

If you only target HTML5 users you can use the FileReader class and stream the file with ajax. This will work with SignalR
I did it like this in my project, maybe it can give you some pointers
(function(app) {
app.FileUploadViewModel = app.define({
init: function (parent, file, callback) {
this.kb = 1024;
this.bufferSize = this.kb * 512;
this.speedSampleAt = this.bufferSize;
this.file = file;
this.parent = parent;
this.reader = new FileReader();
this.total = this.file.size / this.bufferSize;
this.current = ko.observable(0);
this.progress = ko.computed(this.getProgress, this);
this.speed = ko.observable(0);
this.speedText = ko.computed(this.getSpeedText, this);
this.name = this.file.name;
this.reader.onload = this.onLoadPart.bind(this);
this.callback = callback;
this.createStream();
},
prototype: {
createStream: function() {
app.utils.post("api/upload/createstream", {
parentId: this.parent.id,
filename: this.file.name
}, function (id) {
this.id = id;
this.loadPart();
}.bind(this));
},
getSpeedText: function() {
return Math.round(this.speed()) + " Mbit / s";
},
getProgress: function () {
return (this.current() / this.total * 100) + "%";
},
loadPart: function () {
var start = this.current() * this.bufferSize;
this.calculateSpeed(start);
var blob = this.file.slice(start, start + this.bufferSize);
this.done = blob.size != this.bufferSize || blob.size === 0;
this.reader.readAsDataURL(blob);
},
onLoadPart: function (part) {
if (part.loaded === 0) {
this.onPartTransfered();
} else {
var base64 = part.target.result.substr(part.target.result.indexOf(",") + 1);
app.utils.post("api/upload/Part", { id: this.id, data: base64 }, this.onPartTransfered.bind(this));
}
},
onPartTransfered: function () {
this.current(this.current() + 1);
if (this.done) {
this.callback(this);
app.utils.post("api/upload/closestream", this.id, function (file) {
this.parent.addChild(file);
}.bind(this));
} else {
this.loadPart();
}
},
calculateSpeed: function (position) {
if (this.lastSpeedSample === undefined) {
this.lastSpeedSample = new Date();
}
if (position % this.speedSampleAt === 0) {
var delta = new Date() - this.lastSpeedSample;
var seconds = delta / 1000;
var mbit = this.speedSampleAt / this.kb / this.kb * 8;
var speed = mbit / seconds;
this.lastSpeedSample = new Date();
this.speed(speed);
}
}
}
});
})(window.Filebrowser = window.Filebrowser || {});