Skip to content

Commit 3c0ab94

Browse files
tresftresf
authored
Add file drag-and-drop support (#1219)
Add file drag-and-drop support Closes #990
1 parent bfdf3d9 commit 3c0ab94

File tree

2 files changed

+165
-1
lines changed

2 files changed

+165
-1
lines changed

‎css/style.css

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,21 @@ footer {
330330
border-radius: 0 6px 6px 6px;
331331
}
332332

333+
.drag-target {
334+
/* color: white; */
335+
background: repeating-linear-gradient(
336+
45deg,
337+
#dbf0de,
338+
#dbf0de 10px,
339+
#a5d9ad 10px,
340+
#a5d9ad 20px
341+
);
342+
}
343+
344+
input[type="file"] {
345+
display: none;
346+
}
347+
333348
button > .fa-caret-down {
334349
height: 100%;
335350
display: inline;

‎sample.html

Lines changed: 150 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
<link rel="stylesheet" href="css/style.css" />
2323
<link rel="stylesheet" href="css/gh-fork-ribbon.min.css" />
2424

25-
<body id="qz-page" role="document">
25+
<body id="qz-page" role="document" ondrop="handleFileDrop(event);" ondragover="drag(event, true);" ondragleave="drag(event, false);">
26+
<input id="fileUpload" type="file"/>
2627
<a class="github-fork-ribbon" href="https://github.com/qzind/tray" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
2728

2829
<nav class="navbar navbar-default navbar-static-top" role="navigation">
@@ -221,7 +222,9 @@ <h3>Raw Printing</h3>
221222
<div id="rawCommandsGroup" class="btn-group">
222223
<button type="button" class="btn btn-default" onclick="printCommand();">Commands</button>
223224
<button type="button" class="btn btn-default" onclick="printHex();">Hex</button>
225+
<button id="rawDropBtn" type="button" class="btn btn-primary" onclick="printFileDrop(event);" data-type="raw">Hidden</button>
224226
</div>
227+
<label for="fileUpload" type="button" class="btn btn-default"><i class="fa fa-folder-open-o"></i> Upload a file...</label>
225228
</div>
226229
<div class="form-group">
227230
<div>
@@ -366,6 +369,8 @@ <h3>Pixel Printing</h3>
366369
<button type="button" class="btn btn-default" onclick="printHTML();">Print HTML</button>
367370
<button type="button" class="btn btn-default" onclick="printPDF();">Print PDF</button>
368371
<button type="button" class="btn btn-default" onclick="printImage();">Print Image</button>
372+
<button id="pxlDropBtn" type="button" class="btn btn-primary" onclick="printFileDrop(event);" data-type="pixel"></button>
373+
<label for="fileUpload" type="button" class="btn btn-default upload-button"><i class="fa fa-folder-open-o"></i> Upload a file...</label>
369374
</div>
370375
</div>
371376
</div>
@@ -2144,6 +2149,24 @@ <h4 class="panel-title">Options</h4>
21442149
qz.print(config, printData).catch(displayError);
21452150
}
21462151

2152+
function printFileDrop(evt) {
2153+
var button = evt.target || evt.srcElement;
2154+
2155+
var config = getUpdatedConfig();
2156+
2157+
var type = $(button).attr('data-type');
2158+
var format = $(button).attr('data-format');
2159+
var flavor = $(button).attr('data-flavor');
2160+
var base64 = $(button).attr('data-base64').split('base64,')[1];
2161+
var opts = getUpdatedOptions(type === 'pixel');
2162+
2163+
var printData = [
2164+
{ type: type, format: format, flavor: flavor, data: base64, options: opts }
2165+
];
2166+
2167+
qz.print(config, printData).catch(displayError);
2168+
}
2169+
21472170

21482171
/// Serial ///
21492172
function listSerialPorts() {
@@ -2618,6 +2641,9 @@ <h4 class="panel-title">Options</h4>
26182641
$("#rawForceRaw").prop('checked', false);
26192642
$("#rawCopies").val(1);
26202643

2644+
//file upload
2645+
$("#rawDropBtn").hide();
2646+
26212647
//printer
26222648
$("#pLangEPL").prop('checked', true);
26232649
$("#pX").val('0');
@@ -2671,6 +2697,9 @@ <h4 class="panel-title">Options</h4>
26712697
$("#pxlBoundsActive").prop('checked', false);
26722698
$("#pxlBoundsGroup").css('display', 'none');
26732699

2700+
//file upload
2701+
$("#pxlDropBtn").hide();
2702+
26742703
//printer
26752704
$("#pPxlWidth").val('');
26762705
$("#pPxlHeight").val('');
@@ -2730,6 +2759,10 @@ <h4 class="panel-title">Options</h4>
27302759
var lang = $("input[name='pLanguage']:checked").parent('label').text().trim();
27312760

27322761
var appendLang = function(element, lang) {
2762+
// Skip formatting of file drop button if format = "command"
2763+
if($(element).attr("data-format") === "command") {
2764+
return;
2765+
}
27332766
var text = $(element).html();
27342767
var label = text.split("(")[0];
27352768
$(element).html(label + " (<strong>" + lang + "</strong>)");
@@ -2814,6 +2847,12 @@ <h4 class="panel-title">Options</h4>
28142847
}
28152848
});
28162849

