- Number of selected files:
- {{ files.size }}
- {{ files.first()?.name ?? "none" }}
+
+
+ Number of selected files:
+ {{ files.size }}
+
+
+
+ {{ name }}
@@ -101,11 +102,11 @@ const props = withDefaults(
defineProps<{
type: "image" | "json" | "tabular" | "text";
multiple?: boolean; // accept one or multiple files
- lockIcon?: boolean;
+ noUpload?: boolean;
}>(),
{
multiple: false,
- lockIcon: false,
+ noUpload: false,
},
);
@@ -156,6 +157,16 @@ const acceptFilter = computed(() => {
throw new TypeError("invalid value");
});
+const fileNamesDisplay = computed(() => {
+ if (!files.value) return "";
+ const arr = files.value.map((f) => f.name);
+ if (arr.size < 5) {
+ return arr;
+ } else {
+ return [...arr.slice(0, 3), "...", arr.last()];
+ }
+});
+
// we use an event counter to test whether the user is dragging a file over the field
// because events are triggered multiple times when hovering of children elements (such as button or text)
const dragEventCount = ref(0);
diff --git a/webapp/src/components/dataset_input/ImageDatasetInput.vue b/webapp/src/components/dataset_input/ImageDatasetInput.vue
index 2ae99f9e6..df9dd6a75 100644
--- a/webapp/src/components/dataset_input/ImageDatasetInput.vue
+++ b/webapp/src/components/dataset_input/ImageDatasetInput.vue
@@ -1,6 +1,6 @@
-
+
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
index cfed2c998..13c546dd2 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
@@ -6,7 +6,7 @@
Connect the CSV file containing a mapping between images and labels
-
+
The CSV file must contain a header with only two columns (filename,
label)
Connect the images
-
+
Drag and drop or browse for the images referenced in the connected CSV
file.
- {{ browsingTip }}
@@ -64,7 +63,6 @@ import { useToaster } from "@/composables/toaster";
import FileSelection from "../FileSelection.vue";
import type { NamedLabeledImageDataset } from "../types.js";
-import { browsingTip } from "./strings.js";
const toaster = useToaster();
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
index d0d81d6fb..f592b9385 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
@@ -2,11 +2,9 @@
- Group label: {{ label }}
+ Group label: {{ label }}
-
- {{ browsingTip }}
-
+
@@ -25,7 +23,6 @@ import IconCard from "@/components/containers/IconCard.vue";
import FileSelection from "../FileSelection.vue";
import type { NamedLabeledImageDataset } from "../types.js";
-import { browsingTip } from "./strings.js";
const props = defineProps<{
labels: Set
;
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/strings.ts b/webapp/src/components/dataset_input/LabeledImageDatasetInput/strings.ts
deleted file mode 100644
index ebb4fbd1f..000000000
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/strings.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export const browsingTip =
- "Tip: when browsing files you can use the keyboard shortcut Ctrl + A to select all images.";
diff --git a/webapp/src/components/dataset_input/TabularDatasetInput.vue b/webapp/src/components/dataset_input/TabularDatasetInput.vue
index 389330e13..379ff527d 100644
--- a/webapp/src/components/dataset_input/TabularDatasetInput.vue
+++ b/webapp/src/components/dataset_input/TabularDatasetInput.vue
@@ -1,7 +1,7 @@
-
+
diff --git a/webapp/src/components/dataset_input/TextDatasetInput.vue b/webapp/src/components/dataset_input/TextDatasetInput.vue
index dd846021d..8638b3b64 100644
--- a/webapp/src/components/dataset_input/TextDatasetInput.vue
+++ b/webapp/src/components/dataset_input/TextDatasetInput.vue
@@ -1,7 +1,7 @@
-
+