Upload many files at once with HTML and JavaScript
Published: 2021-06-08 09:06:28

---
title: Upload many files at once with HTML and JavaScript
published: true
date: 2021-06-07 00:00:00 UTC
tags: 
canonical_url: https://api.video/blog/tutorials/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](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 biuilt the app](https://api.video/blog/tutorials/uploading-large-files-with-javascript). 


## 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](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&lt; 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, its 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="%5C'%22" 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](https://upload.a.video) to [https://upload.a.video/many.html](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 upload 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&lt; maxUpload; i++){
			<file selection upload stuff>
		}
```

The code is live at [https://upload.a.video](https://upload.a.video), and available on [Github](https://github.com/dougsillars/blobUpload/blob/master/many.html). Give it a try, and let us know what you think!</file></upload></upload>