/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> |