From 1d14bd96ff3dc52d4cc72d775462a3521238518a Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 18:34:37 +0200
Subject: [PATCH 01/10] fix: correct variable name for lock icon

---
 webapp/src/components/dataset_input/FileSelection.vue       | 6 +++---
 webapp/src/components/dataset_input/ImageDatasetInput.vue   | 2 +-
 .../dataset_input/LabeledImageDatasetInput/ByCSV.vue        | 4 ++--
 .../dataset_input/LabeledImageDatasetInput/ByGroup.vue      | 2 +-
 webapp/src/components/dataset_input/TabularDatasetInput.vue | 2 +-
 webapp/src/components/dataset_input/TextDatasetInput.vue    | 2 +-
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index 0aeeb04b7..3092456ee 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -42,7 +42,7 @@
       </div>
       <!-- Display what has been connected -->
       <div
-        v-if="files === undefined && lockIcon"
+        v-if="files === undefined && noUpload"
         class="flex justify-end items-center mt-1"
       >
         <span
@@ -101,11 +101,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,
   },
 );
 
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 @@
 <template>
   <DatasetInput>
-    <FileSelection v-model="files" type="image" lock-icon multiple />
+    <FileSelection v-model="files" type="image" no-upload multiple />
   </DatasetInput>
 </template>
 
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
index cfed2c998..533c673f6 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
         </template>
 
-        <FileSelection v-model="csvFiles" type="tabular" private>
+        <FileSelection v-model="csvFiles" type="tabular" no-upload>
           <b>
             The CSV file must contain a header with only two columns (filename,
             label) </b
@@ -39,7 +39,7 @@
       >
         <template #title> Connect the images </template>
 
-        <FileSelection v-model="images" type="image" multiple private>
+        <FileSelection v-model="images" type="image" multiple no-upload>
           Drag and drop or browse for the images referenced in the connected CSV
           file.
           <br />
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
index d0d81d6fb..ad6824866 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
@@ -4,7 +4,7 @@
       <IconCard v-for="[label, files] in labelsAndFiles" :key="label">
         <template #title> Group label:&nbsp;&nbsp;{{ label }} </template>
 
-        <FileSelection v-model="files.value" type="image" multiple private>
+        <FileSelection v-model="files.value" type="image" multiple no-upload>
           {{ browsingTip }}
         </FileSelection>
       </IconCard>
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 @@
 <template>
   <div class="grid grid-cols-1">
     <DatasetInput>
-      <FileSelection v-model="files" type="tabular" private />
+      <FileSelection v-model="files" type="tabular" no-upload />
     </DatasetInput>
   </div>
 </template>
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 @@
 <template>
   <div class="grid grid-cols-1">
     <DatasetInput>
-      <FileSelection v-model="files" type="text" private />
+      <FileSelection v-model="files" type="text" no-upload />
     </DatasetInput>
   </div>
 </template>

From 9fdf386f3c92761ab72df5e5943975998ea3f9a9 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 18:42:43 +0200
Subject: [PATCH 02/10] fix: remove duplicated space

---
 .../dataset_input/LabeledImageDatasetInput/ByGroup.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
index ad6824866..d7c9d83a3 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
@@ -2,7 +2,7 @@
   <div class="grid grid-cols-1 lg:grid-cols-2 cards-gap">
     <div class="contents">
       <IconCard v-for="[label, files] in labelsAndFiles" :key="label">
-        <template #title> Group label:&nbsp;&nbsp;{{ label }} </template>
+        <template #title> Group label:&nbsp;{{ label }} </template>
 
         <FileSelection v-model="files.value" type="image" multiple no-upload>
           {{ browsingTip }}

From 76d0a6ee9cb697553d54d66807e3b30276d1b309 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 18:42:58 +0200
Subject: [PATCH 03/10] fix: make file input box text shorter

---
 webapp/src/components/dataset_input/FileSelection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index 3092456ee..0908bc08b 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -21,13 +21,13 @@
         <p
           class="p-4 text-lg text-disco-blue dark:text-disco-light-blue flex-wrap justify-center"
         >
-          <span>Drag and drop the {{ fileType }} or</span>
+          <span>Drop {{ fileType }} here or</span>
         </p>
         <label class="mb-6">
           <span
             class="px-4 py-2 min-w-32 text-lg uppercase text-white bg-disco-cyan rounded-sm duration-200 hover:bg-white dark:hover:bg-slate-950 hover:outline-solid hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan hover:cursor-pointer"
           >
-            select {{ fileType }}
+            select
           </span>
           <input
             ref="inputFileElement"

