Drag-and-Drop File to Upload

drag-and-drop-file-to-upload.markdown

Drag-and-Drop File to Upload

A Pen by Guillaume Chabot on CodePen.

License.

index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<div id="dropzone" class="dropzone"></div>

<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div class="wrapper">
  <article class="content">
    <h1>Convert videos into bold and clear writings.</h1>
  </article>
  <aside class="sidebar">
    <div class="upload-module" id="zdrop">
      <svg class="upload-icon" width="32" height="40" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path fill="#1f1f1f" fill-rule="nonzero" d="M14.457 9.09L1.047 22.503l1.542 1.542 12.32-12.32v27.912h2.182v-27.91l12.32 12.318 1.542-1.542L17.543 9.09zM31.273 2.545H.728V.363h30.545z"/><path d="M40 44H-8V-4h48z"/></g></svg>
      <h5>Drag & drop your file here</h5>
      <div class="label">For better results, ensure good audio quality. You can convert files up to 3 GB.</div>
    </div>

    <div id="previews">
      <div class="collection-item" id="zdrop-template">
        <div class="left pv zdrop-info" data-dz-thumbnail>
         <svg xmlns="http://www.w3.org/2000/svg" class="content-icon" width="64" height="64">
  <path d="M39.68 0H7.11v64h49.78V16.48zm.61 3.87l13.32 12.72H40.3zm14.23 57.76h-45V2.37h28.41v16.59h16.59v42.67z"/>
  <path d="M42.16 33.39L26.75 22.73a1.19 1.19 0 0 0-1.86 1V45a1.19 1.19 0 0 0 1.86 1l15.41-10.66a1.19 1.19 0 0 0 0-1.95zm-14.9 9.38V26l12.14 8.4z"/>
</svg>

          <div>
            <h5 class="data" data-dz-name></h5>            <a href="#!" data-dz-remove class="action"><i class="material-icons label icon">close</i></a><p class="label" data-dz-size></p>
          </div>
        </div>
      </div>
    </div>

  <button class="progress-button convert disable">
  <span class="content">Convert</span>
  <span class="value"></span>
  <span class="progress"></span> 
  </button>
  </aside>
</div>

script.js

