scratch

Subversion Repositories:
Compare Path: Rev
With Path: Rev
?path1? @ 19  →  ?path2? @ 20
/quickload/css/style.css
@@ -7,14 +7,13 @@
#previews .file-row > div {
display: table-cell;
vertical-align: top;
border-top: 1px solid #ddd;
padding: 8px;
border-top: 1em solid #ddd;
padding: 1em;
}
#previews .file-row:nth-child(odd) {
background: #f9f9f9;
}
 
 
#total-progress {
opacity: 0;
transition: opacity 0.3s linear;
@@ -34,7 +33,7 @@
/* Hide the start and cancel buttons and show the delete button */
#previews .file-row.dz-success .start,
#previews .file-row.dz-success .cancel {
display: none;
opacity: 0.3;
}
#previews .file-row.dz-success .delete {
display: block;
/quickload/img/fileholder.svg
@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="610.633px" height="610.633px" viewBox="0 0 610.633 610.633" style="enable-background:new 0 0 610.633 610.633;"
xml:space="preserve">
<g>
<g>
<path d="M534.305,0H76.328C55.252,0,38.164,17.069,38.164,38.164v534.305c0,21.095,17.088,38.164,38.164,38.164h343.48
l152.66-152.661V38.164C572.469,17.069,555.399,0,534.305,0z M414.291,556.667V452.454h104.212L414.291,556.667z M529.452,412.603
h-116.85c-20.649,0-37.355,16.711-37.355,37.356v116.849H81.181V43.83h448.266v368.773H529.452z"/>
<path d="M133.574,147.693h343.485c10.548,0,19.082-10.571,19.082-23.634s-8.534-23.634-19.082-23.634H133.574
c-10.547,0-19.082,10.571-19.082,23.634S123.026,147.693,133.574,147.693z"/>
<path d="M133.574,248.496h343.485c10.548,0,19.082-10.571,19.082-23.634s-8.534-23.634-19.082-23.634H133.574
c-10.547,0-19.082,10.571-19.082,23.634S123.026,248.496,133.574,248.496z"/>
<path d="M133.574,349.304h343.485c10.548,0,19.082-10.571,19.082-23.634s-8.534-23.634-19.082-23.634H133.574
c-10.547,0-19.082,10.571-19.082,23.634S123.026,349.304,133.574,349.304z"/>
<path d="M133.574,451.402h171.743c10.548,0,19.082-10.571,19.082-23.634s-8.534-23.638-19.082-23.638H133.574
c-10.547,0-19.082,10.571-19.082,23.633C114.492,440.826,123.026,451.402,133.574,451.402z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
/quickload/index.html
@@ -47,75 +47,84 @@
<li class="active"><a href="#">Files</a></li>
</ul>
<div id="actions" class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">File Upload</h3>
</div>
<div class="panel-body" style="min-height: 480px; border: 2px dashed #0087F7; border-radius: 5px; background: white; box-sizing: border-box; padding: 54px 54px; outline-offset: -24px;">
<div id="actions" class="row fallback">
<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 type="button" class="btn btn-default fileinput-button">
<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 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" 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="delete" data-dz-remove class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete</span>
</button>
</div>
</div>
 
<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>
</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>
</span>
</div>
 
</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>
<span class="input-group-button">
<input id="URL" type="text" class='form-control' readonly>
<button id="clippy" class="btn clipBtn" class='form-control' 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">
@@ -147,34 +156,28 @@
.parentNode
.removeChild(previewNode);
 
var myDropzone = new Dropzone(document.body, { // Make the whole body a dropzone
var myDropzone = new Dropzone('.panel-body', { // Make the whole body a dropzone
url: "upload.php", // Set the url
paramName: "file",
thumbnailWidth: 80,
thumbnailHeight: 80,
parallelUploads: 20,
//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) => {
clickable: true,
//clickable: ".fileinput-button" // 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);
};
});
 
// Update the total progress bar
myDropzone.on("totaluploadprogress", (progress) => {
}).on("totaluploadprogress", (progress) => {
document
.querySelector("#total-progress .progress-bar")
.style
.width = progress + "%";
});
 
myDropzone.on("sending", (file) => {
}).on("sending", (file) => {
// Show the total progress bar when upload starts
document.querySelector("#total-progress")
.style
@@ -185,19 +188,16 @@
.previewElement
.querySelector(".start")
.setAttribute("disabled", "disabled");
});
 
// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", (progress) => {
}).on("queuecomplete", (progress) => {
document.querySelector("#total-progress")
.style
.opacity = "0";
});
 
// Display the URL of the file.
myDropzone.on("success", (file, data) => {
}).on("success", (file, data) => {
var boxURLID = '_' + Math.random().toString(36).substr(2, 9);
var boxURLID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector("#URL")
@@ -209,29 +209,42 @@
.setAttribute('id', boxURLID)
// Clipboard button.
clipButtonID = '_' + Math.random().toString(36).substr(2, 9);
clipButtonID = '_' + Math
.random()
.toString(36)
.substr(2, 9);
file
.previewElement
.querySelector("#clippy")
.querySelector("#btn-clipboard")
.setAttribute('data-clipboard-target', '#' + boxURLID)
file
.previewElement
.querySelector("#clippy")
.querySelector("#btn-clipboard")
.setAttribute('id', clipButtonID);
 
file
.previewElement
.querySelector(".start")
.setAttribute("disabled", "disabled");
file
.previewElement
.querySelector(".cancel")
.setAttribute("disabled", "disabled");
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);
};
if($('.panel-body').hasClass('fallback')) {
document.querySelector("#actions .start").onclick = function() {
myDropzone.enqueueFiles(
myDropzone
.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector("#actions .cancel").onclick = function() {
myDropzone.removeAllFiles(true);
};
}
});
</script>
</body>
/quickload/upload.php
@@ -37,7 +37,7 @@
'',
hash(
'sha512',
$name
$data
)
)
). '.'.