From f4152b441ec828d5c7edfc385d08d028e83a4df7 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 18:50:26 +0200
Subject: [PATCH 04/10] feat: make lock icon stand out

---
 .../dataset_input/FileSelection.vue           | 25 ++++++++-----------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index 0908bc08b..6b7df4d9a 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -8,6 +8,17 @@
   >
     <section>
       <!-- Hide the file input field when already submitted-->
+      <div v-if="noUpload" class="flex justify-center items-center mt-1">
+        <span
+          v-tippy="{
+            content: 'Data always stays on your device and is never shared.',
+          }"
+          class="bg-green-200 text-green-500 rounded-full hover:cursor-pointer px-2 py-1"
+        >
+          <i class="fa fa-lock mr-1" />
+          <span> Stays on your device </span>
+        </span>
+      </div>
       <div
         v-if="!hideConnectField"
         class="border-dashed rounded-xl border-disco-cyan flex flex-col justify-center items-center min-h-48"
@@ -40,20 +51,6 @@
           />
         </label>
       </div>
-      <!-- Display what has been connected -->
-      <div
-        v-if="files === undefined && noUpload"
-        class="flex justify-end items-center mt-1"
-      >
-        <span
-          v-tippy="{
-            content: 'Data always stays on your device and is never shared.',
-          }"
-          class="hover:cursor-pointer"
-        >
-          <i class="fa fa-lock mr-1" />
-        </span>
-      </div>
 
       <!-- Display some text if specified -->
       <div

From 66aa19a7e07dd8eedcb5c9a00ae2cc1d6b57fafe Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 18:55:23 +0200
Subject: [PATCH 05/10] fix: make select button look similar to clear button

---
 webapp/src/components/dataset_input/FileSelection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index 6b7df4d9a..73f3e25f9 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -36,7 +36,7 @@
         </p>
         <label class="mb-6">
           <span
-            class="px-4 py-2 min-w-32 text-lg uppercase text-white bg-disco-cyan rounded-sm duration-200 hover:bg-white dark:hover:bg-slate-950 hover:outline-solid hover:outline-disco-cyan hover:outline-2 hover:text-disco-cyan hover:cursor-pointer"
+            class="px-4 py-2 min-w-32 text-lg capitalize text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
           >
             select
           </span>

From 79ce5d5389ed325b105b6b3064ceba76a20a7d04 Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 18:59:49 +0200
Subject: [PATCH 06/10] feat: add folder icons

---
 webapp/src/components/dataset_input/FileSelection.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index 73f3e25f9..dce941838 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -38,7 +38,8 @@
           <span
             class="px-4 py-2 min-w-32 text-lg capitalize text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
           >
-            select
+            <i class="fas fa-folder-open mr-2" />
+            <span>select</span>
           </span>
           <input
             ref="inputFileElement"
@@ -72,6 +73,7 @@
         <div
           class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-disco-light-cyan"
         >
+          <i class="fas fa-folder-open mr-2" />
           <span v-if="multiple"
             >Number of selected files:
             <span class="pl-1 text-xl">{{ files.size }}</span></span

From b4f870d15f4ea9dd371b0810d20745ffa312ed9e Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 19:00:02 +0200
Subject: [PATCH 07/10] fix: padlock bottom margin

---
 webapp/src/components/dataset_input/FileSelection.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index dce941838..fd39bbefe 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -8,7 +8,7 @@
   >
     <section>
       <!-- Hide the file input field when already submitted-->
-      <div v-if="noUpload" class="flex justify-center items-center mt-1">
+      <div v-if="noUpload" class="flex justify-center items-center my-1">
         <span
           v-tippy="{
             content: 'Data always stays on your device and is never shared.',

From d8e4f21ae201e38354684d8f70914e28cdd98ceb Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 19:02:50 +0200
Subject: [PATCH 08/10] fix: show folder icon only when no upload

---
 webapp/src/components/dataset_input/FileSelection.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index fd39bbefe..d21e20b6f 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -38,7 +38,7 @@
           <span
             class="px-4 py-2 min-w-32 text-lg capitalize text-white bg-disco-cyan font-disco rounded-full duration-200 hover:bg-transparent dark:hover:bg-transparent hover:outline-solid hover:outline-2 hover:outline-disco-cyan dark:hover:outline-disco-light-cyan hover:text-disco-cyan dark:hover:text-disco-light-cyan"
           >
-            <i class="fas fa-folder-open mr-2" />
+            <i v-if="noUpload" class="fas fa-folder-open mr-2" />
             <span>select</span>
           </span>
           <input
