Replace spaces by underscores in file names

src/resources/assets/js/createContainer.vue

@@ -2,7 +2,7 @@
 import DirectoriesApi from './api/storageRequestDirectories';
 import FilesApi from './api/storageRequestFiles';
 import StorageRequestApi from './api/storageRequests';
-import {LoaderMixin, handleErrorResponse, FileBrowserComponent, warning} from './import';
+import {LoaderMixin, handleErrorResponse, FileBrowserComponent} from './import';
 import {sizeForHumans} from './utils';
 
 // Number of times a file upload is retried.
@@ -34,6 +34,7 @@ export default {
             maxFilesizeBytes: 0,
             exceedsMaxFilesize: false,
             chunkSize: 0,
+            pathContainsSpaces: false,
         };
     },
     computed: {
@@ -130,9 +131,9 @@ export default {
                 // See https://github.com/biigle/user-storage/issues/16.
                 let file = newFiles[i];
                 if (file.name.includes(' ')) {
-                    let newName = newFiles[i].name.replace(' ', '_');
-                    file = new File([newFiles[i]], newName, { type: newFiles[i].type })
-                    warning('Spaces are replaced by underscores in file names');
+                    this.pathContainsSpaces = true;
+                    let newName = newFiles[i].name.replace(/ /g, '_');
+                    file = new File([newFiles[i]], newName, { type: newFiles[i].type });
                 }
                 files.push(file);
             }
@@ -176,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/assets/js/import.js

@@ -1,4 +1,3 @@
 export let FileBrowserComponent = biigle.$require('core.components.fileBrowser');
 export let handleErrorResponse = biigle.$require('messages').handleErrorResponse;
-export let warning = biigle.$require('messages').warning;
 export let LoaderMixin = biigle.$require('core.mixins.loader');

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"