85 lines
2.2 KiB
Plaintext
85 lines
2.2 KiB
Plaintext
@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…</div>
|
|
<div class="box__success">Done!</div>
|
|
<div class="box__error">Error! <span></span>.</div>
|
|
</form> |