Adding files using the <input> element

The first thing you will notice when you use this version of the application is that there is now a Share a new file button sitting underneath the local video preview window at the top left-hand corner of the user interface. As you saw previously, this button is bound to the click_file_input() function using an onclick event handler. This is a very simple function that triggers the click event on the file_input element itself.

// initiate manual file selection
function click_file_input(event) {
  document.getElementById('file_input').click();
}

Doing so allows us to use an image button and hide the default file_input element, so that we can easily customize the design of the user interface as per our choice and not just limited by the design constraints of the input element.

This then prompts the browser to present the user with the native file selection user interface. Once the user has selected the file of his/her choice, then the file_input change...