From fbebb701bc4b7d8e5710f6098d443a09850caa0d Mon Sep 17 00:00:00 2001
From: Tamara Steinwender <tamara.steinwender@tugraz.at>
Date: Tue, 27 Jul 2021 09:15:33 +0200
Subject: [PATCH] Add an image upload functionality
---
packages/file-handling/src/clipboard.js | 2 +-
packages/file-handling/src/file-source.js | 38 +++++++++++++------
.../src/i18n/de/translation.json | 1 +
.../src/i18n/en/translation.json | 1 +
4 files changed, 30 insertions(+), 12 deletions(-)
diff --git a/packages/file-handling/src/clipboard.js b/packages/file-handling/src/clipboard.js
index fd465a8f..b975f784 100644
--- a/packages/file-handling/src/clipboard.js
+++ b/packages/file-handling/src/clipboard.js
@@ -22,7 +22,7 @@ export class Clipboard extends ScopedElementsMixin(AdapterLitElement) {
super();
this._i18n = createInstance();
this.lang = this._i18n.language;
- this.allowedMimeTypes = '*/*';
+ this.allowedMimeTypes = '';
this.clipboardFiles = {files: ''};
this.clipboardSelectBtnDisabled = true;
this.tabulatorTable = null;
diff --git a/packages/file-handling/src/file-source.js b/packages/file-handling/src/file-source.js
index ce4a7d0b..56df1b35 100644
--- a/packages/file-handling/src/file-source.js
+++ b/packages/file-handling/src/file-source.js
@@ -46,7 +46,7 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
this.nextcloudPath = '';
this.nextcloudFileURL = '';
this.dropArea = null;
- this.allowedMimeTypes = '*/*';
+ this.allowedMimeTypes = '';
this.enabledTargets = 'local';
this.buttonLabel = '';
this.disabled = false;
@@ -147,7 +147,8 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
this.dropArea.addEventListener(eventName, this.unhighlight.bind(this), false);
});
this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false);
- this._('#fileElem').addEventListener('change', this.handleChange.bind(this));
+ this._('#fileElem').addEventListener('change', this.handleChange.bind(this, this._('#fileElem')));
+ this._('#imageElem').addEventListener('change', this.handleChange.bind(this, this._('#imageElem')));
this._('nav.modal-nav').addEventListener("scroll", this.handleScroll.bind(this));
@@ -188,19 +189,21 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
this.handleFiles(files);
}
- async handleChange(e) {
- let fileElem = this._('#fileElem');
+ async handleChange(element) {
+ let fileElem = element;
if (fileElem.files.length === 0) {
return;
}
+
await this.handleFiles(fileElem.files);
// reset the element's value so the user can upload the same file(s) again
fileElem.value = '';
}
+
/**
* Handles files that were dropped to or selected in the component
*
@@ -602,6 +605,15 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
.modal-nav{
height: 100%;
}
+
+ .file-upload{
+ display: flex;
+ }
+
+ .file-upload label{
+ margin-left: 10px;
+ margin-right: 10px;
+ }
@media only screen
@@ -629,7 +641,7 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
const i18n = this._i18n;
let allowedMimeTypes = this.allowedMimeTypes;
- if (this.decompressZip && this.allowedMimeTypes !== "*/*") {
+ if (this.decompressZip && this.allowedMimeTypes !== "") {
allowedMimeTypes += ",application/zip,application/x-zip-compressed";
}
@@ -682,15 +694,21 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
<div class="block">
<p>${i18n.t('intro')}</p>
</div>
+ <div class="file-upload">
+ <label class="button is-primary" for="fileElem" ?disabled="${this.disabled}">
+ ${this.buttonLabel || i18n.t('upload-label')}
+ </label>
+ <label class="button is-primary ${classMap({"hidden": !this.hasEnabledSource("image")})}" for="imageElem" ?disabled="${this.disabled}">
+ ${i18n.t('image-upload-label')}
+ </label>
+ </div>
<input ?disabled="${this.disabled}"
type="file"
id="fileElem"
multiple
accept="${mimeTypesToAccept(allowedMimeTypes)}"
name='file'>
- <label class="button is-primary" for="fileElem" ?disabled="${this.disabled}">
- ${this.buttonLabel || i18n.t('upload-label')}
- </label>
+
<input ?disabled="${this.disabled}"
type="file"
id="imageElem"
@@ -698,9 +716,7 @@ export class FileSource extends ScopedElementsMixin(DbpFileHandlingLitElement) {
accept="image/*"
name='image'
class="hidden">
- <label class="button is-primary ${classMap({"hidden": !this.hasEnabledSource("image")})}" for="imageElem" ?disabled="${this.disabled}">
- Bild upload
- </label>
+
</div>
</div>
<div class="source-main ${classMap({"hidden": this.activeTarget !== "nextcloud" || this.nextcloudWebDavUrl === "" || this.nextcloudAuthUrl === ""})}">
diff --git a/packages/file-handling/src/i18n/de/translation.json b/packages/file-handling/src/i18n/de/translation.json
index b32f65e8..464364ca 100644
--- a/packages/file-handling/src/i18n/de/translation.json
+++ b/packages/file-handling/src/i18n/de/translation.json
@@ -9,6 +9,7 @@
"server-required": "Es wird unter der URL <a href=\"{{- url}}\"><tt>{{- url}}</tt></a> ein Server benötigt um die Dateien zu empfangen.",
"intro": "Sie können in diesem Bereich Dateien per Drag & Drop oder per Direktauswahl hochladen. Die Dateien dürfen sich auch in ZIP-Archiven befinden.",
"upload-label": "Dateiauswahl",
+ "image-upload-label": "Bild auswählen",
"upload-disabled-title": "Die Dateiauswahl ist während dem Hochladvorgang gesperrt!",
"page-leaving-warn-dialogue": "Vorsicht! Es befinden sich noch ungenutzte Dateien in der Zwischenablage. Wenn Sie auf 'OK' klicken, wird die bestehende Zwischenablage automatisch verworfen!",
"file-source": {
diff --git a/packages/file-handling/src/i18n/en/translation.json b/packages/file-handling/src/i18n/en/translation.json
index 6d86a8ba..59411c72 100644
--- a/packages/file-handling/src/i18n/en/translation.json
+++ b/packages/file-handling/src/i18n/en/translation.json
@@ -9,6 +9,7 @@
"required-server": "You need an upload server listening at <a href=\"{{- url}}\"><tt>{{- url}}</tt></a> to receive the files...",
"intro": "Upload multiple files with the file dialog or by dragging and dropping images onto the dashed region.",
"upload-label": "Select some files",
+ "image-upload-label": "Select an image",
"upload-disabled-title": "The file selection is disabled while uploading!",
"page-leaving-warn-dialogue": "Attention! There are still unused files in the clipboard. If you click on 'OK', the existing clipboard is automatically discarded!",
"file-source": {
--
GitLab