$(function() {
  var previewNode = document.querySelector("#zdrop-template");
  previewNode.id = "";
  var previewTemplate = previewNode.parentNode.innerHTML;
  previewNode.parentNode.removeChild(previewNode);
  
  var dropZone = document.getElementById("dropzone");

  function showDropZone() {
    dropZone.style.display = "block";
  }
  function hideDropZone() {
    dropZone.style.display = "none";
  }

  var zdrop = new Dropzone(document.body, {
    url: "/Home/UploadFile",
    maxFilesize: 3000,
    previewTemplate: previewTemplate,
    autoQueue: true,
    previewsContainer: "#previews",
    clickable: "#zdrop",
    maxFiles: 1,
    init: function() {
      this.on("maxfilesexceeded", function(file) {
        this.removeAllFiles();
        this.addFile(file);
      });
    }
  });

  zdrop.on("totaluploadprogress", function(progress) {
    var progr = document.querySelector(".progress .determinate");
    if (progr === undefined || progr === null) return;

    progr.style.width = progress + "%";
  });

  zdrop.on("reset", function(e) {
    $(".upload-module").css("display", "block");
    $("#previews").css("display", "none");
    $("#previews .zdrop-info").removeClass("appear-down");
    $(".sidebar button.convert").addClass("disable");
  });

  zdrop.on("addedfile", function(e) {
    $("#dropzone").hide();
    $(".upload-module").css("display", "none");
    $("#previews").css("display", "block");
    $("#previews .zdrop-info").removeClass("appear-down").addClass("appear-down");
    $(".sidebar button.convert").removeClass("disable");
    //e.preventDefault();
    return false;
  });
  
  zdrop.on("drop", function(event) {
    $("#dropzone").hide();
    $(".upload-module").css("display", "none");
    $("#previews").css("display", "block");
    $("#previews .zdrop-info").removeClass();
    $("#previews .zdrop-info").addClass("appear-down");
    $(".sidebar button.convert").removeClass("disable");
    $("body").removeClass("stripes");
    return false;
  });
  
   zdrop.on("dragover", function(event) {
    showDropZone();
     $("body").addClass("stripes");
    return false;
  });

  function allowDrag(e) {
    if (true) {
      e.dataTransfer.dropEffect = "copy";
      e.preventDefault();
    }
  }

  dropZone.addEventListener("dragleave", function(e) {
    hideDropZone();
    $("body").removeClass("stripes");
    console.log("LEAVE");
  });

  // Button
  let $element = {},
    $content = "",
    $self;

  class Button {
    constructor(element, content) {
      ($self = this), ($element = element), ($content = content);
      $element.on("click", $self.OnStart);
    }

    OnStart() {
      $element.off("click");
      $(".progress-button .progress").attr("data-progress", "0");
      $(".progress-button .value, .progress-button .content").removeClass("move-up");
      $(".progress-button .value, .progress-button .content").addClass("move-down");
      $(".progress-button .content").html("Convert to text");

      $self.Update(0);
    }

    Update(progress) {
      if (progress >= 100) {
        $(".progress-button .progress").attr("data-progress", 100);
        return $self.OnFinish();
      } else {
        $(".progress-button .value, .progress-button .content").addClass("move-down");
        $(".progress-button .progress").attr("data-progress", progress);
        $(".progress-button .value").text(progress + "%");

        var rand = Math.round(Math.random() * 50);
        progress += Math.floor(Math.random() * 4) + 1;
        return window.setTimeout(() => {
          $self.Update(progress);
        }, rand);
      }
    }

    OnFinish() {
      $(".progress-button .value, .progress-button .content").removeClass("move-down").addClass("move-up");
      $(".progress-button .content").html('<i class="material-icons">check</i>');
  
      $element.on("click", $self.OnStart);
    }
  }
  var btn = new Button($(".progress-button"), "");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.2.0/dropzone.js"></script>

style.scss

*,
*:before,
*:after {
  box-sizing: border-box;
}



body {
  margin: 0;
  font-family: Graphik, Roboto, Arial, sans-serif;
  background-color: #15363f;
  font-size: 16px;
  overflow: hidden;
}

::selection {
  background: rgba(17, 209, 198, 0.5); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(17, 209, 198, 0.5); /* Gecko Browsers */
}
/*color*/
$black: #222222;
$grey-60: rgba($black, 0.6);
$grey-40: rgba($black, 0.4);
$grey-20: rgba($black, 0.2);
$grey-10: rgba($black, 0.1);
$white: #ffffff;
$cold-breeze: #11d1c6;
$cold-aloe: #39dd91;
$dark-fog: #f0eded;
$warm-beetroot: AE1F4C;
$warm-cloudberry: #ff7900;
$warm-raspberry: #ed145b;
$primary-text-color: $black;
$light-text-color: $white;
$primary-button-convert-color: $grey-60;
$secondary-button-convert-color: $black;
$button-hover-color: darken($black, 10%);

/*fonts*/
h1,
h2,
h3,
h4,
h5,
body {
  font-family: Graphik, Roboto, Arial, sans-serif;
  color: $black;
  line-height: 1.1;
  letter-spacing: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
}

h3 {
  font-weight: 700;
}

h5,
h6,
body {
  font-weight: 400;
}
h1 {
  font-size: 120px;
}

h2 {
  font-size: 72px;
}

h3 {
  font-size: 48px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 24px;
}

h6 {
  font-size: 16px;
}

.label {
  font-size: 12px;
}


a.description, p.description{
  color: $cold-breeze;
}
//Landing Page Layout
/*frame border*/
#top,
#bottom,
#left,
#right {
  background: $white;
  position: fixed;
  pointer-events: none;
  z-index:20;
}

#left,
#right {
  top: 0;
  bottom: 0;
  width: 16px;
}

#left {
  left: 0;
}

#right {
  right: 0;
}

#top,
#bottom {
  left: 0;
  right: 0;
  height: 16px;
}

#top {
  top: 0;
}
#bottom {
  bottom: 0;
}

/*layout*/
.wrapper {
  margin: 0 auto;
  display: grid;
  grid-gap: 24px;
  padding: 40px;
  grid-template-columns: 3fr 1fr;
  width: 100%;
  max-width: 1440px;
  height: 100vh;
  z-index: 3;
}

