files tree made better.

src/Yavsc/Views/Shared/_DropFiles.cshtml

@@ -0,0 +1,85 @@
+@section header{
+<style>
+ .box__dragndrop,
+.box__uploading,
+.box__success,
+.box__error {
+  display: none;
+}
+.box.has-advanced-upload {
+  background-color: white;
+  outline: 2px dashed black;
+  outline-offset: -10px;
+}
+.box.has-advanced-upload .box__dragndrop {
+  display: inline;
+}
+.box.is-dragover {
+  background-color: grey;
+}
+</style>
+  <link rel="stylesheet" href="~/lib/dropzone/basic.min.css" />
+  <link rel="stylesheet" href="~/lib/dropzone/dropzone.min.css" />
+  <script src="~/lib/dropzone/dropzone.min.js"> </script>
+  <script src="~/lib/dropzone/dropzone-amd-module.min.js"> </script>
+}
+
+@section scripts{
+<script>
+$(document).ready(function(){
+
+  var isAdvancedUpload = function() {
+  var div = document.createElement('div');
+  return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div)) && 'FormData' in window && 'FileReader' in window;
+}();
+
+  var $form = $('.box');
+
+if (isAdvancedUpload) {
+  $form.addClass('has-advanced-upload');
+}
+if (isAdvancedUpload) {
+
+  var droppedFiles = false;
+
+  $form.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  })
+  .on('dragover dragenter', function() {
+    $form.addClass('is-dragover');
+  })
+  .on('dragleave dragend drop', function() {
+    $form.removeClass('is-dragover');
+  })
+  .on('drop', function(e) {
+    droppedFiles = e.originalEvent.dataTransfer.files;
+  });
+
+}
+$form.on('submit', function(e) {
+  if ($form.hasClass('is-uploading')) return false;
+
+  $form.addClass('is-uploading').removeClass('is-error');
+
+  if (isAdvancedUpload) {
+    // ajax for modern browsers
+  } else {
+    // ajax for legacy browsers
+  }
+});
+});
+
+</script>
+}
+
+<form class="box" method="post" action="~/UserFiles/Create" enctype="multipart/form-data">
+  <div class="box__input">
+    <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
+    <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
+    <button class="box__button" type="submit">Upload</button>
+  </div>
+  <div class="box__uploading">Uploading&hellip;</div>
+  <div class="box__success">Done!</div>
+  <div class="box__error">Error! <span></span>.</div>
+</form>