Skip to content

Commit

Permalink
Add file drag-and-drop support (#1219)
Browse files Browse the repository at this point in the history 
Add file drag-and-drop support
Closes #990
  • Loading branch information
@tresf
tresf committed Nov 16, 2023
1 parent bfdf3d9 commit 3c0ab94
Show file tree
Hide file tree
Showing 2 changed files with 165 additions and 1 deletion.
15 changes: 15 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,21 @@ footer {
border-radius: 0 6px 6px 6px;
}

.drag-target {
/* color: white; */
background: repeating-linear-gradient(
45deg,
#dbf0de,
#dbf0de 10px,
#a5d9ad 10px,
#a5d9ad 20px
);
}

input[type="file"] {
display: none;
}

button > .fa-caret-down {
height: 100%;
display: inline;
Expand Down
151 changes: 150 additions & 1 deletion sample.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,8 @@
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/gh-fork-ribbon.min.css" />

<body id="qz-page" role="document">
<body id="qz-page" role="document" ondrop="handleFileDrop(event);" ondragover="drag(event, true);" ondragleave="drag(event, false);">
<input id="fileUpload" type="file"/>
<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>

<nav class="navbar navbar-default navbar-static-top" role="navigation">
Expand Down Expand Up @@ -221,7 +222,9 @@ <h3>Raw Printing</h3>
<div id="rawCommandsGroup" class="btn-group">
<button type="button" class="btn btn-default" onclick="printCommand();">Commands</button>
<button type="button" class="btn btn-default" onclick="printHex();">Hex</button>
<button id="rawDropBtn" type="button" class="btn btn-primary" onclick="printFileDrop(event);" data-type="raw">Hidden</button>
</div>
<label for="fileUpload" type="button" class="btn btn-default"><i class="fa fa-folder-open-o"></i> Upload a file...</label>
</div>
<div class="form-group">
<div>
Expand Down Expand Up @@ -366,6 +369,8 @@ <h3>Pixel Printing</h3>
<button type="button" class="btn btn-default" onclick="printHTML();">Print HTML</button>
<button type="button" class="btn btn-default" onclick="printPDF();">Print PDF</button>
<button type="button" class="btn btn-default" onclick="printImage();">Print Image</button>
<button id="pxlDropBtn" type="button" class="btn btn-primary" onclick="printFileDrop(event);" data-type="pixel"></button>
<label for="fileUpload" type="button" class="btn btn-default upload-button"><i class="fa fa-folder-open-o"></i> Upload a file...</label>
</div>
</div>
</div>
Expand Down Expand Up @@ -2144,6 +2149,24 @@ <h4 class="panel-title">Options</h4>
qz.print(config, printData).catch(displayError);
}

function printFileDrop(evt) {
var button = evt.target || evt.srcElement;

var config = getUpdatedConfig();

var type = $(button).attr('data-type');
var format = $(button).attr('data-format');
var flavor = $(button).attr('data-flavor');
var base64 = $(button).attr('data-base64').split('base64,')[1];
var opts = getUpdatedOptions(type === 'pixel');

var printData = [
{ type: type, format: format, flavor: flavor, data: base64, options: opts }
];

qz.print(config, printData).catch(displayError);
}


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

//file upload
$("#rawDropBtn").hide();

//printer
$("#pLangEPL").prop('checked', true);
$("#pX").val('0');
Expand Down Expand Up @@ -2671,6 +2697,9 @@ <h4 class="panel-title">Options</h4>
$("#pxlBoundsActive").prop('checked', false);
$("#pxlBoundsGroup").css('display', 'none');

//file upload
$("#pxlDropBtn").hide();

//printer
$("#pPxlWidth").val('');
$("#pPxlHeight").val('');
Expand Down Expand Up @@ -2730,6 +2759,10 @@ <h4 class="panel-title">Options</h4>
var lang = $("input[name='pLanguage']:checked").parent('label').text().trim();

var appendLang = function(element, lang) {
// Skip formatting of file drop button if format = "command"
if($(element).attr("data-format") === "command") {
return;
}
var text = $(element).html();
var label = text.split("(")[0];
$(element).html(label + " (<strong>" + lang + "</strong>)");
Expand Down Expand Up @@ -2814,6 +2847,12 @@ <h4 class="panel-title">Options</h4>
}
});

$("#fileUpload").on('change', function(e) {
if (this.files && this.files[0]) {
handleFileDrop(this.files);
}
});

$('a[data-toggle="tab"]').on('shown.bs.tab', function() {
if (window.readingWeight) {
$("#usbWeightRadio").click();
Expand Down Expand Up @@ -3371,6 +3410,116 @@ <h4 class="panel-title">Options</h4>
$("#configPrinter").html(printer);
}
}

function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}

function handleFileDrop(evt) {
var file;
var stayOnTab = false;

if(evt.dataTransfer && evt.dataTransfer.items) {
// Event from button
evt.preventDefault();

var item = evt.dataTransfer.items[0];
if(item.kind === "file") {
file = item.getAsFile();
} else {
displayError("Please drag a valid file");
return;
}
} else {
var files = evt;
// Event from file upload
file = files[0];
// Ensure we're on the right tab
stayOnTab = true;
}

var setupDropButton = function(format, name, data, stayOnTab) {
var tabHref;
var buttonId;
switch(format) {
case "pdf":
case "html":
case "image":
buttonId = "#pxlDropBtn"
tabHref = "#pxlContent";
break;
default:
buttonId = "#rawDropBtn"
tabHref = "#rawContent";
}

var button = $(buttonId);
if(stayOnTab) {
// File upload button can't change tabs
if($("#pxlContent").is(":visible") && format === "command") {
displayError('File format "' + format + '" is not supported on this tab.');
return;
}
if($("#rawContent").is(":visible") && format !== "command") {
button = $("#rawDropBtn");
}
} else {
// Select the appropriate tab
$(".nav-tabs a[href='" + tabHref + "']").tab('show');
}

// Show the appropriate button
button.attr("data-format", format);
button.attr("data-flavor", "base64");
button.attr("data-base64", data);
button.html('Print dropped "' + name + '"');
button.show();
updateRawButtons();
button.fadeOut(300).fadeIn(500);
}

if (file) {
console.log("Dropped file:", file);
getBase64(file).then(function(base64) {
var name = file.name;
var extension = name.substring(name.lastIndexOf('.') + 1, name.length) || '';
switch(extension.toLowerCase()) {
case 'pdf':
setupDropButton("pdf", name, base64, stayOnTab);
break;
case 'htm':
case 'html':
setupDropButton("html", name, base64, stayOnTab);
break;
case 'png':
case 'jpg':
case 'jpeg':
case 'gif':
case 'bmp':
setupDropButton("image", name, base64, stayOnTab);
break;
// assume all others are "raw"
default:
setupDropButton("command", name, base64, stayOnTab);
}
}).catch(displayError);
}
$("#qz-page").removeClass("drag-target");
}

function drag(evt, entering) {
evt.preventDefault();
if(entering) {
$("#qz-page").addClass("drag-target");
} else {
$("#qz-page").removeClass("drag-target");
}
}
</script>

</html>

0 comments on commit 3c0ab94

Please sign in to comment.