2850+
$("#fileUpload").on('change', function(e) {
2851+
if (this.files && this.files[0]) {
2852+
handleFileDrop(this.files);
2853+
}
2854+
});
2855+
28172856
$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
28182857
if (window.readingWeight) {
28192858
$("#usbWeightRadio").click();
@@ -3371,6 +3410,116 @@ <h4 class="panel-title">Options</h4>
33713410
$("#configPrinter").html(printer);
33723411
}
33733412
}
3413+
3414+
function getBase64(file) {
3415+
return new Promise((resolve, reject) => {
3416+
const reader = new FileReader();
3417+
reader.readAsDataURL(file);
3418+
reader.onload = () => resolve(reader.result);
3419+
reader.onerror = error => reject(error);
3420+
});
3421+
}
3422+
3423+
function handleFileDrop(evt) {
3424+
var file;
3425+
var stayOnTab = false;
3426+
3427+
if(evt.dataTransfer && evt.dataTransfer.items) {
3428+
// Event from button
3429+
evt.preventDefault();
3430+
3431+
var item = evt.dataTransfer.items[0];
3432+
if(item.kind === "file") {
3433+
file = item.getAsFile();
3434+
} else {
3435+
displayError("Please drag a valid file");
3436+
return;
3437+
}
3438+
} else {
3439+
var files = evt;
3440+
// Event from file upload
3441+
file = files[0];
3442+
// Ensure we're on the right tab
3443+
stayOnTab = true;
3444+
}
3445+
3446+
var setupDropButton = function(format, name, data, stayOnTab) {
3447+
var tabHref;
3448+
var buttonId;
3449+
switch(format) {
3450+
case "pdf":
3451+
case "html":
3452+
case "image":
3453+
buttonId = "#pxlDropBtn"
3454+
tabHref = "#pxlContent";
3455+
break;
3456+
default:
3457+
buttonId = "#rawDropBtn"
3458+
tabHref = "#rawContent";
3459+
}
3460+
3461+
var button = $(buttonId);
3462+
if(stayOnTab) {
3463+
// File upload button can't change tabs
3464+
if($("#pxlContent").is(":visible") && format === "command") {
3465+
displayError('File format "' + format + '" is not supported on this tab.');
3466+
return;
3467+
}
3468+
if($("#rawContent").is(":visible") && format !== "command") {
3469+
button = $("#rawDropBtn");
3470+
}
3471+
} else {
3472+
// Select the appropriate tab
3473+
$(".nav-tabs a[href='" + tabHref + "']").tab('show');
3474+
}
3475+
3476+
// Show the appropriate button
3477+
button.attr("data-format", format);
3478+
button.attr("data-flavor", "base64");
3479+
button.attr("data-base64", data);
3480+
button.html('Print dropped "' + name + '"');
3481+
button.show();
3482+
updateRawButtons();
3483+
button.fadeOut(300).fadeIn(500);
3484+
}
3485+
3486+
if (file) {
3487+
console.log("Dropped file:", file);
3488+
getBase64(file).then(function(base64) {
3489+
var name = file.name;
3490+
var extension = name.substring(name.lastIndexOf('.') + 1, name.length) || '';
3491+
switch(extension.toLowerCase()) {
3492+
case 'pdf':
3493+
setupDropButton("pdf", name, base64, stayOnTab);
3494+
break;
3495+
case 'htm':
3496+
case 'html':
3497+
setupDropButton("html", name, base64, stayOnTab);
3498+
break;
3499+
case 'png':
3500+
case 'jpg':
3501+
case 'jpeg':
3502+
case 'gif':
3503+
case 'bmp':
3504+
setupDropButton("image", name, base64, stayOnTab);
3505+
break;
3506+
// assume all others are "raw"
3507+
default:
3508+
setupDropButton("command", name, base64, stayOnTab);
3509+
}
3510+
}).catch(displayError);
3511+
}
3512+
$("#qz-page").removeClass("drag-target");
3513+
}
3514+
3515+
function drag(evt, entering) {
3516+
evt.preventDefault();
3517+
if(entering) {
3518+
$("#qz-page").addClass("drag-target");
3519+
} else {
3520+
$("#qz-page").removeClass("drag-target");
3521+
}
3522+
}
33743523
</script>
33753524

33763525
</html>

0 commit comments

Comments
 (0)