Adding support for drag-and-drop

While it's easy for a user to click on the Share a new file button, it is also convenient to allow them to simply drag a file into the browser window. Previously we added two event handlers that deal with the dragover and drop events and we bound this to open_call_state which effectively fills the entire browser viewport. This means that you can now drag a file onto any part of the browser window to initiate the file sharing transfer.

First, we create the drag_over() function that simply prevents the browser from leaving our web page and loading the file that was dragged into it, which is the default browser behavior.

// prevent window from reloading when file dragged into it
function drag_over(event) {
  event.stopPropagation();
  event.preventDefault();
}

Then, within the file_input() function, we have some additional lines of code:

function file_input(event) {
  event.stopPropagation();
  event.preventDefault();
  var files = undefined;
  if (event.dataTransfer...