Upload Video in chunks with preview and progress bar using JavaScript

So, we have 3 following goals here:

1. Preview video before it is uploaded
2. Upload video file in small chunks
3. Display a progress bar

All these tasks are achievable with JS and jQuery without any other libraries.
For choosing a video file we will use the standard input element

<input type="file" id="uploadVideoFile" accept="video/*" />

1. <input type="file" id="uploadVideoFile" accept="video/*" />

<input type="file" id="uploadVideoFile" accept="video/*" />

So to access the chosen file we will call

var fileInput = document.getElementById("uploadVideoFile");

1. var fileInput = document.getElementById("uploadVideoFile");

var fileInput = document.getElementById("uploadVideoFile");

To display video we need a video element

div id="videoSourceWrapper">
   <video style="width: 100%;" controls>
      <source id="videoSource"/>
   </video>
</div>

1. div id="videoSourceWrapper">
2. <video style="width: 100%;" controls>
3. <source id="videoSource"/>
4. </video>
5. </div>

div id="videoSourceWrapper">
   <video style="width: 100%;" controls>
      <source id="videoSource"/>
   </video>
</div>

The following snippet displays the video after it is chosen in the video element for preview

$('#uploadVideoFile').on('change',
    function() {
        var fileInput = document.getElementById("uploadVideoFile");
        console.log('Trying to upload the video file: %O', fileInput);

        if ('files' in fileInput) {
            if (fileInput.files.length === 0) {
                alert("Select a file to upload");
            } else {
                var $source = $('#videoSource');
                $source[0].src = URL.createObjectURL(this.files[0]);
                $source.parent()[0].load();
                $("#videoSourceWrapper").show();
            }
        } else {
            console.log('No found "files" property');
        }
    }
);

1. $('#uploadVideoFile').on('change',
2. function() {
3. var fileInput = document.getElementById("uploadVideoFile");
4. console.log('Trying to upload the video file: %O', fileInput);
6. if ('files' in fileInput) {
7. if (fileInput.files.length === 0) {
8. alert("Select a file to upload");
9. } else {
10. var $source = $('#videoSource');
11. $source[0].src = URL.createObjectURL(this.files[0]);
12. $source.parent()[0].load();
13. $("#videoSourceWrapper").show();
14. }
15. } else {
16. console.log('No found "files" property');
17. }
18. }
19. );

$('#uploadVideoFile').on('change',
    function() {
        var fileInput = document.getElementById("uploadVideoFile");
        console.log('Trying to upload the video file: %O', fileInput);

        if ('files' in fileInput) {
            if (fileInput.files.length === 0) {
                alert("Select a file to upload");
            } else {
                var $source = $('#videoSource');
                $source[0].src = URL.createObjectURL(this.files[0]);
                $source.parent()[0].load();
                $("#videoSourceWrapper").show();
            }
        } else {
            console.log('No found "files" property');
        }
    }
);

As you can see, you can watch any video file having all necessary controls in the video player. Now let's have a look how to upload the video on your server.
For this purpose I have implemented the UploadVideo function

