Replace reserved chars in filenames

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## UNRELEASED
 
+### Fixed
+
+- ([#138](https://github.com/demos-europe/demosplan-ui/pull/138)) Uploading files whose names contained reserved characters no longer break certain endpoints. ([@spiess-demos](https://github.com/spiess-demos))
+
 ## v0.0.17 - 2023-03-23
 
 - ([#133](https://github.com/demos-europe/demosplan-ui/pull/133)) Import `a11y-datepicker` not as es Module anymore, to make it resolveable 

src/components/core/DpUpload/DpUpload.vue

@@ -60,7 +60,7 @@ export default {
 
     /**
      * Maximum number of files that can be uploaded.
-     * By default its a single file upload.
+     * By default, it's allowed to upload a single file.
      */
     maxNumberOfFiles: {
       type: Number,
@@ -95,6 +95,60 @@ export default {
       return b ? b.pop() : ''
     },
 
+    /**
+     * Fires immediately before a file is added to the Uppy store.
+     *
+     * The hook is used here to clean file names from characters that would
+     * break the tus endpoint. This could as well be implemented within the backend.
+     *
+     * @param currentFile
+     * @param files
+     * @return {(*&{meta: (*&{name: *}), name: *})|*}
+     * @see https://github.com/transloadit/uppy/blob/main/packages/@uppy/core/src/Uppy.js#L503
+     */
+    handleOnBeforeFileAdded (currentFile, files) {
+      let fileName = currentFile.name
+
+      /*
+       * This is not an exhaustive list - the characters have been determined
+       * simply by trying out which break or do not break the tus endpoint.
+       */
+      const reservedCharacters = [
+        '?',
+        '#',
+        '&',
+        '\'',
+        '"',
+        '/',
+        ':',
+        '\\'
+      ]
+
+      /*
+       * For reasons i could not figure out, the for loop was needed here
+       * to reliably access the item that is looped over. When using forEach,
+       * strangely it always held the value of currentFile.
+       */
+      for (let i = 0; i < reservedCharacters.length; i++) {
+        if (fileName.includes(reservedCharacters[i])) {
+          fileName = fileName.replace(reservedCharacters[i], '_')
+        }
+      }
+
+      if (fileName !== currentFile.name) {
+        return {
+          ...currentFile,
+          name: fileName,
+          meta: {
+            ...currentFile.meta,
+            name: fileName
+          }
+        }
+      } else {
+        return currentFile
+      }
+    },
+
     initialize () {
       const locale = { strings: { ...de().strings, ...this.translations } }
       this.uppy = new Uppy({
@@ -106,6 +160,7 @@ export default {
           maxFileSize: this.maxFileSize,
           maxNumberOfFiles: this.maxNumberOfFiles
         },
+        onBeforeFileAdded: this.handleOnBeforeFileAdded,
         locale: locale
       })
 

src/components/core/DpUpload/DpUploadedFile.vue

@@ -15,8 +15,10 @@
     <span
       :class="prefixClass('display--inline-block u-pl-0_5')"
       style="width: calc(100% - 62px);">
-      {{ file.name }}
-      ({{ file.size }})
+      <span class="overflow-word-break">
+        {{ file.name }}
+      </span>
+      ({{ fileSize }})
       <button
         type="button"
         :class="prefixClass('btn-icns u-m-0')"
@@ -31,7 +33,7 @@
 </template>
 
 <script>
-import { getFileInfo } from '../../../lib'
+import { convertSize } from '../../../lib'
 import { prefixClassMixin } from '../../../mixins'
 
 export default {
@@ -42,22 +44,22 @@ export default {
   mixins: [prefixClassMixin],
 
   props: {
-    fileString: {
-      type: String,
+    file: {
+      type: Object,
       required: true
     }
   },
 
   computed: {
-    file () {
-      return getFileInfo(this.fileString)
-    },
-
     fileIcon () {
       const icon = this.file.mimeType === 'txt' ? 'fa-file-text-o' : 'fa-folder-o'
       return this.prefixClass('fa ' + icon)
     },
 
+    fileSize () {
+      return convertSize('KB', this.file.size)
+    },
+
     isImage () {
       const imageTypes = ['png', 'jpg', 'gif', 'bmp', 'ico', 'tiff', 'svg']
       return typeof imageTypes.find(type => type === this.file.mimeType) !== 'undefined'

src/components/core/DpUpload/DpUploadedFileList.vue

@@ -5,8 +5,8 @@
     </h4>
     <ul :class="prefixClass('o-list space-stack-xs')">
       <dp-uploaded-file
-        v-for="(fileString, idx) in fileStrings"
-        :file-string="fileString"
+        v-for="(file, idx) in files"
+        :file="file"
         @file-remove="file => $emit('file-remove', file)"
         :key="idx" />
     </ul>
@@ -32,16 +32,6 @@ export default {
       required: false,
       default: () => ([])
     }
-  },
-
-  computed: {
-    fileStrings () {
-      return this.files.map(file => {
-        let str = Object.values(file).toString()
-        str = str.replace(/,/g, ':')
-        return str
-      })
-    }
   }
 }
 </script>