.content {
  grid-column-start: 1;
  -webkit-align-self: center;
  align-self: center;
  padding-left: 24px;
}

.content h1 {
  color: $white;
}

.sidebar {
  grid-column-start: 2;
  -webkit-align-self: center;
  align-self: center;
  justify-self: center;
  text-align: center;
  width: 288px;
  height: 336px;
  padding: 48px;
  margin-right: 24px;
  color: $black;
  background-color: $white;
  cursor: pointer;
}

div#zdrop {
    height: 199px;
}
div#previews {
    display:none;
    height: 199px;
}

/*upload-module*/
.upload-module h5 {
  margin: 0 0 16px 0;
}

.upload-module .label {
  margin-bottom: 32px;  
}

.upload-module svg {
  margin: 0 0 16px 0;
}

#previews .data, #previews .label {
  text-align:left;
}
#previews .zdrop-info{
  opacity:0;
}
.appear-down{
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
    -webkit-transform: translateY(24px);
    -moz-transform: translateY(24px);
    -ms-transform: translateY(24px);
   -o-transform: translateY(24px);
    opacity: 1 !important;
    transform: translateY(24px);
}

#previews .data{
  margin: 16px 0 8px 0;
  width: 162px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#previews .label {
  text-align:left;
  margin: 8px 0 0 0;
}

#previews .action{
    text-align: right;
    float: right;
    position: relative;
    top: -38px;
}

#previews .icon{
    color:lightsteelblue;
    font-size: 20;
}

strong{
  font-weight:normal;
}

/*queries*/
@media screen and (max-width: 1330px) {
  h1 {
    font-size: 100px;
  }
}

@media screen and (max-width: 1190px) {
  h1 {
    font-size: 80px;
  }
}

@media screen and (max-width: 1040px) {
  h1 {
    font-size: 72px;
  }
}

@media screen and (max-width: 970px) {
  h1 {
    font-size: 64px;
  }
}

.dropzone {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color:transparent;
  border-style:none;
}

.stripes {
  background-size: 272px 272px;
  background-image: linear-gradient(
    45deg, 
    rgba(black, 0.1)      25%, 
    rgba($cold-aloe, 0.8) 25%, 
    rgba($cold-aloe, 0.8) 50%, 
    rgba(black, 0.1)      50%, 
    rgba(black, 0.1)      75%, 
    rgba($cold-aloe, 0.8) 75%, 
    rgba($cold-aloe, 0.8)
  );
  transition: opacity 0.3s ease;
  animation: barberpole 0.75s linear infinite;
}

@keyframes barberpole {
  from { background-position: 0 0; }
  to   { background-position: 272px 544px;}
}

.sidebar button.convert {
  position: relative;
  display: block;
  width: 100%;
  height: 48px;
  border: none;
  background: $cold-aloe;
  font-size: 18px;
  color: $white;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

button.convert:hover,
button.convert:focus {
  outline: none;
  cursor: pointer;
}

button.convert:hover {
  background: lighten($cold-aloe, 10%);
}

button .content {
  position: relative;
  display: block;
  top: 0;
  padding-left:0;
  line-height: 1;
  z-index: 199;
}

button .value {
  position: relative;
  display: block;
  z-index: 99;
  top: -84px;
}

button .progress {
  position: relative;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  background: darken($cold-breeze, 10%);
  width: 0%;
  z-index: 0;
}
button.disable{
  background: #d0d4d1 !important;
  pointer-events: none;
  cursor:not-allowed !important;
}
@for $i from 1 through 100 {
  .progress[data-progress="#{$i}"] {
    content: "";
    background: darken($cold-breeze, 10%);
    width: percentage($i/100);
  }
}
//Animation
.move-down {
  -webkit-transition: all 0.55s ease;
  -moz-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
  -webkit-transform: translateY(300%);
  -moz-transform: translateY(354%);
  -ms-transform: translateY(354%);
  transform: translateY(354%);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.move-up {
  -webkit-transition: all 0.55s ease;
  -moz-transition: all 0.55s ease;
  -o-transition: all 0.55s ease;
  transition: all 0.55s ease;
  -webkit-transform: translateY(30%);
  -moz-transform: translateY(30%);
  -ms-transform: translateY(30%);
  transform: translateY(30%);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.2.0/dropzone.css" rel="stylesheet" />