function UploadVideo(file) {
    var loaded = 0;
    var chunkSize = 500000;
    var total = file.size;
    var reader = new FileReader();
    var slice = file.slice(0, chunkSize);
            
    // Reading a chunk to invoke the 'onload' event
    reader.readAsBinaryString(slice); 
    console.log('Started uploading file "' + file.name + '"');
        
    reader.onload = function (e) {
       //Send the sliced chunk to the REST API
        $.ajax({
            url: "http://api/url/etc",
            type: "POST",
            data: slice,
            processData: false,
            contentType: false,
            error: (function (errorData) {
                console.log(errorData);
                alert("Video Upload Failed");
            })
        }).done(function (e){
           loaded += chunkSize;
           var percentLoaded = Math.min((loaded / total) * 100, 100);
           console.log('Uploaded ' + Math.floor(percentLoaded) + '% of file "' + file.name + '"');
      	
           //Read the next chunk and call 'onload' event again
      	   if (loaded <= total) {
      	     slice = file.slice(loaded, loaded + chunkSize);
             reader.readAsBinaryString(slice);
 	   } else { 
  	     loaded = total;
    	     console.log('File "' + file.name + '" uploaded successfully!');
      	   }
        }
    }
}

1. function UploadVideo(file) {
2. var loaded = 0;
3. var chunkSize = 500000;
4. var total = file.size;
5. var reader = new FileReader();
6. var slice = file.slice(0, chunkSize);
8. // Reading a chunk to invoke the 'onload' event
9. reader.readAsBinaryString(slice);
10. console.log('Started uploading file "' + file.name + '"');
12. reader.onload = function (e) {
13. //Send the sliced chunk to the REST API
14. $.ajax({
15. url: "http://api/url/etc",
16. type: "POST",
17. data: slice,
18. processData: false,
19. contentType: false,
20. error: (function (errorData) {
21. console.log(errorData);
22. alert("Video Upload Failed");
23. })
24. }).done(function (e){
25. loaded += chunkSize;
26. var percentLoaded = Math.min((loaded / total) * 100, 100);
27. console.log('Uploaded ' + Math.floor(percentLoaded) + '% of file "' + file.name + '"');
29. //Read the next chunk and call 'onload' event again
30. if (loaded <= total) {
31. slice = file.slice(loaded, loaded + chunkSize);
32. reader.readAsBinaryString(slice);
33. } else {
34. loaded = total;
35. console.log('File "' + file.name + '" uploaded successfully!');
36. }
37. }
38. }
39. }

function UploadVideo(file) {
    var loaded = 0;
    var chunkSize = 500000;
    var total = file.size;
    var reader = new FileReader();
    var slice = file.slice(0, chunkSize);
            
    // Reading a chunk to invoke the 'onload' event
    reader.readAsBinaryString(slice); 
    console.log('Started uploading file "' + file.name + '"');
        
    reader.onload = function (e) {
       //Send the sliced chunk to the REST API
        $.ajax({
            url: "http://api/url/etc",
            type: "POST",
            data: slice,
            processData: false,
            contentType: false,
            error: (function (errorData) {
                console.log(errorData);
                alert("Video Upload Failed");
            })
        }).done(function (e){
           loaded += chunkSize;
           var percentLoaded = Math.min((loaded / total) * 100, 100);
           console.log('Uploaded ' + Math.floor(percentLoaded) + '% of file "' + file.name + '"');
      	
           //Read the next chunk and call 'onload' event again
      	   if (loaded <= total) {
      	     slice = file.slice(loaded, loaded + chunkSize);
             reader.readAsBinaryString(slice);
 	   } else { 
  	     loaded = total;
    	     console.log('File "' + file.name + '" uploaded successfully!');
      	   }
        }
    }
}

It does literally the following:

1. Take the first chunk from the file
2. Call the API using AJAX
3. When the call is done take the next chunk
4. Iterate to step 2

But unfortunately, we cannot use the fake AJAX call here, so let's implement a stub method.

function UploadVideo(file) {
    var loaded = 0;
    var chunkSize = 500000;
    var total = file.size;
    var reader = new FileReader();
    var slice = file.slice(0, chunkSize);
            
    // Reading a chunk to invoke the 'onload' event
    reader.readAsBinaryString(slice); 
    console.log('Started uploading file "' + file.name + '"');
        
    reader.onload = function (e) {
       //Just simulate API
       setTimeout(function(){
    	loaded += chunkSize;
      	var percentLoaded = Math.min((loaded / total) * 100, 100);
      	console.log('Uploaded ' + Math.floor(percentLoaded) + '% of file "' + file.name + '"');

      	//Read the next chunk and call 'onload' event again
      	if (loaded <= total) {
      	  slice = file.slice(loaded, loaded + chunkSize);
          reader.readAsBinaryString(slice);
	} else { 
  	  loaded = total;
    	  console.log('File "' + file.name + '" uploaded successfully!');
      	}
      }, 250);
    }
}

1. function UploadVideo(file) {
2. var loaded = 0;
3. var chunkSize = 500000;
4. var total = file.size;
5. var reader = new FileReader();
6. var slice = file.slice(0, chunkSize);
8. // Reading a chunk to invoke the 'onload' event
9. reader.readAsBinaryString(slice);
10. console.log('Started uploading file "' + file.name + '"');
12. reader.onload = function (e) {
13. //Just simulate API
14. setTimeout(function(){
15. loaded += chunkSize;
16. var percentLoaded = Math.min((loaded / total) * 100, 100);
17. console.log('Uploaded ' + Math.floor(percentLoaded) + '% of file "' + file.name + '"');
19. //Read the next chunk and call 'onload' event again
20. if (loaded <= total) {
21. slice = file.slice(loaded, loaded + chunkSize);
22. reader.readAsBinaryString(slice);
23. } else {
24. loaded = total;
25. console.log('File "' + file.name + '" uploaded successfully!');
26. }
27. }, 250);
28. }
29. }

function UploadVideo(file) {
    var loaded = 0;
    var chunkSize = 500000;
    var total = file.size;
    var reader = new FileReader();
    var slice = file.slice(0, chunkSize);
            
    // Reading a chunk to invoke the 'onload' event
    reader.readAsBinaryString(slice); 
    console.log('Started uploading file "' + file.name + '"');
        
    reader.onload = function (e) {
       //Just simulate API
       setTimeout(function(){
    	loaded += chunkSize;
      	var percentLoaded = Math.min((loaded / total) * 100, 100);
      	console.log('Uploaded ' + Math.floor(percentLoaded) + '% of file "' + file.name + '"');

      	//Read the next chunk and call 'onload' event again
      	if (loaded <= total) {
      	  slice = file.slice(loaded, loaded + chunkSize);
          reader.readAsBinaryString(slice);
	} else { 
  	  loaded = total;
    	  console.log('File "' + file.name + '" uploaded successfully!');
      	}
      }, 250);
    }
}

it 'sends' chunks every 250 milliseconds.
Finally, the simpest part is a progress bar. we just add another div beneath the video element

<div id="uploadVideoProgressBar" style="height: 5px; width: 1%; background: #2781e9; margin-top: -5px;"></div>

1. <div id="uploadVideoProgressBar" style="height: 5px; width: 1%; background: #2781e9; margin-top: -5px;"></div>

<div id="uploadVideoProgressBar" style="height: 5px; width: 1%; background: #2781e9; margin-top: -5px;"></div>

and update its width while sending chunks

$('#uploadVideoProgressBar').width(percentLoaded + "%");

1. $('#uploadVideoProgressBar').width(percentLoaded + "%");

$('#uploadVideoProgressBar').width(percentLoaded + "%");

You can try the complete example on JSFiddler:
https://jsfiddle.net/AndrewBuntsev/47dx86sr/