Replace spaces by underscores in file names

src/resources/assets/js/createContainer.vue

@@ -34,6 +34,7 @@ export default {
             maxFilesizeBytes: 0,
             exceedsMaxFilesize: false,
             chunkSize: 0,
+            pathContainsSpaces: false,
         };
     },
     computed: {
@@ -126,7 +127,15 @@ export default {
             }
 
             for (i = 0; i < newFiles.length; i++) {
-                files.push(newFiles[i]);
+                // Replace spaces by underscores in file name due to error when uploading files >5GB.
+                // See https://github.com/biigle/user-storage/issues/16.
+                let file = newFiles[i];
+                if (file.name.includes(' ')) {
+                    this.pathContainsSpaces = true;
+                    let newName = newFiles[i].name.replace(/ /g, '_');
+                    file = new File([newFiles[i]], newName, { type: newFiles[i].type });
+                }
+                files.push(file);
             }
 
             this.syncFiles();
@@ -168,6 +177,10 @@ export default {
         addDirectory(root) {
             let name = prompt('Please enter the new directory name');
             if (name) {
+                if (name.includes(' ')) {
+                    this.pathContainsSpaces = true;
+                    name = name.replace(/ /g, '_');
+                }
                 this.handleNewDirectory(name, root === true);
             }
         },

src/resources/views/create.blade.php

@@ -145,6 +145,10 @@ class="btn btn-success"
             Selected files with a total size of <span v-text="totalSizeForHumans"></span>.
         </p>
 
+        <p v-cloak v-if="pathContainsSpaces" class="text-warning">
+            Replaced spaces by underscores.
+        </p>
+
         <file-browser
             v-cloak
             v-bind:root-directory="rootDirectory"