/quickload/files.html |
@@ -0,0 +1,254 @@ |
<!DOCTYPE html> |
<html lang="en"> |
<head> |
<meta charset="utf-8"> |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> |
<meta name="description" content="quick asset upload"> |
<meta name="author" content="Wizardry and Steamworks"> |
<link rel="icon" href="favicon.ico"> |
|
<title>Quickload</title> |
|
<!-- Bootstrap core CSS --> |
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet"> |
|
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> |
<link href="css/bootstrap/ie10-viewport-bug-workaround.css" rel="stylesheet"> |
|
<!-- Just for debugging purposes. Don't actually copy these 2 lines! --> |
<!--[if lt IE 9]><script src="js/bootstrap/ie8-responsive-file-warning.js"></script><![endif]--> |
<script src="js/bootstrap/ie-emulation-modes-warning.js"></script> |
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
<!--[if lt IE 9]> |
<script src="js/bootstrap/html5shiv.min.js"></script> |
<script src="js/bootstrap/respond.min.js"></script> |
<![endif]--> |
|
<!-- DropZone --> |
<link href="css/dropzone/dropzone.min.css" rel="stylesheet"> |
<!-- Local style --> |
<link href="css/files/style.css" rel="stylesheet"> |
</head> |
|
<body> |
|
<div class="container"> |
|
<!-- Main component for a primary marketing message or call to action --> |
<div class="jumbotron"> |
<h1>Quickload</h1> |
<p>Asset sharing platform.</p> |
</div> |
|
<ul class="nav nav-tabs"> |
<li><a href="index.html">Home</a></li> |
<li class="active"><a href="#">Files</a></li> |
<li><a href="text.html">Text</a></li> |
</ul> |
|
<div class="panel panel-default"> |
<div class="panel-heading"> |
<div id="actions" class="row"> |
<div class="col-lg-5"> |
<div class="btn-group btn-group-justified" role="group"> |
<!-- The fileinput-button span is used to style the file input field as button --> |
<div class="btn-group" role="group"> |
<button id="uploadbutton" type="button" class="btn btn-default"> |
<i class="glyphicon glyphicon-plus"></i> |
<span>Add...</span> |
</button> |
</div> |
<div class="btn-group" role="group"> |
<button type="submit" class="btn btn-default start"> |
<i class="glyphicon glyphicon-upload"></i> |
<span>Upload</span> |
</button> |
</div> |
<div class="btn-group" role="group"> |
<button type="reset" class="btn btn-default cancel"> |
<i class="glyphicon glyphicon-ban-circle"></i> |
<span>Cancel</span> |
</button> |
</div> |
</div> |
</div> |
</div> |
</div> |
<div class="panel-body" id="uploadpanel"> |
<div class="table table-striped files" id="previews"> |
<div id="template" class="file-row"> |
<!-- This is used as the file preview template --> |
<div> |
<span class="preview"><img src="img/fileholder.svg" width="58" alt="Upload file thumbnail" data-dz-thumbnail></span> |
</div> |
<div> |
<p id="name" class="name" data-dz-name></p> |
<div class="input-group"> |
<input id="URL" type="text" class="form-control" readonly> |
<span class="input-group-btn"> |
<button id="btn-clipboard" class="btn btn-default" type="button"><img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard"></button> |
</span> |
</div> |
<strong class="error text-danger" data-dz-errormessage></strong> |
</div> |
<div> |
<p class="size" data-dz-size></p> |
<div id="progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> |
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> |
</div> |
</div> |
<div> |
<button id="start" class="btn btn-default start"> |
<i class="glyphicon glyphicon-upload"></i> |
<span>Upload</span> |
</button> |
<button id="cancel" data-dz-remove class="btn btn-default cancel"> |
<i class="glyphicon glyphicon-ban-circle"></i> |
<span>Cancel</span> |
</button> |
<button id="remove" data-dz-remove class="btn btn-danger remove"> |
<i class="glyphicon glyphicon-remove"></i> |
<span>Remove</span> |
</button> |
</div> |
</div> |
|
</div> |
</div> |
<!-- The global file processing state --> |
<div class="fileupload-process"> |
<div id="total-progress" class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"> |
<div class="progress-bar progress-bar-success" style="width:0%;" data-dz-uploadprogress></div> |
</div> |
</div> |
</div> |
|
</div> <!-- /container --> |
|
<div id="footer"> |
<div class="container"> |
<p class="text-muted credit">Copyright <i class="glyphicon glyphicon-copyright-mark"></i> 2017 <a href="http://grimore.org">Wizardry and Steamworks</a>.</p> |
</div> |
</div> |
|
<script src="js/jquery/jquery.min.js"></script> |
<script src="js/bootstrap/bootstrap.min.js"></script> |
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> |
<script src="js/bootstrap/ie10-viewport-bug-workaround.js"></script> |
|
<!-- DropZone --> |
<script src="js/dropzone/dropzone.min.js"></script> |
<!-- <script src="js/dropzone/dropzone-amd-module.min.js"></script> --> |
<!-- Clipboard --> |
<script src="js/clipboard/clipboard.min.js"></script> |
<script> |
$(document).ready(function(){ |
// Get the template HTML and remove it from the doument |
var previewNode = document |
.querySelector("#template"); |
previewNode.id = ""; |
var previewTemplate = previewNode |
.parentNode |
.innerHTML; |
previewNode |
.parentNode |
.removeChild(previewNode); |
|
var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone |
url: "upload-files.php", // Set the url |
paramName: "file", |
thumbnailWidth: 80, |
thumbnailHeight: 80, |
//parallelUploads: 20, |
previewTemplate: previewTemplate, |
autoQueue: false, // Make sure the files aren't queued until manually added |
previewsContainer: "#previews", // Container to display the previews |
clickable: [ |
"#uploadbutton", |
"#uploadpanel" |
], |
//clickable: "#uploadbutton" // Element that should be used as click trigger to select files. |
}).on("addedfile", (file) => { |
// Hookup the start button |
file.previewElement.querySelector(".start").onclick = () => { |
myDropzone.enqueueFile(file); |
}; |
}).on("totaluploadprogress", (progress) => { |
document |
.querySelector("#total-progress .progress-bar") |
.style |
.width = progress + "%"; |
}).on("sending", (file) => { |
// Show the total progress bar when upload starts |
document.querySelector("#total-progress") |
.style |
.opacity = 1; |
|
// And disable the start button. |
file |
.previewElement |
.querySelector(".start") |
.setAttribute("disabled", "disabled"); |
}).on("queuecomplete", (progress) => { |
document.querySelector("#total-progress") |
.style |
.opacity = "0"; |
}).on("success", (file, data) => { |
|
var boxURLID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#URL") |
.value = data; |
|
file |
.previewElement |
.querySelector("#URL") |
.setAttribute('id', boxURLID) |
|
// Clipboard button. |
clipButtonID = '_' + Math |
.random() |
.toString(36) |
.substr(2, 9); |
file |
.previewElement |
.querySelector("#btn-clipboard") |
.setAttribute('data-clipboard-target', '#' + boxURLID) |
|
file |
.previewElement |
.querySelector("#btn-clipboard") |
.setAttribute('id', clipButtonID); |
|
file |
.previewElement |
.querySelector(".start") |
.setAttribute("disabled", "disabled"); |
file |
.previewElement |
.querySelector(".cancel") |
.setAttribute("disabled", "disabled"); |
|
new Clipboard('#' + clipButtonID); |
}); |
|
document.querySelector("#actions .start").onclick = () => { |
myDropzone.enqueueFiles( |
myDropzone |
.getFilesWithStatus(Dropzone.ADDED)); |
}; |
|
document.querySelector("#actions .cancel").onclick = () => { |
myDropzone.removeAllFiles(true); |
}; |
}); |
</script> |
</body> |
</html> |