Fix drag and drop to upload PGP public key not working on Firefox and Chromium (but working on Safari) (#1658)

* Fix pgp file drag and drop only worked on Safari

* Minor UI improvement of pgp public key text area

* add dashed outline only during dragover event
This commit is contained in:
D-Bao 2023-03-27 08:48:27 +00:00 committed by GitHub
parent 2a014f0e4b
commit 1c65094da8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 4 deletions

View File

@ -8,7 +8,8 @@ function enableDragDropForPGPKeys(inputID) {
let files = event.dataTransfer.files;
for (let i = 0; i < files.length; i++) {
let file = files[i];
if(file.type !== 'text/plain'){
const isValidPgpFile = file.type === 'text/plain' || file.name.endsWith('.asc') || file.name.endsWith('.pub') || file.name.endsWith('.pgp') || file.name.endsWith('.key');
if (!isValidPgpFile) {
toastr.warning(`File ${file.name} is not a public key file`);
continue;
}
@ -16,6 +17,7 @@ function enableDragDropForPGPKeys(inputID) {
reader.onloadend = onFileLoaded;
reader.readAsBinaryString(file);
}
dropArea.classList.remove("dashed-outline");
}
function onFileLoaded(event) {
@ -24,5 +26,20 @@ function enableDragDropForPGPKeys(inputID) {
}
const dropArea = $(inputID).get(0);
dropArea.addEventListener("dragenter", (event) => {
event.stopPropagation();
event.preventDefault();
dropArea.classList.add("dashed-outline");
});
dropArea.addEventListener("dragover", (event) => {
event.stopPropagation();
event.preventDefault();
dropArea.classList.add("dashed-outline");
});
dropArea.addEventListener("dragleave", (event) => {
event.stopPropagation();
event.preventDefault();
dropArea.classList.remove("dashed-outline");
});
dropArea.addEventListener("drop", drop, false);
}
}

5
static/style.css vendored
View File

@ -217,4 +217,9 @@ textarea.parsley-error {
.italic {
font-style: italic;
}
/* dashed outline to indicate droppable area */
.dashed-outline {
outline: 4px dashed gray;
}

View File

@ -43,7 +43,7 @@
{% endif %}
<div class="form-group">
<label class="form-label">PGP Public Key</label>
<textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ contact.pgp_public_key or "" }}</textarea>
<textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="(Drag and drop or paste your pgp public key here)&#10;-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ contact.pgp_public_key or "" }}</textarea>
</div>
<button class="btn btn-primary" name="action" {% if not current_user.is_premium() %}
disabled {% endif %} value="save">

View File

@ -112,7 +112,7 @@
{{ csrf_form.csrf_token }}
<div class="form-group">
<label class="form-label">PGP Public Key</label>
<textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ mailbox.pgp_public_key or "" }}</textarea>
<textarea name="pgp" {% if not current_user.is_premium() %} disabled {% endif %} class="form-control" rows=10 id="pgp-public-key" placeholder="(Drag and drop or paste your pgp public key here)&#10;-----BEGIN PGP PUBLIC KEY BLOCK-----">{{ mailbox.pgp_public_key or "" }}</textarea>
</div>
<input type="hidden" name="form-name" value="pgp">
<button class="btn btn-primary" name="action" {% if not current_user.is_premium() %}