/quickload/index.html/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> |