Dropzone Test

dropzone.jade

doctype html
html
  head
    title Dropzone Test
    
    meta(charset='utf-8')
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    style(type='text/css')
      :stylus
        #uploadWebsite
          height 200px
          width 200px
          background #f3f3f3
          border 5px dashed #ccc
        #progressWebsite
          height 10px
          background #ccc
          width 0
          display block

  body


    #uploadWebsite
    span#removeWebsite -remove-
    #progressWebsite

    script(type='text/javascript', src='dropzone.min.js')
    script.
      (function () {
        var dropOpts = {
          url: '#',
          paramName: 'siteZip',
          uploadMultiple: false,
          createImageThumbnails: false,
          maxFiles: 1
        };
        var drop = new Dropzone('#uploadWebsite', dropOpts);

        drop.on('addedfile', function (_file) {
          document.getElementById('progressWebsite').style.display = 'block';
          document.getElementById('progressWebsite').style.width = '0px';
          document.getElementById('removeWebsite').addEventListener('click', function () { 
            drop.removeFile(_file); 
          });
        });

        drop.on('totaluploadprogress', function (progress) {
          document.getElementById('progressWebsite').style.width = progress + '%';
        });

        drop.on('complete', function () {
          document.getElementById('progressWebsite').style.display = 'none';
        });

      })();