scratch – Rev 10
?pathlinks?
<!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 file 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/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>HTTP template for sharing assets.</p>
</div>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Files</a></li>
</ul>
<div id="actions" class="row">
<div class="col-lg-7">
<!-- The fileinput-button span is used to style the file input field as button -->
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
</div>
<div class="col-lg-5">
<!-- The global file processing state -->
<span 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>
</span>
</div>
</div>
<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 data-dz-thumbnail /></span>
</div>
<div>
<p id="name" class="name" data-dz-name></p>
<input id="URL" type="text" class='form-control' readonly>
<span class="input-group-button">
<button id="clippy" class="btn clipBtn" type="button">
<img class="clippy" src="img/clipboard/clippy.svg" width="13" alt="Copy to clipboard">
</button>
</span>
<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 class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start</span>
</button>
<button data-dz-remove class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel</span>
</button>
<button data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</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(document.body, { // Make the whole body a dropzone
url: "upload.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: ".fileinput-button" // Element that should be used as click trigger to select files.
});
myDropzone.on("addedfile", (file) => {
// Hookup the start button
file.previewElement.querySelector(".start").onclick = () => {
myDropzone.enqueueFile(file);
};
});
// Update the total progress bar
myDropzone.on("totaluploadprogress", (progress) => {
document
.querySelector("#total-progress .progress-bar")
.style
.width = progress + "%";
});
myDropzone.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");
});
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", (progress) => {
document.querySelector("#total-progress")
.style
.opacity = "0";
});
// Display the URL of the file.
myDropzone.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("#clippy")
.setAttribute('data-clipboard-target', '#' + boxURLID)
file
.previewElement
.querySelector("#clippy")
.setAttribute('id', clipButtonID);
new Clipboard('#' + clipButtonID);
});
// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
});
</script>
</body>
</html>