24
loading...
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 biuilt the app.
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.
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.
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>
}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 to https://upload.a.video/many.html, allowing for more than one video to be uploaded at once.
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< 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!