Page shows upload progress percentage - how can I move that?

This upload progress code:

 request.upload.onprogress = function (event) {
		                callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");

from the funtion code below, shows the percentage of upload in the upper left corner of the page in text, upon uploading (see attached image example).

How can I move this to, for example, a container in the middle of the page? That’s my main question. But, I’d also like to know how I might style that (an example would be great). Thanks for any help.

		        function makeXMLHttpRequest(url, data, callback) {
		            var request = new XMLHttpRequest();
		            request.onreadystatechange = function () {
		                if (request.readyState == 4 && request.status == 200) {
		                    if (request.responseText === 'success') {
		                        callback('Upload Complete');
		                        return;
		                    }
		                   // alert(request.responseText);
		                        window.location.href = 'index.html';
		                    return;
		                }
		            };
		            request.upload.onloadstart = function () {
		                callback('Upload started...');
		            };
		            request.upload.onprogress = function (event) {
		                callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
		            };
		            request.upload.onload = function () {
		                callback('Progress Ending');
		            };
		            request.upload.onload = function () {
		                callback('Upload Complete');
		            };
		            request.upload.onerror = function (error) {
		                callback('Upload failed.');
		            };
		            request.upload.onabort = function (error) {
		                callback('Upload aborted.');
		            };
		            request.open('POST', url);
		            request.send(data);
		        }

The positioning of the progress widget will most likely be controlled by CSS. We’d need to see both the HTML and the CSS that applies to it in order to be able to advise how best to get it positioned where on the page you want it.

2 Likes

Thanks for your reply. Here is the additional code you requested:

<body>
    <style>
        html,
        body {
            margin: 0!important;
            padding: 0!important;
            overflow: hidden!important;
            width: 100%;
        }
    </style>
                <style>
		            video {
		              max-width: 100%;
		              border: 5px solid yellow;
		              border-radius: 9px;
		              width: 680px;
		              height: 420px;
		            }
		            body {
		              background: ffffff;
		            }
		            h1 {
		              color: #800000;
		            }
        </style>

   <header id="header"></header>
    <h1>Webcam Record</h1>

    <br>

    <button id="btn-start-recording">Start Recording</button>
    <button id="btn-stop-recording" disabled>Stop Recording</button>
    <button id="upload-video" onclick="InitUploading()" disabled="">Upload Now</button>

    <br>
 <video id="" controls="" autoplay=""></video>

<script> ... </script>
</body>

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.