Use upload_name in dataset page

backend/examples/serializers.py

@@ -36,8 +36,17 @@ class ExampleSerializer(serializers.ModelSerializer):
 
     class Meta:
         model = Example
-        fields = ["id", "filename", "meta", "annotation_approver", "comment_count", "text", "is_confirmed"]
-        read_only_fields = ["filename", "is_confirmed"]
+        fields = [
+            "id",
+            "filename",
+            "meta",
+            "annotation_approver",
+            "comment_count",
+            "text",
+            "is_confirmed",
+            "upload_name",
+        ]
+        read_only_fields = ["filename", "is_confirmed", "upload_name"]
 
 
 class ExampleStateSerializer(serializers.ModelSerializer):

frontend/components/example/AudioList.vue

@@ -29,19 +29,16 @@
         filled
       />
     </template>
-    <template #[`item.url`]="{ item }">
+    <template #[`item.fileUrl`]="{ item }">
       <audio
         controls
-        :src="item.url"
+        :src="item.fileUrl"
         class="mt-2"
       >
         Your browser does not support the
         <code>audio</code> element.
       </audio>
     </template>
-    <template #[`item.filename`]="{ item }">
-      {{ item.filename.split('?')[0] }}
-    </template>
     <template #[`item.meta`]="{ item }">
       {{ JSON.stringify(item.meta, null, 4) }}
     </template>
@@ -108,7 +105,7 @@ export default Vue.extend({
         },
         {
           text: 'Audio',
-          value: 'url',
+          value: 'fileUrl',
           sortable: false
         },
         {

frontend/components/example/DocumentList.vue

@@ -33,9 +33,6 @@
       <span class="d-flex d-sm-none">{{ item.text | truncate(50) }}</span>
       <span class="d-none d-sm-flex">{{ item.text | truncate(200) }}</span>
     </template>
-    <template #[`item.filename`]="{ item }">
-      {{ item.filename.split('?')[0] }}
-    </template>
     <template #[`item.meta`]="{ item }">
       {{ JSON.stringify(item.meta, null, 4) }}
     </template>

frontend/components/example/ImageList.vue

@@ -29,9 +29,9 @@
         filled
       />
     </template>
-    <template #[`item.url`]="{ item }">
+    <template #[`item.fileUrl`]="{ item }">
       <v-img
-        :src="item.url"
+        :src="item.fileUrl"
         aspect-ratio="1"
         height="150"
         max-height="150"
@@ -39,9 +39,6 @@
         class="grey lighten-2"
       />
     </template>
-    <template #[`item.filename`]="{ item }">
-      {{ item.filename.split('?')[0] }}
-    </template>
     <template #[`item.meta`]="{ item }">
       {{ JSON.stringify(item.meta, null, 4) }}
     </template>
@@ -108,7 +105,7 @@ export default Vue.extend({
         },
         {
           text: 'Image',
-          value: 'url',
+          value: 'fileUrl',
           sortable: false
         },
         {

frontend/domain/models/example/example.ts

@@ -18,17 +18,15 @@ export class ExampleItem {
   @Expose({ name: 'is_confirmed' })
   isConfirmed: boolean;
 
+  @Expose({ name: 'upload_name' })
+  filename: string;
+
   get url() {
     const l = this.fileUrl.indexOf('media/')
     const r = this.fileUrl.indexOf('media/', l + 1)
     return this.fileUrl.slice(0, l) + this.fileUrl.slice(r)
   }
 
-  get filename() {
-    const items = this.fileUrl.split('/')
-    return items[items.length - 1]
-  }
-
   toObject(): Object {
     return {
       id: this.id,