@@ -73,7 +73,7 @@
         <div
           class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-disco-light-cyan"
         >
-          <i class="fas fa-folder-open mr-2" />
+          <i v-if="noUpload" class="fas fa-folder-open mr-2" />
           <span v-if="multiple"
             >Number of selected files:
             <span class="pl-1 text-xl">{{ files.size }}</span></span

From 82d928564c4e306e029cbed2addd1885df63ecdb Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 19:23:28 +0200
Subject: [PATCH 09/10] feat: display file names when selected

---
 .../dataset_input/FileSelection.vue           | 24 ++++++++++++++-----
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/webapp/src/components/dataset_input/FileSelection.vue b/webapp/src/components/dataset_input/FileSelection.vue
index d21e20b6f..13c01f1ae 100644
--- a/webapp/src/components/dataset_input/FileSelection.vue
+++ b/webapp/src/components/dataset_input/FileSelection.vue
@@ -71,14 +71,16 @@
         class="pt-4 flex flex-col items-center pb-5"
       >
         <div
-          class="mb-4 flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-disco-light-cyan"
+          class="flex justify-center items-center text-center md:text-left sm:text-lg text-disco-blue dark:text-disco-light-cyan"
         >
           <i v-if="noUpload" class="fas fa-folder-open mr-2" />
-          <span v-if="multiple"
-            >Number of selected files:
-            <span class="pl-1 text-xl">{{ files.size }}</span></span
-          >
-          <span v-else class="pl-1">{{ files.first()?.name ?? "none" }}</span>
+          <span v-if="multiple">
+            Number of selected files:
+            <span class="text-xl">{{ files.size }}</span>
+          </span>
+        </div>
+        <div class="flex flex-col py-4">
+          <span v-for="(name, i) in fileNamesDisplay" :key="i">{{ name }}</span>
         </div>
         <div>
           <CustomButton @click="clearFiles">
@@ -155,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);

From 157c80ec9efe1d9607f906f19b36a214422fafbb Mon Sep 17 00:00:00 2001
From: hugo <hugo.lepeytre@epfl.ch>
Date: Fri, 10 Jul 2026 19:28:59 +0200
Subject: [PATCH 10/10] feat: remove long texts

---
 webapp/src/components/dataset_input/DatasetInput.vue  | 11 -----------
 .../dataset_input/LabeledImageDatasetInput/ByCSV.vue  |  2 --
 .../LabeledImageDatasetInput/ByGroup.vue              |  5 +----
 .../dataset_input/LabeledImageDatasetInput/strings.ts |  2 --
 4 files changed, 1 insertion(+), 19 deletions(-)
 delete mode 100644 webapp/src/components/dataset_input/LabeledImageDatasetInput/strings.ts

diff --git a/webapp/src/components/dataset_input/DatasetInput.vue b/webapp/src/components/dataset_input/DatasetInput.vue
index 1527493c0..efe213c61 100644
--- a/webapp/src/components/dataset_input/DatasetInput.vue
+++ b/webapp/src/components/dataset_input/DatasetInput.vue
@@ -3,17 +3,6 @@
     <template #title> Connect your data </template>
     <template #icon> <PlugIcon /> </template>
 
-    <div class="mb-5 text-left">
-      Disco needs to know where your data is located on your device in order to
-      read it (<b>not</b> upload it!) and train models. Models are trained on
-      your local data and are periodically aggregated with other users' models
-      if any.
-      <br />
-      <br />
-      <b>
-        Your data stays on your device and data is never uploaded anywhere.
-      </b>
-    </div>
     <slot />
   </IconCard>
 </template>
diff --git a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
index 533c673f6..13c546dd2 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByCSV.vue
@@ -43,7 +43,6 @@
           Drag and drop or browse for the images referenced in the connected CSV
           file.
           <br />
-          {{ browsingTip }}
         </FileSelection>
       </IconCard>
     </div>
@@ -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 d7c9d83a3..f592b9385 100644
--- a/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
+++ b/webapp/src/components/dataset_input/LabeledImageDatasetInput/ByGroup.vue
@@ -4,9 +4,7 @@
       <IconCard v-for="[label, files] in labelsAndFiles" :key="label">
         <template #title> Group label:&nbsp;{{ label }} </template>
 
-        <FileSelection v-model="files.value" type="image" multiple no-upload>
-          {{ browsingTip }}
-        </FileSelection>
+        <FileSelection v-model="files.value" type="image" multiple no-upload />
       </IconCard>
     </div>
   </div>
@@ -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<string>;
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.";