Repository: mozilla/send
File: frontend/src/upload.js (JavaScript)

Code before:
  $('#ul-progress').circleProgress({
    value: 0.0,
    startAngle: -Math.PI / 2,
    fill: '#3B9DFF',
    size: 158,
    animation: { duration: 300 }
  });

  //link back to homepage
  $('.send-new').attr('href', window.location);

  // on file upload by browse or drag & drop
  function onUpload(event) {
    event.preventDefault();
    let file = '';
    if (event.type === 'drop') {
      if (event.originalEvent.dataTransfer.files.length > 1){
        document.l10n.formatValue('uploadPageMultipleFilesAlert')
                     .then(str => {
                       alert(str);
                     });
        return;
      }
      file = event.originalEvent.dataTransfer.files[0];
    } else {
      if (event.target.files.length > 1){
        document.l10n.formatValue('uploadPageMultipleFilesAlert')
                     .then(str => {
                       alert(str);
                     });
        return;
      }
      file = event.target.files[0];
    }

    $('#page-one').attr('hidden', true);
    $('#upload-error').attr('hidden', true);
    $('#upload-progress').removeAttr('hidden');
    //don't allow drag and drop when not on page-one
    $('body').off('drop', onUpload);
    const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field

    const fileSender = new FileSender(file);
    $('#cancel-upload').click(() => {
      fileSender.cancel();
      location.reload();
      document.l10n.formatValue('uploadCancelNotification')
                   .then(str => {
                     notify(str);
                   });
    });

Review comment (suggestion):
I don't think this case will ever happen as long as we don't have `multiple` on the input element, but there's no harm in checking here too.

Code after:
    value: 0.0,
    startAngle: -Math.PI / 2,
    fill: '#3B9DFF',
    size: 158,
    animation: { duration: 300 }
  });

  //link back to homepage
  $('.send-new').attr('href', window.location);

  // on file upload by browse or drag & drop
  function onUpload(event) {
    event.preventDefault();
    let file = '';
    if (event.type === 'drop') {
      if (event.originalEvent.dataTransfer.files.length > 1 || event.originalEvent.dataTransfer.files[0].size === 0){
        $('.upload-window').removeClass('ondrag');
        document.l10n.formatValue('uploadPageMultipleFilesAlert')
                     .then(str => {
                       alert(str);
                     });
        return;
      }
      file = event.originalEvent.dataTransfer.files[0];
    } else {
      file = event.target.files[0];
    }

    $('#page-one').attr('hidden', true);
    $('#upload-error').attr('hidden', true);
    $('#upload-progress').removeAttr('hidden');
    //don't allow drag and drop when not on page-one
    $('body').off('drop', onUpload);
    const expiration = 24 * 60 * 60 * 1000; //will eventually come from a field

    const fileSender = new FileSender(file);
    $('#cancel-upload').click(() => {
      fileSender.cancel();
      location.reload();
      document.l10n.formatValue('uploadCancelNotification')
                   .then(str => {
                     notify(str);
                   });
    });

    fileSender.on('progress', progress => {
      const percent = progress[0] / progress[1];
      // update progress bar
      $('#ul-progress').circleProgress('value', percent);
      $('#ul-progress').circleProgress().on('circle-animation-end', function() {
        $('.percent-number').html(`${Math.floor(percent * 100)}`);