fix(file upload): safe encode filename with encodeRFC5987ValueChars

frontend/src/components/files/Listing.vue

@@ -91,6 +91,7 @@ import Item from './ListingItem'
 import css from '@/utils/css'
 import { users, files as api } from '@/api'
 import buttons from '@/utils/buttons'
+import url from '@/utils/url'
 
 export default {
   name: 'listing',
@@ -376,7 +377,8 @@ export default {
 
       for (let i = 0; i < files.length; i++) {
         let file = files[i]
-        promises.push(api.post(this.$route.path + base + file.name, file, overwrite, onupload(i)))
+        let filenameEncoded = url.encodeRFC5987ValueChars(file.name)
+        promises.push(api.post(this.$route.path + base + filenameEncoded, file, overwrite, onupload(i)))
       }
 
       let finish = () => {

frontend/src/utils/url.js

@@ -7,6 +7,20 @@ function removeLastDir (url) {
   return arr.join('/')
 }
 
+// this code borrow from mozilla
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent#Examples
+function encodeRFC5987ValueChars(str) {
+  return encodeURIComponent(str).
+      // Note that although RFC3986 reserves "!", RFC5987 does not,
+      // so we do not need to escape it
+      replace(/['()]/g, escape). // i.e., %27 %28 %29
+      replace(/\*/g, '%2A').
+          // The following are not required for percent-encoding per RFC5987, 
+          // so we can allow for a little better readability over the wire: |`^
+          replace(/%(?:7C|60|5E)/g, unescape);
+}
+
 export default {
+  encodeRFC5987ValueChars: encodeRFC5987ValueChars,
   removeLastDir: removeLastDir
 }