Upload many files at once with HTML and JavaScript

The first demo we published on a.video was a demo on how to upload a video (check it out yourself at https://upload.a.video. This is a great little demo that will take your video, break it into smaller chunks (1 MB in this case), and upload them into api.video. Once the uploads are complete, you get a link to the url where the video will soon be available for playback. You can read the post describing how we built the app.

More than one video

What if you'd like to upload a few videos? You could use this interface multiple times, but that would be slow and tedious.

To resolve this, I've created a new version of the uploader at https://upload.a.video/many.html that allows you to upload more than one video at a time. It only took about 5 lines of added code to make the change from one video to many.

Let's walk through what I did to make this happen.

Input

First, we need to allow the form to accept multiple files. This is a one word change:

	<input type="file" id="video-file" style='display:none'>

to

	<input type="file" id="video-file" style='display:none' multiple>

This basically tells the browser that users can select more than one file at a time. With this line added, you can select multiple adjacent files while holding the shift key, or multiple non-adjacent files holding the command (on a Mac) key.

Uploading multiple files

In upload a video, only one video could be uploaded at a time. When you add files via a form, they are placed in an array, so once the button to upload was clicked, we defined the video and the video name based on the file in index 0 of the array:

			const file = input.files[0];
			const filename = input.files[0].name;
			
			<upload stuff>

There's just one file, so grab the file in index 0, grab the filename and upload the file to api.video. Extending this to more than one file is easy: create a loop over the array of files (incrementing index i), and upload each file in the array by referencing file i in the array:

  const numberofFiles = input.files.length;
	for( i=0;i< numberofFiles; i++){
			//do the upload for each file.

			const file = input.files[i];
			const filename = input.files[i].name;
			<upload stuff>
			
	}

Make the UI look nice

So that was probably the 5 lines of code I promised, (6 if you count the comment). But the UI was weird, since the notifications and text were updating and overlapping for each file being uploaded - and you couldn't read anything as the text was changing so quickly. So, let's fix that. I changed 3 lines of code here:

First: the upload information is changed to show information for each video by appending the HTML and adding the video number:

			document.getElementById("video-information").innerHTML += "Video "+ i +" will be uploaded in " + numberofChunks + " chunks.<br/>"

Second: as the videos upload, so the upload information should update for each video:

document.getElementById("chunk-information").innerHTML = "Video: " +i+" Chunk # " + chunkCounter + " is " + percentComplete + "% uploaded. Total uploaded: " + totalPercentComplete +"%";

This one just overwrites itself all the time. I could probably make this look nicer, but for a demo, it's ok.

When the upload is completed, we add the completed upload notice, along with the url where the playback can be watched:

	document.getElementById("video-information").innerHTML += "Video " +i+" is uploaded! Watch the video <a href=\'" + playerUrl +"\' target=\'_blank\'>here</a><br/>" ;

All three of these lines were already in the code, I just updated them to fit the multiple upload function of the application. That said, with a grand sum of 8 lines of uploaded code, we've modified https://upload.a.video to https://upload.a.video/many.html, allowing for more than one video to be uploaded at once.

Try it out

With ~10 lines of modified code, I've taken a page built for a single video uploaded a page that can now handle many videos, and show the links to the videos when they are completed.

That said, since this is a live demo, I have placed a limit of 3 files per upload, just to keep my account from filling up with videos. These videos will also be stored in the sandbox: so watermarked and deleted after 24 hours.

var maxUpload = Math.min(numberofFiles, 3);

		for( i=0;i< maxUpload; i++){
			<file selection & upload stuff>
		}

The code is live at https://upload.a.video, and available on Github. Give it a try, and let us know what you think!