asp.net video upload with progress bar : The Official Microsoft ASP.NET Forums

Reply

bladde_89

Member

140 Points

asp.net video upload with progress bar

Dec 25, 2012 07:36 PM|LINK

I am trying to implement a video upload with a progress bar using an XMLhttprequest() and a html5 progress element like this:

<input type="file" name="fileUpload1" id="fu1" />
        <button type="button" id="clicker" value="Upload" name="Upload" >Upload</button>
        <progress id="prog1"></progress>

and the js and ashx:

$("#clicker").live('click', function (e) {
            e.preventDefault();
            UploadVideo("fu1", "");
        });

        function UploadVideo(elm, url) {
             var xhr = new XMLHttpRequest();
             var fd = new FormData();
             fd.append("fu1", document.getElementById("fu1").files[0]);
             xhr.addEventListener("progress", ProcessVideo, false);
             xhr.open("POST", "Handler.ashx");
             xhr.send(fd);
        }

        function ProcessVideo(evt) {
            if (evt.lengthComputable) {
                var prog = document.getElementById("prog1");
                prog.max = evt.total;
                prog.value = evt.loaded;
            }
        }

        public void ProcessRequest (HttpContext context) {
             var file = context.Request.Files["fu1"];
             var savePath = HttpContext.Current.Server.MapPath("~/teees/" + file.FileName);
             file.SaveAs(savePath);
             context.Response.ContentType = "text/plain";
             context.Response.Write("Hello World");
        }

this works fine but the progress bar doesn't move its stuck at zero then jumps to 100 when the upload is finished, what is the problem ?

thanks